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

我认为CheckOut是你的特殊情况。虽然您当然可以捕获回车键并调用不同的操作，但主要有两个原因导致我无法在此找到最佳解决方案：

您的IE8关注似乎否定了之前的整个讨论，在我看来，这应该建议您从另一个方向看。不要为IE8做一个特殊的解决方案，做一些所有支持的浏览器都能理解的东西。
没有CheckOut应该是输入的默认操作的字段。

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

点击CheckOut按钮（不应该由回车键触发），您应该提交所有表格。您可以序列化它们的组合值并将它们发布如下：

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

Answer 2

您可以使用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 3

我为每个提交按钮（添加了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 4

我认为这种方法很容易处理回车键问题：D

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

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

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

4 个答案: