Form is missing elements on submit after ajax td replace.

Question

I have a school district drop down with an onchange event tied to it. When it changes, then I do an ajax call to get a list of schools that are in that district. The html on the ajax page has checkboxes for each school so someone could be assigned to multiple schools under a single district. The ajax works fine and I modify the html of a td element with a specific id and the school names and their checkboxes appear correctly. I check a few of them and then submit the form, but to my dismay none of the input tags (checkboxes) that I added with the ajax come across in the form. I've checked some of them so the form field shouldn't come across empty in the submit.

I used $('#formID').serialize(); to check if the form has the inputs, but it says it doesn't. Then I use $('input[name=SchoolID]').each(function(){alert(this.value);}) to print out the values of the checkboxes and that does work.

Am I missing something here? Do I need to reload the form somehow to include the new input fields? Why aren't my input fields coming across in the form submit?

function getSchools(userID){
var districtID = $('#DistrictID').val();
$.get('ajax/ajaxSchools.cfm',
    {
        UserID: userID,
        DistrictID: districtID
    },
    function(data){
        var schoolTd = $('#school-td');
        //schoolTd.html("");
        //schoolTd.append(data);
        schoolTd.replaceWith(data);
    }
);

}

Answer 1

Sorry. The form tag was around tr tags instead of tds or tables. When I changed that it works.