CODEWITHSUNDEEP
jquery
tcode
tcode

Reputation: 5105

Need to Pass Data From Drop Down List to Table using JQuery

Completely stumped with this one, and not even sure it's possible, but if anyone can help, Stack Overflow can.

Right, I've got 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 type="hidden" name="ConID" class="form-control" readonly value="4" /></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>
    <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 B" /></td>
        <td><input type="text" name="ConTimeAssigned" class="form-control" readonly value="2.0" /></td>
        <td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
    </tr>
</tbody>
</table>

When the 'Edit' link is clicked beside a table row, the values ConID (hidden) and ConTimeAssigned are passed to a JQuery function which then passes them into two drop down lists, ConsultantID and daysAssigned.

<select id="ConsultantID" name="ConsultantID">
<option value="">Select</option>
</select>

<select id="daysAssigned" name="daysAssigned">
<option value="">Select</option>
</select>


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

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

    $("#ConsultantID").val(conID);
    $("#daysAssigned").val(timeAssigned);

});

This all works. Now, at this stage the user can then update the days assigned to the consultant they have clicked on to Edit. The days assigned is a drop down list with list items from 1 to 300.

When the user selects the new value in the days drop down list, they can then click an Update button, which will then update the consultants ConTimeAssigned in the table namedConsultants.

$("#btnUpdateConsultant").click(function (e) {

    var consultantID = $("#ConsultantID").val();
    var newDays = $("#daysAssigned").val();

    alert(newDays);

    e.preventDefault(); 

});

There is no database activity here, this is purely an attempt to get data from a table row, pass it into a drop down list, change the value, then pass it back into the table row again.

As I say, I really don't know how to go about this, and any help or advice would be greatly appreciated with this one.

Thanks folks.

Upvotes: 1

Views: 864

Answers (2)

Dimitar Dimitrov
Dimitar Dimitrov

Reputation: 15148

How about you cache the tr you're currently editing, something like:

var editedTr = null;
$(".editConsultant").on("click", function(e) { 
   editedTr = $(this).closest("tr");
   // do the rest of your stuff ...
});

Then when you save:

$("#btnUpdateConsultant").on("click", function(e) { 
    if(editedTr !== null && editedTr !== "undefined") { 
        // do some validation or whatever ...
        editedTr.find("input[name=ConTimeAssigned]").val(daysAssigned.val());
    }
});

I tried preparing a very simplified fiddle

Upvotes: 1

Swiffy
Swiffy

Reputation: 4693

Seems like you've almost done it already with for example this line:

var timeAssigned = tr.find("input[name=ConTimeAssigned]").val();

This is fetching the value, but if you modify it a bit:

tr.find("input[name=ConTimeAssigned]").val(newVal);

It's not inputting a value.

So is your problem finding the correct cell or... ?

Update:

So you have this line:

var conID = tr.find("input[name=ConID]").val();

Add this after it:

var conIDelement = tr.find("input[name=ConID]");

And now when you want to change it with updated value you can do:

$(conIDelement).val(newVal);

Upvotes: 1

Related Questions