jQuery - 表单不会使用jQuery提交

Further to my problem here - jQuery on submit validation, with modal dialog at the end?

继续我的问题 - jQuery提交验证，最后是模态对话框？

It seems like the form simply will not submit using jQuery. Here's my code at a very simplified level:

似乎表单根本不会使用jQuery提交。这是我非常简化的代码：

<script type="text/javascript">

     $(document).ready(function(){
        $(document).click(function() {
            $('#inputform').submit();
        });

        $("#inputform").submit(function() {
            alert('test');
            return true;
        });
    });
</script>

<form method="POST" action="<?php echo CURRENT_PAGE ?>" id="inputform">

<button type="submit" name="submit" id="submit">Submit form</button>

</form>

Clicking on the body displays the 'test' alert but doesn't submit the form. Also, upon closing the alert box, it won't re-appear when you click again.

单击正文显示“测试”警报但不提交表单。此外，关闭警告框后，再次单击时不会再次出现。

Simply clicking on the submit button itself displays the alert then submits the form as expected.

只需单击提交按钮本身即可显示警报，然后按预期提交表单。

Sorry for what is (I know) a really stupid question, but I'm at a loss here. TY!

对不起（我知道）一个非常愚蠢的问题，但我在这里不知所措。 TY！

1 个解决方案

#1

The problem is that you've given your submit button the name "submit". Change it to just about anything else and it'll work. (Also change the id, best to keep them the same, not least because of some browser issues.)

问题是您已将提交按钮命名为“提交”。把它改成其他任何东西，它都会起作用。（还要更改id，最好保持它们相同，尤其是因为某些浏览器问题。）

Why: Form elements have a property called submit which is the function you can call to submit them. (jQuery uses this under the covers when you call submit on the jQuery instance.) But Form elements also receive properties for each of the fields in the form, using the field's name, and so if you have a field called "submit", it overrides the submit function, which means you can't submit the form programmatically.

原因：表单元素有一个名为submit的属性，您可以调用它来提交它们。（当你在jQuery实例上调用submit时，jQuery使用它。）但是Form元素也使用字段的名称接收表单中每个字段的属性，所以如果你有一个名为“submit”的字段，那么覆盖提交功能，这意味着您无法以编程方式提交表单。

Working example: Live copy | Live source

工作示例：实时复制|直播源

<script type="text/javascript">

     $(document).ready(function(){
        $(document).click(function() {
            $('#inputform').submit();
        });

        $("#inputform").submit(function() {
            alert('test');
            return true;
        });
    });
</script>

<form method="GET" action="http://jsbin.com/uwuzon" id="inputform">
<input type="text" name="foo" value="bar">
<button type="submit" name="someOtherName" id="someOtherName">Submit form</button>
</form>

(The significant change is the name="someOtherName" id="someOtherName" part. The other changes [changing the form's action and method] are just so it works on JSbin.)

（重大变化是name =“someOtherName”id =“someOtherName”部分。其他更改[更改表单的操作和方法]只是因此它适用于JSbin。）

Side note: You don't have to return true; in your submit event handler to allow the form submission. You just have to not return false;. :-)

旁注：你不必返回true;在您的提交事件处理程序中，以允许表单提交。你只需要不要返回false; :-)

#1