Submitting a form with ajax while staying on sign up page

Question

I am new to AJAX.

I am trying to submit a form with ajax using the following logic:

//validate form

//if invalid never submit
//if valid, ajax request to get msg
   //get success html if no server side errors exist. Replace sign up page with success html
   //get fail message if server side errors exist, so the user can correct them (ex. invalid credit card no)

My AJAX:

$("form").submit(function(e){
   if($(this).valid()) {

      $.ajax({
        url: 'formAction.php',
        type: 'POST',
        success: function(data){
           /*convert php variables to JavaScript ones*/
            if(success==true){
                 //relpace current page with confirmation
            }
            if(success==false){
                 //print out errors and allow user to re-submit
            }
        }                        
    });         

    }
    e.preventDefault;
});

I was wondering if I am on the right track with this implementation? or if this implementation is even possible?

I greatly appreciate any advice in making this implementation work.

Many thanks in advance!

You are on the right track, but you need to get your form data in to a javascript variable to use with you [`$.post`](http://api.jquery.com/jQuery.post/) and add `data: myFormData` — Jon, Apr 07 '13 at 18:15

Kevin Bowersox · Accepted Answer · 2013-04-07T18:44:15.367

3

$("form").submit(function(e){
   if($(this).valid()) {

      $.ajax({
        url: 'formAction.php',
        data: $(this).serialize(), //You need to provide this, serialize may work here
        type: 'POST', //Added single quote to prevent unterminated string literal
        success: function(data){
           //call was successful since success message was called
        },//Don't forget closing curly brace on function
        error: function(data){
           //Specify a call back for errors
        }                        
    });         

    }
    e.preventDefault;
});

edited Apr 07 '13 at 18:44

answered Apr 07 '13 at 18:15

Kevin Bowersox

93,289
19
159
189

Thanks for the reply. Does this method get all the form data automatically or do I need to get it somehow using `data` in my ajax call or something? I would like to have access to my form vars in my action script using standard `$_POST` vars.... – AnchovyLegend Apr 07 '13 at 18:17
You still need to get the form data. – Jon Apr 07 '13 at 18:18
@MiGusta You need to add data – Kevin Bowersox Apr 07 '13 at 18:18
Can I just add it like `data: myForm` <- does myForm have to be an ID? – AnchovyLegend Apr 07 '13 at 18:19
Last question, shouldn't e.preventDefault() prevent the default operation which is form submission, so `return false` would be unnecessary? – AnchovyLegend Apr 07 '13 at 18:32
Your right go with e.preventDefault() http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Kevin Bowersox Apr 07 '13 at 18:43

Submitting a form with ajax while staying on sign up page

1 Answers1