Load form via ajax then send form via Ajax?

Question

Ok I'm loading a form into a page via an ajax call like so:

    $('.ajax_click').on('click', function(event) {
  event.preventDefault();
  /* Act on the event */
  var getmsgtoload = $(this).find('.ajax_get_msg').attr('href');
  var getpelytoload = $(this).find('.ajax_get_reply').attr('href');  
  //get reply
  $.ajax({
    url: getpelytoload,
  }).done(function(data) {
    var getreply = $(data).find('#reply_div').html();
    $('#reply_div').replaceWith('<div id="reply_div">'+getreply+'</div>');
          //Process our send!
          $('#create').submit(function() { // catch the form's submit event
             $.ajax({ // create an AJAX call...
                    data: $(this).serialize(), // get the form data
                    type: $(this).attr('method'), // GET or POST
                    url: $(this).attr('action'), // the file to call
                })
                  .done(function(data){ // the file to call
                  console.log(data);
                      $('#created').html('<h1>Success</h1>'); // update the DIV
                  })
                  .fail(function(){
                    console.log('error on the from....');
                  });
              return false; // cancel original event to prevent form submitting
          });
  })
  .fail(function() {
    console.log("error");
  })
  .always(function() {
    console.log("complete");
  });
});

I'm trying to then send the data from the form via ajax aswell, but the data argument just returns the whole page instead of just the form. why? Chris Clarification The form will not "POST" data At all but it does work on the page I'm pulling the form in from it goes like so: I'm calling in a form into DIV A with an ajax call from page A into Page B in the ajax's Callback success fucntion I'm then running the ajax to send the form data via serialize but it will not send when the form is viewed on the page A it works fine but not when it's pulled into page B! Chris

what does `$(this).serialize()` output? When i have submitted data from a form via ajax i usually end up getting each field value and setting a varaible for each one. — Mickey Slater, Dec 22 '13 at 01:02
this might be helpful http://stackoverflow.com/questions/9557761/submit-form-via-ajax-in-jquery?rq=1 — Mickey Slater, Dec 22 '13 at 01:03
This serialize before the nested ajax outputs the data fine. data on the success outputs the whole page... — vimes1984, Dec 22 '13 at 01:13
@MickeySlater that does help to a degree but I am allready binding the handler on the success function of the first ajax.. — vimes1984, Dec 22 '13 at 01:20

score 1 · Accepted Answer · answered Dec 22 '13 at 01:21

1

Because in your "done" event handler you receive what the server responds with to your POST. In your case the server responds with a whole page.

answered Dec 22 '13 at 01:21

Hallvar Helleseth

1,867
15
17

now that makes sense... so how to i send it the method set on the form is POST and it works when on a standalone page.. – vimes1984 Dec 22 '13 at 01:23
Could you clearify your question further? I don't quite understand. – Hallvar Helleseth Dec 22 '13 at 01:24

Load form via ajax then send form via Ajax?

1 Answers1