Ajax / JQuery 2次提交

Question

I am trying to write a page where there are 2 sets of forms submitted, one to search IMDB, and then the 2nd to submit the request from the returned results.

I have the pages working just fine with just regular old php. I am wanting to convert it over to ajax/jquery to make it have a better ux, when there are large searches and database calls. I am having issues with getting the 2nd Submit button to work. I have searched for quite a while and noticed some comments about not using event.preventDefault() because any button called there after would not work and to use return false; instead. I have tried multiple combinations, even tried having it load a 2nd set of code during the posting.done of the 1st one, all to no avail.

I am trying to really understand what is going on here and what the proper solution would be.

All of this sits inside a div #dynamic

The script:

// Attach a submit handler to the form
$( "#imdb_search" ).submit(function( event ) {
    // Stop form from submitting normally
    //event.preventDefault();

    // Get some values from elements on the page:
    var $form = $( this ),
        form_request = $form.find( "input[name='request']" ).val(),
        form_user = $form.find( "input[name='user']" ).val(),
        form_username = $form.find( "input[name='username']" ).val(),
        url = $form.attr( "action" );

    // Send the data using post
    var posting = $.post(url, { 
        request: form_request, 
        user: form_user, 
        username: form_username
    });

    // Put the results in a div
    posting.done(function(data) {
        // var content = $( data ).find( "#returned_result" );
        $("#dynamic").empty().append(data);
    });
    return false;
});

So I have tried this as well from one of the comments to no avail:

$( "#imdb_search" ).submit(function(){
    var $frm = $(this);
    $.ajax({
       url: $frm.attr( "action" ),
       dataType: 'html',
       type: 'POST',
       data: $frm.serialize(),
       success: function(r) {
          $("#dynamic").empty().html(r);
       },
       error: function(){
          //TODO: add error code
       }
    });
return false;
});

I have this script at the bottom of each of the new php pages that is loaded from the success return. Is that the correct place to have it for DOM? Both forms have the same id but submit different "inputs".

Answer 1

As I can get from your code you also overwrite html form when you get first result, if it is the case then you should use jquery "on" function

$(document).on("#imdb_search", "submit", function(){
var $frm = $(this);
$.ajax({
   url: 'your_post_url',
   dataType: 'html',
   type: 'POST',
   data: $frm.serialize(),
   success: function(r) {
      $("#dynamic").html(data);
   },
   error: function(){
      //TODO: add error code
   }
});
return false;
});

and be sure that you don't overwrite this code with other.