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

Question

例如，我有这个表格：

<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，则默认操作被禁止，而是单击 RecalculatePrice 按钮。

如果用户在 ZipCode 上按 Enter 键，同样会点击 RecalculateShipping 按钮。与 Offercode 输入和 RecalculateOffercode 按钮相同。

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

我还需要抑制回车键的默认动作，因为IE8没有将按钮提交值与表单提交一起发送，所以我们完全禁用它以避免混淆。

我怎样才能找到一个统一的解决方案？如果它必须在多个javascript函数中制作，只要我能理解解决方案模式就可以了，因为带有多个提交按钮的表单和用户可以在任何输入字段上按Enter键让我感到困惑。欢迎使用 JQuery 解决方案。谢谢。

编辑：对于导致混淆的单词选择不当感到抱歉。我对抑制默认操作的意思是，当您按下回车键时，表单会被提交，使用任何（随机？）按钮提交。这是我要禁止的默认行为。

Answer 1

我为每个提交按钮（添加的 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();
        }
    });
});

小提琴Demo

Answer 2

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

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

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

在单击 CheckOut 按钮时，不应由 enter 键触发，您应该提交所有表单。您可以序列化它们的组合值并像这样发布它们：

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

Answer 3

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

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

将输入类型更改为按钮。