CODEWITHSUNDEEP
jquery
tcode
tcode

Reputation: 5105

Pass Table Data to Drop Down Lists Using JQuery

I have the following HTML code, a table

        <table id="namedConsultants" class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Consultant</th>
                    <th>Days Assigned</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input class="form-control" id="ConID" name="ConID" readonly="true" type="hidden" value="4" /></td>
                    <td><input class="form-control" id="ConFullName" name="ConFullName" readonly="true" type="text" value="Person A" /></td>
                    <td><input class="form-control" id="ConTimeAssigned" name="ConTimeAssigned" readonly="true" type="text" value="1.0" /></td>
                    <td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
                </tr>
                <tr>
                    <td><input class="form-control" id="ConID" name="ConID" readonly="true" type="hidden" value="2" /></td>
                    <td><input class="form-control" id="ConFullName" name="ConFullName" readonly="true" type="text" value="Person B" /></td>
                    <td><input class="form-control" id="ConTimeAssigned" name="ConTimeAssigned" readonly="true" type="text" value="1.0" /></td>
                    <td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
                </tr>
            </tbody>
        </table>

I need to be able to click the 'Edit' link beside each table row and then have the ConFullName and ConTimeAssigned passed to two drop down lists

<select class="form-control" data-val="true" data-val-number="The field ConsultantID must be a number." id="ConsultantID" name="ConsultantID">
<option value="">Select</option>
</select>

<select class="form-control" data-val="true" data-val-number="The field daysAssigned must be a number." id="daysAssigned" name="daysAssigned">
<option value="">Select</option>
</select>

Once the 'Edit' link it clicked beside each table row, I would like to call a JQuery function like this which would then pass the data to the appropriate drop down lists.

$("#namedConsultants").on('click', '.editConsultant', function () {

    //alert("test");
    //Get ConFullName and ConTimeAssigned and pass them to the two drop down lists

});

Does anyone have any ideas on how to pass this data using my JQuery function?

Any help appreciated.

Thanks.

Update

Removed repeating IDs as requested

<tr>
<td><input type="hidden" name="ConID" class="form-control" readonly value="2" /></td>
<td><input type="text" name="ConFullName" class="form-control" readonly value="Person A" /></td>
<td><input type="text" name="ConTimeAssigned" class="form-control" readonly value="1.0" /></td>
<td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
</tr>

Updated JQuery function 

$("#namedConsultants").on('click', '.editConsultant', function () {

    //alert("test");
    var tr = $(this).closest("tr");
    var name = tr.find("input.ConFullName").val();
    var timeAssigned = tr.find("input.ConTimeAssigned").val();

    alert(name);
    alert(timeAssigned);

    //$("#ConsultantID").val(name);
    //$("#daysAssigned").val(timeAssigned);


});

Upvotes: 0

Views: 595

Answers (1)

tymeJV
tymeJV

Reputation: 104775

You have repeating ID's in your table, that is bad, ID's must be unique! Give those inputs your wish to target a class and then use an instance of this

$("#namedConsultants").on('click', '.editConsultant', function () {
    var tr = $(this).closest("tr");
    var name = tr.find("input.ConFullName").val();
    var timeAssigned = tr.find("input.ConTimeAssigned").val();

    //Append values to whichever dropdown you wish
});

I assumed you would change your repeating ID's to classes in the code above

Edit: Using name attributes:

$("#namedConsultants").on('click', '.editConsultant', function () {
    var tr = $(this).closest("tr");
    var name = tr.find("input[name=ConFullName]").val();
    var timeAssigned = tr.find("input[name=ConTimeAssigned]").val();

    //Append values to whichever dropdown you wish
});

Upvotes: 3

Related Questions