HTML表单中的多个提交按钮

inemo 发布于 2018-02-02 html 最后更新 2018-02-02 11:41 769 浏览

假设您在HTML表单中创建向导。一个按钮返回,一个按钮向前。由于back按钮在按下Enter时会首先出现在标记中,因此将使用该按钮来提交表单。 例:

<form>
  <!-- put your cursor in this field and press Enter -->
  <input type="text" name="field1" />
<!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />
<!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>
我想要做的是,当用户按下回车键时,可以决定使用哪个按钮提交表单。这样,当你按下Enter时,向导将移动到下一页,而不是前一页。你必须使用tabindex来做到这一点吗?
已邀请:

malias

赞同来自:

给你的提交按钮相同的名字是这样的:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />
当用户按下回车键并且Request转到服务器时,您可以在包含表单name/value对集合的服务器端代码中检查submitButton的值。例如在经典的ASP中:
If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If
参考:Using multiple submit buttons on a single form

zcum

赞同来自:

是否有可能将上一个按钮类型更改为如下所示的按钮:

<input type="button" name="prev" value="Previous Page" />
现在Next按钮将成为默认值,此外,您还可以将default属性添加到该按钮,以便您的浏览器像下面这样突出显示它:
<input type="submit" name="next" value="Next Page" default />
希望有所帮助。

veos

赞同来自:

如果默认情况下使用的第一个按钮在浏览器中是一致的,为什么不把它们放在源代码中,然后使用CSS来切换它们的外观?例如,float左右切换视觉效果。

icum

赞同来自:

我会用Javascript来提交表单。该函数将由表单元素的OnKeyPress事件触发,并将检测是否选择了回车键。如果是这样,它会提交表格。 这里有两个页面,介绍如何做到这一点:12。基于这些,以下是使用示例(基于here):

<SCRIPT TYPE="text/javascript"><!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) { 
    keycode = e.which;
  } else {
    return true;
  }
if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>
<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

ysequi

赞同来自:

用你给的例子:

<form>
<input type="text" name="field1" /><!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
如果您点击“上一页”,则只会提交“prev”的值。如果点击“下一页”,则只会提交“下一页”的值。 但是,如果您按下表格上的某个地方,则不会提交“上一个”和“下一个”。 所以使用伪代码,你可以做到以下几点:
If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

dab

赞同来自:

如果你真的只想让它像安装对话框一样工作,那么把焦点放在“下一步”按钮OnLoad上呢?这样,如果用户点击返回,表单提交并前进。如果他们想回去,他们可以按Tab键或点击按钮。

modit

赞同来自:

凯文,这不能用纯HTML完成。这个技巧你必须依靠JavaScript。 但是,如果您在HTML页面上放置两个表单,则可以执行此操作。 Form1将具有上一个按钮。 Form2将有任何用户输入+下一个按钮。 当用户在Form2中按下 Enter 时,下一个提交按钮将会触发。

tsint

赞同来自:

我希望这有帮助。我只是在float上按右边的按钮。 这种方式Prev按钮是Next按钮的左边,但Next在HTML代码中首先出现:

.f {
  float: right;
}
.clr {
  clear: both;
}
<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>
编辑:优点比其他建议:没有JavaScript,可访问,两个按钮仍然type="submit"

ut_et

赞同来自:

凯文, 这在大多数浏览器中没有javascript或CSS:

<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>
Firefox,Opera,Safari,Google Chrome都可以工作。
一如既往,IE是问题所在。 这个版本在javascript打开时工作:
<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>
所以这个解决方案的缺点是:
如果您使用Javascript关闭Javascript,则上一页不起作用。
请注意,后退按钮仍然有效!

miure

赞同来自:

它可以使用CSS 把它们放在标记中作为下一个按钮,然后是上一个按钮。 然后使用CSS来定位它们以出现您想要的方式

grem

赞同来自:

保持所有提交按钮的名称相同 - “prev”唯一的区别是具有唯一值的value属性。当我们创建脚本时,这些独特的值将帮助我们找出哪些提交按钮被按下。 并写下follwing编码:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

dmodi

赞同来自:

有时由@palotasb提供的解决方案是不够的。有一些用例,例如一个“过滤器”提交按钮被放置在像“Next and Previous”之类的按钮之上。我找到了一个解决方法:copy提交按钮,需要作为默认提交按钮在隐藏的div,并将其放置在任何其他提交按钮上方的形式。 从技术上讲,当按Enter键时,它会被另一个按钮提交,然后点击可见的Next按钮。但是既然名字和价值是一样的,结果就没有什么区别了。

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

qanimi

赞同来自:

改变标签顺序应该是完成这一切所需要的。把事情简单化。 另一个简单的选择是将后退按钮放在HTML代码中的提交按钮之后,但是将其向左浮动以使其在提交按钮之前出现在页面上。

oiusto

赞同来自:

这是我试过的: 你需要确保你给你的按钮不同的名字 2.编写一个if语句,如果任何一个按钮被点击,将执行所需的操作。

<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
在PHP中,
if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}
if(isset($_POST['next']))
{
header("Location: next.html");
die();
}

xquis

赞同来自:

如果你在一个页面上有多个活动按钮,那么你可以做这样的事情: 将您要触发的第一个按钮标记为窗体上的默认按钮 Enter keypress。对于第二个按钮将其关联到键盘上的 Backspace 按钮。 // Backspace eventcode是8。

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" 
         class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" 
         class="primary_button" />
</form>
<script type="text/javascript">
    $(document).on("keydown", function(event) {
        if (event.which.toString() == "8") {
            var findActiveElementsClosestForm = $(document.activeElement)
                                                    .closest("form");
if (findActiveElementsClosestForm && 
                findActiveElementsClosestForm.length) {
                $("form#" + findActiveElementsClosestForm[0].id 
                  + " .secondary_button").trigger("click");
            }
        }
    });
</script>
希望这可以帮助。

funde

赞同来自:

另一个简单的选择是将后退按钮放在HTML代码中的提交按钮之后,但是将其向左浮动以使其在提交按钮之前出现在页面上。 改变标签顺序应该是完成这一切所需要的。把事情简单化。

jneque

赞同来自:

来自https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

A form element's default button is the first submit button in tree order whose form owner is that form element. If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form)...
让下一个输入为type =“submit”并将之前的输入改为type =“button”应该给出所需的默认行为。
<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->
<input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

yut

赞同来自:

用JavaScript(这里是jQuery),你可以在提交表单之前禁用prev按钮。

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

wrerum

赞同来自:

我第一次遇到这个问题时,我提出了一个onclick()/ js黑客,当选择不是prev/next时,我仍然喜欢它的简单性。它是这样的:

@model myApp.Models.myModel
<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>
<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>
当任何一个提交按钮被点击时,它将把所需的操作存储在一个隐藏的字段中(这是一个与表单关联的模型中的字符串字段),并将表单提交给Controller,Controller将完成所有的决定。在控制器中,你只需写:
// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // do read logic
}
else if (myModel.Operation == "Write")
{
     // do write logic
}
else
{
     // do error logic
}
您也可以使用数字操作代码稍微收紧这个字符串以避免字符串解析,但除非您使用Enums,否则代码的可读性,可修改性和自我记录性较差,解析也是微不足道的。

tsint

赞同来自:

我遇到这个问题时,试图找到一个答案基本上是一样的事情,只有与asp.net控件,当我发现asp按钮有一个名为UseSubmitBehavior属性,允许您设置哪个提交。

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
以防万一有人正在寻找的asp.net按钮的方式来做到这一点。

nqui

赞同来自:

尝试这个..!

<form>
   <input type="text" name="Name" /> <!-- Enter the value -->
<input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>