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

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进入，那么默认的动作被抑制，按钮RecalculatePrice点击来代替。

如果用户按下ZipCode上的回车键，RecalculateShipping按钮被点击取而代之，情况也是如此。与Offercode输入和RecalculateOffercode按钮相同。

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

我还需要禁止输入键的默认操作，因为IE8并没有发送按钮提交值以及表单提交，所以让我们完全禁用它以避免混淆。

我该如何找到一个统一的解决方案？只要我能理解解决方案模式，就可以使用多个javascript函数，因为使用多个提交按钮的表单和用户可以在任何输入字段上按回车让我感到困惑。欢迎使用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是您的特殊场景。虽然你当然可以赶上ENTER键，调用不同的动作，主要存在两个原因，我不觉得这是这里的最佳解决方案：

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

我建议你做不同的形式，和使用不同的动作，而不是检查哪个按钮被点击通过检查按钮的名称参数。

点击CheckOut按钮，该按钮永远不会被回车键触发，您应该提交所有表单。可以序列的组合值并将其张贴，像这样：

$('#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> 

将输入类型更改为按钮。

Answer 4

我觉得这种方法很容易处理进入关键的问题：d

var clickedByButton = false; 
 
function check(val){ 
 
\t if(clickedByButton){return true;} //check for button click 
 
\t return false; 
 
} 
 
function clicker(val){ 
 
\t clickedByButton = true; 
 
\t switch(val.value){ 
 
\t \t case "Recalculate Price" : console.log('1');/*things to do on 1st button*/ break; 
 
\t \t case "Recalculate Shipping" : console.log('2');/*things to do on 2nd button*/ break; 
 
\t \t case "Recalculate Discount" : console.log('3');/*things to do on 3rd button*/ break; 
 
\t \t case "CheckOut" : /*things to do on 4th button*/ break; 
 
\t } 
 
}

<form action="destination.jsp" onsubmit="return check(this);" 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" onclick="clicker(this);" id="class1"/> 
 
    <input type="text" name="ZipCode" class="class2"/> 
 
    <input type="submit" name="RecalculateShipping" onclick="clicker(this);" value="Recalculate Shipping" id="class2"/> 
 
    <br><br> 
 
    <input type="text" name="Offercode" class="class3"/> 
 
    <input type="submit" name="RecalculateDisc" onclick="clicker(this);" value="Recalculate Discount" id="class3"/> 
 

 
    <input type="submit" onclick="clicker(tihs);" name="CheckOut"/> 
 

 
</form>