The form is not submitted inside the $ .ajax success function

Question

I check for duplicate names using jquery + Ajax. Everything works fine except that the form is not submitted after everything returns true

What's happening

• If no name is entered, a warning window appears indicating that the name is required → No problem here
• If a duplicate name is found, a warning window appears indicating the name already exists, and the form is not submitted → No problem here.
• If the duplicate name is not found, a warning window appears (to confirm else part of the condition works), but the form cannot be submitted . I want the form to continue and go to this else part

JQuery code

 $('#form1').submit(function(){ var name = $('#shelf_name').val(); if(name == '') { alert('Shelf name is required'); $('#shelf_name').focus(); } else { $.ajax({ type:'post', url:'check-duplicate-shelf-name.php', data:{'name':name}, context:this, success:function(data) { if(data == 'stop') { alert('Shelf name already exists'); // working if duplicate name is found } else { alert('else working?'); // alert box is showing up if name is not duplicate this.submit(); // but after alert, this line not executing } } }); } return false; }); 

HTML form tag

 <form action="add-shelf-post.php" method="post" id="form1"> 

check-duplicate-shelf-name.php page

 <?php include 'confignew.php'; $name = $_POST['name']; // peforming database operations . . . // and then if($db->num_rows($q) == 0) { echo 'go'; } else { echo 'stop'; } 

I am missing something very obvious. Hope someone here can point this out.

After checking with Firebug in Firefox, I really have an error. It did not appear when I tested Chrome. Here is a screenshot.

Answer 1

I tested your code and it works in Chrome, IE 8 and Mozilla Firefox. Check to see if your page has an entire element containing the name attribute send value in it. If you rename it. For example, an input tag like this: <input type="submit" name="submit" value="Submit Form"/> will result in an error in your Firebug Mozilla.

Further below you can find an alternative solution.

The following solution has been successfully tested in Chrome, IE 8, and Mozilla Firefox.

Alternative solution

Get the URL and the data you want to publish and write to the success callback.

The following implementation was successful in Chrome, IE 8, and Mozilla Firefox . In the success callback, the data to be published is retrieved and sent to the URL, and the result is placed in a div with the result id. You can change it to fit your needs.

 $(document).ready(function() { $('#form1').submit(function(){ var name = $('#shelf_name').val(); if(name == '') { alert('Shelf name is required'); $('#shelf_name').focus(); } else { $.ajax({ type:'post', url:'check-duplicate-shelf-name.php', data:{'name':name}, context:this, success:function(data) { if(data == 'stop') { alert('Shelf name already exists'); } else { alert('else working?'); //this.submit(); //$(this).submit(); // get the post url and the data to be posted var $form = $(this); shelfNameVal = $form.find( 'input[id="shelf_name"]' ).val(), url = $form.attr( 'action' ); // Send the form data and put the results in the result div $.post(url, { shelf_name: shelfNameVal }, function(data) { $( "#result" ).empty().append(data); } ); } } }); } return false; }); }); 

Hope this helps.

Answer 2

I would test it with a jQuery validator at runtime rather than submit, but another approach is to create a Rest Style call. I think there is no need for POST full form just check 1 field.

 $('#form1').submit(function(){ //Check not empty if(!$('#shelf_name').val()) { alert('Shelf name is required'); $('#shelf_name').focus(); } else { //Valiate Rest style call $.getJSON("check-duplicate-shelf-name.php/".concat($('#shelf_name').val()), function(data) { //If you only have 2 states I would return boolean to faster check ex: if(!data){ if(data == 'stop') { // working if duplicate name is found alert('Shelf name already exists'); } else { alert('else working?'); // alert box is showing up if name is not duplicate $('#form1').submit(); // but after alert, this line not executing } }); } return false; });​ 

When I said in the comments that you can publish your form manually without using $ (this) .submit (); I mean:

 $.ajax({ url: "./myurl", cache: false, type: "POST", data: $("#form1").serialize(), success: function(){ console.log("Submit successful"); } }); 

Answer 3

Performing remote form validation? Checkout the jquery.validate plugin and its .remote() rule.

Also, your code looks good. Here's a working demo: http://jsfiddle.net/dKUSb/7/

Answer 4

In this case, you can use callbacks . Just separate the code as shown below:

with a callback that will return the object {status: 'true or false', message: 'Some text'}

 function validity(callback){ var name = $('#shelf_name').val(); if(name == '') { return callback({status: false, message: 'Shelf name is required'}); } else { $.ajax({ type:'post', url:'check-duplicate-shelf-name.php', data:{'name':name}, context:this, success:function(data) { if(data == 'stop') { return callback({status: false, message: 'Shelf name already exists'}); } else { return callback({status: true, message: 'else working?'}); } } }); } //just for safety :)) return callback({status: false, message: 'something went wrong completely'}); }); 

This returns the result of an AJAX call. It will wait for AJAX to complete and return the corresponding branch result if ...

.. and now you can use it like this:

 $('#form1').submit(function(){ validity(function(result){ if (result.status) { //status is true return true; } else { alert(result.message); $('#shelf_name').focus(); return false; } }); }); 

... or just connect them like this:

 $('#form1').submit(function(){ // definition function validity(callback){ var name = $('#shelf_name').val(); if(name == '') { return callback({status: false, message: 'Shelf name is required'}); } else { $.ajax({ type:'post', url:'check-duplicate-shelf-name.php', data:{'name':name}, context:this, success:function(data) { if(data == 'stop') { return callback({status: false, message: 'Shelf name already exists'}); } else { return callback({status: true, message: 'else working?'}); } } }); } //just for safety :)) return callback({status: false, message: 'something went wrong completely'}); }); //usage validity(function(result){ if (result.status) { //status is true return true; } else { alert(result.message); $('#shelf_name').focus(); return false; } }); }); 

Hope this helps

Answer 5

instead of this.submit () write:

 document.yourFormName.method = "POST"; document.yourFormName.action = "Relative_URL_to_Go_to"; document.yourFormName.submit(); 

or if you do not know the name formName alternately, you can use:

 document.forms[0].method = "POST"; document.forms[0].action = "Relative_URL_to_Go_to"; document.forms[0].submit(); 

Answer 6

Completely due to the area

Where are you

 alert('else working?'); // alert box is showing up if name is not duplicate this.submit(); // but after alert, this line not executing 

this refers to the ajax object, not the form. This is because now it is inside another function.

Im adds $form = $(this); before calling ajax to declare a variable that you can use inside the callback.

Try the following:

 $('#form1').submit(function( e ){ e.peventDefault(); var name = $('#shelf_name').val(); if(name == '') { alert('Shelf name is required'); $('#shelf_name').focus(); } else { $form = $(this); $.ajax({ type:'post', url:'check-duplicate-shelf-name.php', data:{'name':name}, context:this, success:function(data) { if(data == 'stop') { alert('Shelf name already exists'); // working if duplicate name is found } else { alert('else working?'); // alert box is showing up if name is not duplicate $form.submit(); // but after alert, this line not executing } } }); } return false; }); 

UPDATE: Maybe yesterday I was completely out of the game. Try adding e.preventDefault (); just above the sending request. Also, add the variable e to the function definition (). Check out the updated code above.

Here is some documentation on preventDefault (): http://api.jquery.com/event.preventDefault/

Answer 7

Do not try to check a lot to get a simple button and add an onclick event in this case enter the code below

html code

 <input type="button" value="submit" onclick="formsubmit();"> 

javascript code

  function formsubmit() { var name = $('#shelf_name').val(); if (name == '') { alert('Shelf name is required'); $('#shelf_name').focus(); } else { $.ajax({ type: 'post', url: 'check-duplicate-shelf-name.php', data: { 'name': name }, context: this, success: function (data) { if (data == 'stop') { alert('Shelf name already exists'); // working if duplicate name is found } else { alert('else working?'); // alert box is showing up if name is not duplicate $('#form1').submit() } } }); } } 

Answer 8

The reason the form is not submitted is because you return false from the submit event handler, which does not mean that the action (submission) does not occur by default. Even if you call the submit() method, you are still in the submit event handler that returned false .

You might want to consider changing the server-side logic that handles submitting a form, and also checking for duplicates or attaching a duplicate check ajax message to the blur event of a text field or submit button, as suggested by @rajesh kakawat (except for attaching with jQuery , not an HTML attribute). Example:

 $('#form1').submit(function(){ var name = $('#shelf_name').val(); if(name == '') { alert('Shelf name is required'); $('#shelf_name').focus(); return false; } }); $('#shelf_name').on('blur', function () { var $this = $(this), name = $this.val(); if(name == '') { alert('Shelf name is required'); $this.focus(); return false; } $.ajax({ type:'post', url:'check-duplicate-shelf-name.php', data:{'name':name}, success:function(data) { if(data == 'stop') { alert('Shelf name already exists'); // working if duplicate name is found } else { alert('else working?'); // alert box is showing up if name is not duplicate $('#form1').submit(); // this should work now } } }); }); 

I am not sure why the line this.submit(); worked previously, since I don’t know enough about your application, script version, etc. You might want to use jsfiddle to post an example.

Answer 9

 $('#form1').submit(function(){ var name = $('#shelf_name').val(); if(name == '') { alert('Shelf name is required'); $('#shelf_name').focus(); } else { var istrue = false; $.ajax({ type:'post', url:'check-duplicate-shelf-name.php', data:{'name':name}, context:this, success:function(data) { if(data == 'stop') { alert('Shelf name already exists'); istrue = false; } else { alert('else working?') // alert box is showing up istrue = true; } } }); return istrue; } }); 

something like this :) cant test

Answer 10

We had the same problem and we decided that we figured it out.

The fact is that the .submit() action does not work inside the $.ajax or $.post . To do this, you need to add the async:false statement to the $.ajax block and submit the form when $.ajax completes.

Not tested, but this is a working idea:

HTML:

 <input type='submit' onClick='javascript:MyCheck(); return false;'> 

Javacript:

 function Mycheck() { var result = ""; $.ajax { async:false, url: you_url_here, timeout: 15000, success: function(data) { result="success"; }, error: function(request, status, err) { result="error"; } }; // Here, if success -> SUBMIT FORM or whatever // Only get here if "ASYNC" = FALSE!!! if (result == "success") { $("form").submit(); // this submits the form return; } else { alert('error'); // the form will not be post } } 

Answer 11

Enjoy the work.

 document.createElement('form').submit.call(document.formname);