jQuery - 表单不会使用jQuery提交 [英] jQuery - form won't submit using jQuery

问题描述

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

好像表单不会使用jQuery提交。这里是我的代码在一个非常简化的级别：

 < script type =text / javascript> 
 $ b $（document）.ready（function（）{
 $（document）.click（function（）{
 $（'＃inputform'）。submit（）; 
 
 
 $（＃inputform）。submit（function（）{
 alert（'test'）; 
 return true; 
}）; 
}）; 
< / script> 
 
< form method =POSTaction =<？php echo CURRENT_PAGE？> ID = inputform > 
 
< button type =submitname =submitid =submit>提交表单< / button> 
 
< / form> 
  

点击正文会显示'测试'提醒，但不会提交表单。此外，在关闭警告框时，当您再次点击时它不会再次出现。

只需单击提交按钮本身就会显示警报，然后将表单提交为预计。

对不起，我知道这是一个非常愚蠢的问题，但我在这里很茫然。 TY！

解决方案

问题在于您已将提交按钮命名为submit。将它改为其他任何东西，它都可以工作。 （还要更改 id ，最好让它们保持一致，尤其是因为一些浏览器问题。）

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

工作示例：直播副本 | 直播源

 < script type =text / javascript> 
 $ b $（document）.ready（function（）{
 $（document）.click（function（）{
 $（'＃inputform'）。submit（）; 
 
 
 $（＃inputform）。submit（function（）{
 alert（'test'）; 
 return true; 
}）; 
}）; 
< / script> 
 
< form method =GETaction =http://jsbin.com/uwuzonid =inputform> 
< input type =textname =foovalue =bar> 
< button type =submitname =someOtherNameid =someOtherName>提交表单< / button> 
< / form> 
  

（显着变化是 name =someOtherNameid =someOtherName 部分。其他更改[改变表单的动作和方法]就是这样，它适用于JSbin。）

注意：在你的提交事件处理程序中不必 return true; 以允许表单提交。你只需要 返回false; 。 ： - ）

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

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

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

解决方案

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

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.

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

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;. :-)

这篇关于jQuery - 表单不会使用jQuery提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！