this.form returns null when form is created with javascript

Question

I am working on a page that will allow the user to view all our current locations and edit them. These locations are stored in form elements inside of their tr on my table with the id location_table. This part works great, the forms can submit and POST correctly. However, I created a function to add a new row, addLocationRow(),It creates a blank form, to allow the user to create a new location. When the createLocation function is called It seems to work correctly. The new row is created with the proper table cells, images ect. You can enter the next text and change any options as you should be able to. But the form does not return anything when sent to createLocation (function is the same as the edit location for testing purposes as i know it works for a form created normally)

function addLocationRow() {

$('#location_table > tbody:first').append('<tr><form name="updateForm" action="" method="get"><td>   </td><td><input type="text" name="location" value=""></td><td><select name="type"><option value="">None</option><option value="M">Kit</option><option value="B">Bulk</option><option value="MB">Kit/Bulk</option></select></td><td><input type="checkbox" name="mixed"></td><td><input type="checkbox" name="pickable"></td><td></td><td><button class="right" style="font-size:14px; border:none; background:none;" type="button" onClick="createLocation(this.form)"><img src="images/approved.gif"></button></td></form></tr>'); 

}

When I pull up the sources tool chrome has I put a stop in the createLocation() function

  function createLocation(form){



    var formLocation = form.location.value;
    alert(formLocation);
    var formType = form.type.value;

    var formMixed = form.mixed.checked; 
    formMixed = (formMixed == true) ?  1 : 0;

    var formPickable = form.pickable.checked;
    formPickable = (formPickable == true) ?  1 : 0; 

    if(confirm("Are you sure you want to create " +  formLocation + "?")){

        //check syntax / characters

        $.post("createLocation.php", {location: formLocation, type: formType, mixed: formMixed, pickable: formPickable} ,function(data) {

            message = data["message"];
            alert(message);

        },"json");
    }
}

with the inspector on (form) It is null. For some reason the from is not returning anything. This function works for forms not created in the addLocationRow function. See anything incorrect with addLocationRow()?

Also, I know there is many ways to do this. I have fooled around with the following but could not figure out how to put a form in the tr.

function addLocationRow() {
    var table = document.getElementById("location_table");
    var row = table.insertRow(1);
    var cellDelete = row.insertCell(0);
    var cellLocation = row.insertCell(1);
    var cellType = row.insertCell(2);
    var cellMixed = row.insertCell(3);
    var cellPickable = row.insertCell(4);
    var cellPrint = row.insertCell(5);
    var cellAddUpdate = row.insertCell(6);

    cellLocation.innerHTML = '<input type="text" name="location">';
    cellType.innerHTML = '<select name="type"><option value="">None</option><option value="M">Kit</option><option value="B">Bulk</option><option value="MB">Kit/Bulk</option></select>';
    cellMixed.innerHTML = '<input type="checkbox" name="mixed">';
    cellPickable.innerHTML = '<input type="checkbox" name="pickable">';
    cellAddUpdate.innerHTML = '<button class="right" style="font-size:14px; border:none; background:none;" type="button" onClick="createLocation(this.form)"><img src="images/approved.gif"></button>';
}

any help is appreciated. My goal is to be able to send a form to the createLocation function to be able to edit/check information given ect.