Problem with form submit jquery ajax

Question

I have a code like this.

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

My ajax response will be either success or failure. I can alert and check my ajax response. Now, i have problem with form submit.

I am getting this below error: document.myform.submit is not a function

How to force or make my form submit if the response is success. Could you help me on this.

Thanks - Haan

Quentin · Accepted Answer · 2011-05-31 09:07:41Z

2

You have an input named submit. This causes the function that is originally the value of theForm.submit to be replaced with a reference to that HTMLElementNode.

Rename the input.

(Or hack round it with document.createElement('form').submit.call(theForm);)

answered May 31, 2011 at 9:07

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emyr · Accepted Answer · 2011-05-31 09:07:55Z

1

document.myform.submit is finding the control called "submit" within the form called "myform". Rename your button and see if the standard submit() function comes back.

answered May 31, 2011 at 9:07

Emyr

2,38118 silver badges39 bronze badges

Comments

lonesomeday · Accepted Answer · 2011-05-31 09:12:29Z

This will be much easier if you use jQuery to do the binding, rather than doing an inline JS call:

$('#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");
                }
            }
        });
    }
});

With all that said, the main problem is name="submit". You should not give form elements names that override methods or properties of forms, e.g. submit, method, action. The default property/method will be obscured. From MDC docs

If a form control (such as a submit button) has a name or id of submit it will mask the form's submit method.

Abdul Kader · Accepted Answer · 2011-05-31 09:07:16Z

0

You can do some thing like this.

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

answered May 31, 2011 at 9:07

Abdul Kader

5,8324 gold badges25 silver badges41 bronze badges

1 Comment

Quentin Over a year ago

No, you'll get the same problem.

Reporter · Accepted Answer · 2011-05-31 09:08:42Z

-1

As I can see you uses Jquery, so $("#myfom").submit() should work.

answered May 31, 2011 at 9:08

Reporter

3,9345 gold badges36 silver badges50 bronze badges

1 Comment

Quentin Over a year ago

No, it shouldn't. jQuery doesn't work around things named submit clobbering the submit method.

Gabriel Spiteri · Accepted Answer · 2011-05-31 09:11:55Z

-1

You can use jQuery to trigger the submission of the form like so:

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

answered May 31, 2011 at 9:11

Gabriel Spiteri

4,98812 gold badges47 silver badges61 bronze badges

2 Comments

Quentin Over a year ago

No you can't, not when there is an input named submit in it.

Gabriel Spiteri Over a year ago

fair enough didn't spot that one ... the code indentation wasn't very helpful hehe

Collectives™ on Stack Overflow

Problem with form submit jquery ajax

6 Answers 6

Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related