CODEWITHSUNDEEP
phpjqueryajax
hjaffer2001
hjaffer2001

Reputation: 953

Problem with form submit jquery ajax

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

Upvotes: 0

Views: 668

Answers (6)

lonesomeday
lonesomeday

Reputation: 238065

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.

Upvotes: 1

Gabriel Spiteri
Gabriel Spiteri

Reputation: 4978

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

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

Upvotes: -1

Reporter
Reporter

Reputation: 3948

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

Upvotes: -1

Emyr
Emyr

Reputation: 2371

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.

Upvotes: 1

Quentin
Quentin

Reputation: 944443

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

Upvotes: 2

Abdul Kader
Abdul Kader

Reputation: 5842

You can do some thing like this.

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

Upvotes: 0

Related Questions