Reload DOM after injecting form elements?

Question

Hi,

I'm trying to put together some jQuery code that will add form elements (input checkboxes) to a form, once the user performs a certain action. Later on the user can then submit this form.

I'm entirely new to jQuery, but I've managed to put together some code that almost works. Here's what I've got:

$("#someDivID").load("myPage.asp?id=x");

myPage.asp generates some form elements, and this all shows up nicely on the page.

However, once I submit (through POST) the form, the new form elements are not actually posted. Here's the form submit function:

$(document).ready(function() {

    var options = {};

    // bind to the form's submit event
    $('#MyFormID').submit(function() {
      $(this).ajaxSubmit(options);
      return false;
    });
});

You'll have to excuse me if I'm totally wrong on this, but I'm guessing it's because the new form elements are generated after the DOM is loaded initially. Do I have to reload the DOM (and if so how?), or should I be doing the whole thing differently?

Best regards, Adam

Answer 1

It's not a question of adding more elements to the form.

You need to make sure that the input elements (be it checkboxes or whatever) are appended (loaded in your case) to either the form element itself or a child element of the form. Moreover did you check the input's name attribute? Without a name the input won't get posted.

BTW: What does ajaxSubmit do?

Answer 2

Install Firebug and see where the input elements are being placed in the document. If they're not inside the form block, they won't be submitted. (And as aefxx says, if they're not given names they won't appear in the HTTP request.)

Answer 3

Most probably your problem is that the "someDivID" element is not a child / descendant of "MyFormID", and therefore, is not posted.

Make sure that the div in which you load the form controls is placed within the form.

If this doesn't help, please, consider posting the relevant piece of your HTML for further assitance.