0

Tearing my hair out over this. I have a 40 rows of simple forms that are being generated dynamically from a mysql database. Each form has a unique ID based on the database ID. After clicking submit the results get updated in the database and inserted into the div (#result).

Works the first time perfectly. However after the first time the script won't serialize the updated form data. The ID is fine (checked via alert) but the formData is empty (also checked via alert).

Thinking I need to re-target the form somehow? Any help would be greatly appreciated. Thanks.

$('#result').on('click', '.submitform', function () {
    var id = $(this).attr('id');
    var formData = $('#'+id+'-form').serialize();
    $.ajax({
        type: "POST",
        url: "ajax-process-form.php",
        data: formData,
        cache: false,
        success: function(server_response){
            $("#result").html(server_response).show();
        }
    });
    return false;
});
Brent Washburne
  • 11,417
  • 4
  • 51
  • 70
Ron Chan
  • 1
  • 2
  • What is ".submitform" element? Show us your HTML. If it's a submit button, it's likely, that it's id doesn't match the form id. – user4035 Jul 13 '15 at 23:23
  • Try to use this [answer](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form/28386477#28386477) – Shaiful Islam Jul 13 '15 at 23:23
  • 1
    Show what `server_response` looks like, as you are overwriting `#result` content with it in `$("#result").html(server_response).show();`. Does `server_response` have a valid `.submitform` with an `id` that is valid as well? – Sean Jul 13 '15 at 23:30
  • Yes, each form has an ID. I am using a php include for the initial view and for the insertion so the form is exactly the same. Here is the HTML. A little janky because of the table but don't think it's the structure since it worked initially. – Ron Chan Jul 14 '15 at 00:12
  • `
    ...
    `     – Ron Chan Jul 14 '15 at 00:14
  • Sorry - can't paste the whole HTML - not used to this comment interface. But I think you can see that the code is there for it to work (supposedly) – Ron Chan Jul 14 '15 at 00:16
  • Sorry Shaiful - did not work. – Ron Chan Jul 14 '15 at 00:28

2 Answers2

0

Just reasoning... I might be wrong...

This code

$('#result').on('click', '.submitform'

binds to the click event on result and filters .submitform, then executes with this being the .submitform

when the success comes from the server, you are rewriting #result

$("#result").html(server_response)

if server_response does not contain a .submitform then next calls to the first onclick event will not execute because .submitform does not exist anymore inside #result

If this is the error, then to solve, use another div to show the result instead of #result or bind click to another separated, not contained within div

jperelli
  • 6,382
  • 4
  • 43
  • 82
  • But the button actually does work (as it does return the ID of the button via alert) but the script does not seem to see the form ID. But, if I was to re-initialize the .submitform button how would I do that? I thought using .on did that? Thanks. – Ron Chan Jul 14 '15 at 00:28
  • Ok, you are right then... Is it `$('#'+id+'-form')` inside `#result`? – jperelli Jul 14 '15 at 00:29
  • Yes. The ID reads fine and I can actually return the form ID but it doesn't seem to want to get the form data itself. Do I have to add '$("#result").' to the start of the form? My syntax understanding kinda sucks. – Ron Chan Jul 14 '15 at 00:39
0

Arrgh - it was the structure after all. Although it worked the first time the table structure prevented it from working a second time. I have no idea why ... but there you go. Thanks for the help!

Ron Chan
  • 1
  • 2