Question

我对表单有一个不寻常的问题（这是一个精简的版本）：

<script>
    (function($){
        $("form").submit(function(){ 
            alert('Checkout time!'); 
        });
        $("button[name='process_order']").click(function(){ 
            alert('Button Checkout time!'); 
        });
        $("button[name='back']").click(function(){ 
            alert('Back Button'); 
        });
    })(jQuery);
</script>

<form>
    <input type="text" name="moo1" tabindex="1" />
    <input type="text" name="moo2" tabindex="2" />
    <button name="back" tabindex="4">Back</button>
    <button name="process_order" tabindex="3">Process Order</button>
</form>

按钮工作正常，但是，如果我在其中一个有焦点的文本框中按Enter键，“后退按钮”操作就会触发...即使表单的提交处理程序设置为“checkout”.. 。

Answer 1

你可能会改变process_order：

<input type="submit" name="process_order" value="Process Order" tabindex="3" />

改为：

<form id="myForm">

然后，将.submit（）处理程序绑定到它

$('#myForm').submit(function()
{
    alert('Button checkout time!');
    return false; //we return false so that it doesn't refresh the page
});

Answer 2

您的表单有两个提交按钮，表单将通过激活第一个提交按钮使用回车键提交。变化

<button name="back" tabindex="4">Back</button>

到

<button type="button" name="back" tabindex="4">Back</button>

避免浏览器将第一个按钮解释为提交按钮

按Enter键进入jQuery论坛提交

2 个答案: