jquery form submit using ajax

Question

I want to submit my form using ajax.

Below is my code:

$("#loginForm").submit(function() {
var url = <url>;
$.ajax({
       type: "POST",
       url: url,
       data: $("#loginForm").serialize(), // serializes the form's elements.
       success: function(data)
       {
            if(data == '0'){ 
                    $("#loginErr").show();
                    return false;
            }
            else if(data == '1')
                    return true;
       }
     });
  return false;
});

I want to get my form submitted if ajax response is 1. but irrespective of data value, form is not getting submitted. Its always getting return value false. I have checked it reaches to else if condition, but execution is not stopped on return.

How can I submit my form? I want to refresh my page.

AJAX is async btw you cannot return value from success callback function — A. Wolff
– A. Wolff, Commented Jun 27, 2013 at 12:38
Your url variable is an actual URL in your real code, correct? — pmandell
– pmandell, Commented Jun 27, 2013 at 12:38
@Aijaz, I have checked, it reaches to else if condition, but execution is not stopped. — Tanu Gupta
– Tanu Gupta, Commented Jun 27, 2013 at 12:41

A. Wolff · Accepted Answer · 2013-06-27 12:44:50Z

1

Use that:

$("#loginForm").submit(function (event) {
    var url = < url > ;
    $.ajax({
        type: "POST",
        url: url,
        context:this, //setting context on form
        data: $("#loginForm").serialize(), // serializes the form's elements.
        success: function (data) {
            if (data == '0') $("#loginErr").show();    
            else if (data == '1') this.submit();//use js submit event, not jq. We need to manually submit it now that we know its successful
        }
    });
    event.preventDefault(); //Stop the form submitting straight away
});

edited Jun 27, 2013 at 12:44

answered Jun 27, 2013 at 12:40

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

6 Comments

A. Wolff Over a year ago

check if condition if (data == '1') is meet

A. Wolff Over a year ago

what give you: console.log(this) inside this condition?

Tanu Gupta Over a year ago

It says that its a form object

A. Wolff Over a year ago

And removing this submit handler $("#loginForm").submit(...), is your form submitted? What if you try $(this).off('submit').submit()?

Tanu Gupta Over a year ago

Pls ignore my previous comment, It gives: Object { url=<url>, type="POST", more...}

|

seedhom · Accepted Answer · 2013-06-27 12:50:18Z

0

I am not sure which data you would like checked. But if this data comes from the form itself, then you need to check it before ajax call. Once you make the ajax post call, your form is already submitted.

 $("#loginForm").submit(function(e) 
 {

 var url = <url>;
 e.preventDefault();
 mydata = $("#loginForm").serialize();
 //Your check here
 if(mydata == '0')
 { 
      $("#loginErr").show();
      return false;
 }

 $.ajax({
   type: "POST",
   url: url,
   data: mydata,
   success: function(response)
   {
        //this is your post response processor
   }
 });
 return false;
 });

answered Jun 27, 2013 at 12:50

seedhom

3492 gold badges6 silver badges19 bronze badges

Comments

Tanu Gupta · Accepted Answer · 2013-06-28 05:21:31Z

0

As I wanted to refresh my page, I did want synchronous request. Setting async false solved the issue. I am able to get ret value outside Ajax object as it is requested synchronously.

$("#loginForm").submit(function() {
var url = <url>;
var ret = false;
$.ajax({
       async: false,
       type: "POST",
       url: url,
       data: $("#loginForm").serialize(), // serializes the form's elements.
       success: function(data)
       {
           //alert(data); // show response from the php script.
            if(data == '1')
                    ret = true;
            else if(data == '0')
                    $("#loginErr").show();
       }
     });
     return ret;
});

answered Jun 28, 2013 at 5:21

Tanu Gupta

6121 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

jquery form submit using ajax

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related