表单提交jquery ajax的问题答案

【问题标题】：Problem with form submit jquery ajax表单提交jquery ajax的问题
【发布时间】：2011-05-31 09:04:08
【问题描述】：

我有这样的代码。

<html>
<head>
<title>Captcha With Refresh Feature</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

function check1(){ 
var search_val=$("#security_code").val(); 
if(search_val == ''){
alert("Please enter code");
return false;
}else{
$.ajax({
type: "POST",
url: "find.php",
data: "search_term="+search_val,
success: function(msg){

 if(msg == 'failure'){
 document.myform.submit();
 }else{
 alert("Please enter correct code");
 return false;
 }
 }
 });
 }
 return false;
}  
}
</script>
</head>
<body onLoad="new_captcha();">
<form action="check.php" method="post" name="myform" id="myform" onSubmit="return     check1()">
<table>
<tr>
<td>&nbsp;</td>
<td><img border="0" id="captcha" src="image.php" alt="">
&nbsp;<a href="JavaScript: new_captcha();"><img border="0" alt="" src="refresh.png"     align="bottom"></a></td></tr>
<tr><td>Name</td><td><input type="text" name="u_name" id="u_name" /></td></tr>
<tr>
<td>Security Code:</td>
<td><input type="text" name="security_code" id="security_code">
 &nbsp;</td><td><input type="submit" name="submit" value="Check"></td>&nbsp;<td><label id="security_code_error"></label><label id="security_code_error1"></label></td></tr>         </table>
</form>
 </body>
</html>

我的 ajax 响应要么成功，要么失败。我可以提醒并检查我的 ajax 响应。现在，我在提交表单时遇到问题。

我收到以下错误： document.myform.submit 不是函数

如果响应成功，如何强制或使我的表单提交。你能帮我解决这个问题吗？

谢谢 - 韩

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

您有一个名为submit 的输入。这会导致原来是 theForm.submit 值的函数被替换为对该 HTMLElementNode 的引用。

重命名输入。

（或使用document.createElement('form').submit.call(theForm); 破解它）

【讨论】：

【解决方案2】：

document.myform.submit 在名为“myform”的表单中找到名为“submit”的控件。重命名你的按钮，看看标准的 submit() 函数是否回来了。

【讨论】：

【解决方案3】：

如果您使用 jQuery 进行绑定，而不是进行内联 JS 调用，这将容易得多：

$('#myForm').submit(function() {
    var search_val = $("#security_code").val(),
        form = this;

    e.preventDefault();

    if (search_val == '') {
        alert("Please enter code");
    } else {
        $.ajax({
            type: "POST",
            url: "find.php",
            data: "search_term=" + search_val,
            success: function (msg) {
                if (msg == 'failure') {
                    form.submit();
                } else {
                    alert("Please enter correct code");
                }
            }
        });
    }
});

说了这么多，主要问题是name="submit"。您不应该给表单元素名称覆盖表单的方法或属性，例如submit、method、action。默认属性/方法将被隐藏。来自MDC docs

如果表单控件（例如提交按钮）具有提交的名称或 ID，它将屏蔽表单的提交方法。

【讨论】：

【解决方案4】：

你可以做这样的事情。

$('#myform').submit();

【讨论】：

不，你会遇到同样的问题。

【解决方案5】：

我可以看到你使用 Jquery，所以 $("#myfom").submit() 应该可以工作。

【讨论】：

不，不应该。 jQuery 无法解决名为 submit 破坏提交方法的事情。

【解决方案6】：

你可以像这样使用jQuery来触发表单的提交：

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

【讨论】：

不，你不能，当其中有一个名为 submit 的输入时。
还好没发现那个...代码缩进不是很有帮助嘿嘿