Question

I’m trying to move data from a selected row in a table to a form in MVC. I’m using a jquery click event to retrieve the data from my table and move it to my form. The click event is working but it is moving the data to the wrong fields. Heres the click function:

$(document).ready(function () {
    $(".innerTbltr").click(function () {
        alert("Event handle.");
        //this.css("background-color", "#E8EEF4");
        $("#firstName").val(this.childNodes[0].innerHTML);
        $("#lastName").val(this.childNodes[1].innerHTML);
        $("#address1").val(this.childNodes[2].innerHTML);
        $("#address2").val(this.childNodes[3].innerHTML);
        $("#city").val(this.childNodes[4].innerHTML);
        $("#state").val(this.childNodes[5].innerHTML);
        $("#zip").val(this.childNodes[6].innerHTML);
        $("#birthDate").val(this.childNodes[7].innerHTML);
    });
});

The form is set up like this:

<form>
  <input id="firstName" type="text"/>
  <input id="lastName" type="text"/>
  <input id="address1" type="text"/>
  <input id="address2" type="text"/>
  <input id="city" type="text"/>
  <input id="state" type="text"/>
  <input id="zip" type="text"/>
  <input id="birthDate" type="text"/>
</form>

Currently the first name is put into the last name field. The last name is put into the address 1 field. The address 1 is put into the state field and the remaining two fields are left blank. As well as the fields in between the fields that have data are blank.

Answer 1

It might be that not all the DOM is loaded Try putting the click event in a jQuery

 $(document).ready(function(){
//the click event here 
});