当我在不同的文本输入上按enter键时，如何使表单提交不同的按钮

How to make form submit different button when I press enter on different text input?

本文关键字：键时 何使 enter 按钮 表单提交 文本 输入      更新时间：2023-09-26

例如，我有这样的形式：

<form action="destination.jsp" method="POST">
    <input type="text" name="Productqty1"/>
    <input type="text" name="Productqty2"/>
    <input type="text" name="Productqty3"/>
    <input type="submit" name="RecalculatePrice" value="Recalculate Price"/>
    <input type="text" name="ZipCode"/>
    <input type="submit" name="RecalculateShipping" value="Recalculate Shipping"/>
    <input type="text" name="Offercode"/>
    <input type="submit" name="RecalculateDisc" value="Recalculate Discount"/>
    <input type="submit" name="CheckOut"/>
</form>

我需要的是，如果用户在Productqty1、Productqty2或Productqty3上按enter键，则默认操作将被取消，而是单击"重新计算价格"按钮。

如果用户在ZipCode上按enter键，则会单击"重新计算装运"按钮。与Offercode输入和"重新计算Offercode"按钮相同。

但是，如果用户按下"签出"按钮，则必须仍然提交整个表单。这就是为什么他们在同一个表单上，在同一表单上有多个提交按钮

我还需要取消回车键的默认操作，因为IE8没有在表单提交的同时发送按钮提交值，所以让我们完全禁用它以避免混淆。

如何找到统一的解决方案？如果必须在多个javascript函数中制作也没关系，只要我能理解解决方案模式，因为表单中有多个提交按钮，用户可以在任何输入字段上按enter键，这让我很困惑。欢迎JQuery解决方案。谢谢

编辑：很抱歉用词不当，导致混乱。我对抑制默认操作的意思是，当你按下回车键时，表单就会被提交，使用任何（随机？）按钮提交。这是我想要抑制的默认行为。

我为每个提交按钮（添加了id）和文本框（添加了类）添加了类和id。

试试这个

<form action="destination.jsp" method="POST">
    <input type="text" name="Productqty1" class="class1"/>
    <input type="text" name="Productqty2" class="class1"/>
    <input type="text" name="Productqty3" class="class1"/>
    <input type="submit" name="RecalculatePrice" value="Recalculate Price" id="class1"/>
    <input type="text" name="ZipCode"  class="class2"/>
    <input type="submit" name="RecalculateShipping" value="Recalculate Shipping" id="class2"/>
    <br><br>
    <input type="text" name="Offercode"  class="class3"/>
    <input type="submit" name="RecalculateDisc" value="Recalculate Discount" id="class3"/>
    <input type="submit" name="CheckOut"/>
</form>

编写脚本

$(document).ready(function () {
    $(".class1").keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $('#class1').click();
        }
    });
    $(".class2").keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $('#class2').click();
        }
    });
    $(".class3").keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $('#class3').click();
        }
    });
});

Fiddle演示

我认为CheckOut是您的特殊场景。虽然你当然可以抓住回车键并调用不同的操作，但我认为这不是最佳解决方案的主要原因有两个：

  1. 你对IE8的担忧似乎否定了之前的整个讨论，在我看来，这应该建议你换一个方向看。不要为IE8做特殊的解决方案，做一些所有受支持的浏览器都能理解的事情
  2. 没有任何字段应将CheckOut作为输入时的默认操作

我建议您制作不同的表单，和使用不同的操作，而不是通过检查按钮的名称参数来检查单击了哪个按钮。

点击"签出"按钮时，您应该提交所有表单，这永远不应该由回车键触发。您可以序列化它们的组合值，并像这样发布：

$('#product-form, #zip-form, #offer-form').serialize();

您可以在提交页面之前使用jquery/javascript函数更改表单操作。提交类型应将表单提交到默认表单操作，该操作已添加到表单声明中。

    <form action="destination.jsp" method="POST">
    <input type="text" name="Productqty1"/>
    <input type="text" name="Productqty2"/>
    <input type="text" name="Productqty3"/>
    <input type="button" name="RecalculatePrice" value="Recalculate Price"/ onClick="callDefault();">
    <input type="text" name="ZipCode"/>
    <input type="button" name="RecalculateShipping" value="Recalculate Shipping"/ onClick="callRecalculateShipping();">
    <input type="text" name="Offercode"/>
    <input type="button" name="RecalculateDisc" value="Recalculate Discount"/ onClick="callRecalculateDisc();">
    <input type="button" name="CheckOut"/ onClick="callCheckout();">
</form>
<javascript>
function callCheckout(){
form.action="<some value>";
form.submit();
}
...so on with other functions... 
</javascript>

将输入类型更改为按钮。

相关文章：