Changing the values of dropdown list reflecting the checked radio buttons in HTML table on button click. [Answered]RSS

2 replies

Last post Jun 19, 2019 08:59 PM by vyasnikul

‹ Previous Thread|Next Thread ›

Shortcuts

vyasnikul

Member

16 Points

49 Posts

Changing the values of dropdown list reflecting the checked radio buttons in HTML table on button...

Jun 18, 2019 11:44 PM|vyasnikul|LINK

I created an HTML table using ASP.NET MVC, my values are getting filled in table via controller function invoked in jQuery, I appended 3 columns a dropdown list, a textbox & a radio button for multiple selection. I have 2 buttons that reflects the values of the dropdown list and when I click them I need to change only those dropdown lists that are with the same index as the checked radio buttons. I am trying to use .find() method because the columns are appended. However, it is giving me exception error as the component is not allowing to change its value somehow.

This is my code that fills the data into HTML table:

$.ajax({
                        type: "POST",
                        url: "/Group/FillMembers",
                        data: { GroupName: $("#ddlGroup option:selected").text().trim() },
                        success: function (response) {
                            $.each(response.message, function (key, value) {
                                var arr = value.split(";")
                                var tbody = $("#tbody");
                                var tr = $("<tr></tr>")
                                $.each(arr, function (i, obj) {
                                    var temp = arr[i].trim().split("=")[1];
                                    var td = $("<td></td>")
                                    td.append(temp);
                                    tr.append(td);
                                })
                                //DropDownlist for required adjustments
                                tr.append("<td><select id='ddlReqdAdjustment' class='form-control'> \
                                            <option>Keep</option> \
                                            <option>Remove</option> \
                                            <option>Remove After</option> \
                                        </select> \
                                    </td>");
                                //Textbox with Validation to allow only integers
                                tr.append("<td><input type='text' class='form-control myText' disabled \
                                                onkeypress = 'return (event.charCode != 8 && event.charCode == 0 \
                                                                        || (event.charCode >= 48 && event.charCode <= 57))' /> \
                                    </td >");
                                tr.append("<td> <div class='form-control'>\
                                                <input type='radio' class='fakeRadio'/> \
                                           </td>");
                                tbody.append(tr);
                            });
                            // Resetting Mouse Click & Cursor
                            $("*").css("cursor", "default");
                        }
                    });

This is the code that I am using to try changing the value on btnRemove click:

 $(document).on('click', '#btnRemove', function() {
            var findTd = $(this).closest('tr').find('td');
            if (findTd.find("input.fakeRadio").prop('checked', true)) {
                findTd.find("select").text() = 'Remove';
            }
        })

My HTML Code:

<div class="col-md-6">
        <div class="focus-link theme-bg-medium-blue reopen-shim">
            <a class="arrow-link" id="btnRemove" data-form-method="get" style="background-color:#0066B2; width:auto; cursor:pointer; font-size:10px;">Remove The Selected Members</a>
        </div>
    </div>

 <div id="tbl">
        <table class="table table-striped table-hover">
            <thead>
                <tr id="thead" class="reviewsubhead">
                    <th>Member Name</th>
                    <th>Provisioning ID</th>
                    <th>Member Type</th>
                    @*<th>GUID</th>*@
                    <th>Required Adjustment</th>
                    <th>No. of Day(s)</th>
                    <th>
                        <div class="form-control">
                            <a id="btnClear" class="arrow-link" type="submit" style="width:auto;" onclick="clearRadio()">Clear</a>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
    </div>

Link to the image : https://imgur.com/Oe6mkkl

As per the image if 1st & third radio buttons are selected & if I click on "Remove the selected members" button on the left the text on dropdown next to 1st & 3rd radio button is supposed to be changed to 'Remove'. No idea where I am going wrong.

Jenifer Jian...

Contributor

2100 Points

705 Posts

Re: Changing the values of dropdown list reflecting the checked radio buttons in HTML table on bu...

Jun 19, 2019 02:56 AM|Jenifer Jiang|LINK

Hi vyasnikul,

According to your description, I suggest that you should first loop the table, since your button is out of the table.

Then you could find the each row's radio button and check its attribute.

At last, you could set the value to dropdownlist using $("#id").val() according to your if condition.

The condition that to check if the radio button is checked is: $("input .fakeRadio").is(':checked')

Here is my testing code and you could refer to.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            addTable = $("<table><tr><td><select id='ddlReqdAdjustment' class='form-control'><option>Keep</option><option>Remove</option><option>Remove After</option></select></td>\
                                      <td><input type='text' class='form-control' disabled /></td>\
                                     <td> <div class='form-control'><input type='radio' class='fakeRadio' checked/></td></tr>\
                                 <tr><td><select id='ddlReqdAdjustment' class='form-control'><option>Keep</option><option>Remove</option><option>Remove After</option></select></td>\
                                      <td><input type='text' class='form-control' disabled /></td>\
                                     <td> <div class='form-control'><input type='radio' class='fakeRadio'/></td></tr></table>");
            $("#containerDiv").append(addTable);

        })
        $(document).on('click', '#btnRemove', function () {
            $("table tr").each(function () {
                if ($(this).find("input.fakeRadio").is(':checked')) {
                    $("#ddlReqdAdjustment").val("Remove");
                }
            })
        })
    </script>
</head>
<body>
    <a id="btnRemove">Remove The Selected Members</a>
    <br>
    <div id="containerDiv">
    </div>
</body>
</html>

result:

Best Regards,

Jenifer

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

vyasnikul

Member

16 Points

49 Posts

Re: Changing the values of dropdown list reflecting the checked radio buttons in HTML table on bu...

Jun 19, 2019 08:59 PM|vyasnikul|LINK

Perfect Got it Jenifer Thanks!!

Here's the updated solution:

  $(document).on('click', '#btnRemove', function () {
            $("table tr").each(function () {
                var findTd = $(this).closest('tr').find('td');
                if (findTd.find("input.fakeRadio").is(':checked')) {
                    findTd.find("#ddlReqdAdjustment").val("Remove");
                }
            })
        })

‹ Previous Thread|Next Thread ›