Question

<form id="formReg" action="reg.php" method="post">
. . . 
<button id="sub">Register</button>
</form>

这有效，但我想在窗体标记之外放置按钮#sub，并使用jquery运行表单处理：

$("#sub").click( function() {
    $.post( $("#formReg").attr("action")),
    $("#formReg :input").serializeArray();      
});

它不起作用。它有可能吗？

Answer 1

为什么不把按钮放在外面（正如你所说的那样）并且只打电话：

$("#formReg").submit();

btw：你应该用它来绑定事件

$("#sub").on("click", function(){
... your code ...
});

Answer 2

嗯，它可能不起作用，因为表单提交取消了对任何其他事件侦听器的调用。你应该做这样的表格处理：

$("#formReg").on('submit', function() {
    // process form
    // You can even stop the form submission here,
    // just return 'false' and it will stop.
    // That's very useful for form validation etc.
});

如果您需要该按钮来提交表单，您可以这样做：

$("#sub").on('click', function() {
    $("#sub").submit(); // This will submit the form AND call the event listener. Nice, eh?
});

只要按钮在页面上，这应该可以正常工作。

修改
谢谢，fibreFoX，让我记住了.click()和.submit()的弃用！

编辑2：
Musa是对的，你错误地使用了$.post()。但是，如果用户通过表单提交抛出页面，我不知道AJAX请求是否实际完成。如果您不希望用户转到提交表单的页面，则应该从提交侦听器返回false。

Answer 3

如果您尝试通过ajax发布表单，则错误地使用了$.post

$("#sub").click( function() {
    $.post($("#formReg").attr("action"), $("#formReg").serialize());    
});

Answer 4

试试这个

$("#sub").click( function() {
    $.post( $("#formReg").attr("action"), $("#formReg").serialize());
});

注意我在serialize方法后删除了分号，并在表单元素上调用了serialize（）。这是你想用Ajax做的。

如果您只想提交表单，请使用此

$("#sub").click( function() {
    $("#formReg").submit();      
});

如何使用jquery运行表单处理？

4 个答案: