HTML表单中的多个提交按钮

假设您以HTML表单创建向导。一键向后退,一键向前。当您按下时由于后退按钮首先出现在标记中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这样,当您按下Enter向导,向导将移至下一页,而不是上一页。您是否必须使用tabindex此功能?

逆天泡芙神无2020/04/03 10:24:57

您可以Tabindex用来解决此问题。同样,更改按钮的顺序将是更有效的方法。

更改按钮的顺序并添加float值以将它们分配给想要在HTML视图中显示的所需位置

村村2020/04/03 10:24:57

使用您给出的示例:

<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>

如果单击“上一页”,则只会提交“上一页”的值。如果单击“下一页”,则只会提交“下一个”的值。

但是,如果您Enter在表单上的某处,则“ prev”和“ next”都不会提交。

因此,使用伪代码可以执行以下操作:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
伽罗2020/04/03 10:24:57

尝试这个..!

<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>

Mandy2020/04/03 10:24:57

当我发现ASP按钮具有一个名为的属性UseSubmitBehavior该属性允许您设置要提交的内容时,我仅在ASP.NET控件中尝试找到基本相同的答案时遇到了这个问题

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

以防万一有人在寻找使用ASP.NET按钮的方法。

Gil2020/04/03 10:24:57

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

表单元素的默认按钮是树形顺序中的第一个提交按钮,其表单所有者是该表单元素。

如果用户代理支持让用户隐式提交表单(例如,在某些平台上,当文本字段被隐式聚焦时,按下“ enter”键则提交表单)...

将下一个输入设为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>
宝儿理查德2020/04/03 10:24:57

更改制表符顺序应该是完成此操作的全部方法。把事情简单化。

另一个简单的选择是将后退按钮放在HTML代码中的“提交”按钮之后,但将其浮动到左侧,以便它出现在页面上的“提交”按钮之前。

小卤蛋2020/04/03 10:24:57
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

保持所有提交按钮的名称相同-“ prev”。

唯一的区别是value具有唯一值属性。创建脚本时,这些唯一值将帮助我们确定按下了哪个提交按钮。

并编写以下代码:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
老丝阿飞2020/04/03 10:24:57

另一个简单的选择是将后退按钮放在HTML代码中的“提交”按钮之后,但将其浮动到左侧,以便它在页面上出现在“提交”按钮之前。

更改制表符顺序应该是完成此操作的全部方法。把事情简单化。

樱小胖Mandy2020/04/03 10:24:57

纯HTML不能做到这一点。您必须依靠JavaScript才能实现此技巧。

但是,如果在HTML页面上放置两个表单,则可以执行此操作。

Form1将具有上一个按钮。

Form2将具有任何用户输入+下一个按钮。

当用户按下EnterForm2时,将触发“下一步提交”按钮。

2020/04/03 10:24:57

我将使用JavaScript提交表单。该函数将由form元素的OnKeyPress事件触发,并将检测是否Enter选择键。如果是这种情况,它将提交表格。

这里有两个页面,就如何做到这一点技巧:12基于这些,这里是用法示例(基于此处):

<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)" />
LGil2020/04/03 10:24:57

您可以使用CSS来实现。

首先将按钮放入标记中Next,然后再将Prev按钮放置

然后使用CSS定位它们,使其以您想要的方式显示。

小卤蛋2020/04/03 10:24:57

如果默认情况下使用第一个按钮的事实在浏览器之间是一致的,请在源代码中以正确的方式放置它们,然后使用CSS切换它们的明显位置。

float 例如,它们可以左右移动以在视觉上切换它们。

LGil2020/04/03 10:24:56

有时@palotasb提供的解决方案是不够的。在某些情况下,例如,在“下一个和上一个”之类的按钮上方放置一个“过滤器”提交按钮。我发现了一种解决方法:需要充当默认提交按钮的提交按钮复制到一个隐藏的div中,然后将其放在表单中的任何其他提交按钮上方。从技术上讲,与按可见的“下一个”按钮时相比,按“ Enter”时将由不同的按钮提交。但是,由于名称和值相同,因此结果没有差异。

<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>
伽罗理查德2020/04/03 10:24:56

将以前的按钮类型更改为这样的按钮:

<input type="button" name="prev" value="Previous Page" />

现在,“ 下一步”按钮将成为默认按钮,此外,您还可以default向其中添加属性,以便浏览器将其突出显示,如下所示:

<input type="submit" name="next" value="Next Page" default />
Sam梅小胖2020/04/03 10:24:56

如果您真的只是希望它像安装对话框一样工作,则只需将焦点放在“下一步”按钮OnLoad上即可。

这样,如果用户点击Return,则表单将提交并继续前进。如果他们想返回,可以点击Tab或单击按钮。