Populate dialog form fields with dynamic table data onclick of a jquery button

Question

I haven't posted a question here before, but this site has been very helpful, so thank you. I have been having some trouble populating a jQuery dialog form with dynamic table data when I click an "edit" button in the same row as the fields i want to use to populate the form with.

My HTML code here: Dialog form:

<div id="edit-dialog-form" class="edit-dialog-form" title="Edit Subscriber"><!--EDIT SUBSCRIBER - PULL FROM DB & UPDATE TO DB-->

            <form name="editSubscriber"><!--edit existing subscriber details in database--->
            <fieldset>
                <label for="fname">First Name</label>
                <input type="text" name="fname" id="fnameEdit" value="" class="text ui-widget-content ui-corner-all"/>

                <label for="lname">Last Name</label>
                <input type="text" name="lname" id="lnameEdit" value="" class="text ui-widget-content ui-corner-all" />

                <label for="email">Email</label>
                <input type="text" name="email" id="emailEdit" value="" class="text ui-widget-content ui-corner-all" />

                <label for="status">Status</label>
                <input type="text" name="status" id="statusEdit" value="" class="text ui-widget-content ui-corner-all" />

                <!--<label for="password">Password</label>
                <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />-->

            </fieldset>
            </form>
        </div><!-- create - dialog-form-->

HTML Table

<table id="users" class="ui-widget ui-widget-content">
            <thead>
            <tr class="ui-widget-header ">
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Status</th>
                <th>Edit</th>
            </tr>
            </thead>
            <tbody>

            <?php

            $content = $sub_info;


                foreach($content as $row)
                {
                    //print_r($row);
                    echo '<tr>';
                    echo '<td data-fn="'.$row['SubFirstName'].'" >'.$row['SubFirstName'].'</td>';
                    echo '<td data-ln="'.$row['SubLastName'].'">'.$row['SubLastName'].'</td>';
                    echo '<td data-em="'.$row['SubEmail'].'">'.$row['SubEmail'].'</td>';
                    echo '<td data-st="'.$row['Activated'].'">'.$row['Activated'].'</td>';
                    echo '<td><input type="button" class="editUser" id="editUser" value="Edit"/></td>';
                    echo '</tr>';
                }
            ?>

            </tbody>
        </table>

My JS code here:

$(".editUser").click(function(){
                $( ".edit-dialog-form" ).dialog( "open" );

              //get the data-xx values from this tr
              var fname = $(this).closest('tr').find('td').data('fn');//data-fn="'.$row[SubFirstName].'"
              // put each into the form
              $('#fnameEdit').val(fname);//where #fnameEdit is the id of input field form "editSubscriber"

              //get the data-xx values from this tr//
              var lname = $(this).closest('tr').find('td').data('ln');
              // put each into the form
              $('#lnameEdit').val(lname);//where #lnameEdit is the id of input field form "editSubscriber"
        });

I hope that I posted this in the correct way. Thanks to anyone that is able to help. Basically my table is populated with dynamic data from a database, and i need to show this data in the form when i click on the edit button - so that i can eventually edit the data and update the edited data to the database. What's happening with my "populating form js" now is only the first field(fname) is being pulled from the table and populating the first form field.

Answer 1

var fname = $(this).closest('tr').find('td').data('fn');

guess it should be

var fname = $(this).closest('tr').find('td:eq(0)').data('fn');//data-fn

and

var lname = $(this).closest('tr').find('td').data('ln');

should be

var lname = $(this).closest('tr').find('td:eq(1)').data('ln');