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

  • Question

  • User-1549556126 posted

    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.

    Tuesday, June 18, 2019 11:44 PM

Answers

  • User839733648 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 2:56 AM
  • User-1549556126 posted

    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");
                    }
                })
            })

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 8:59 PM

All replies

  • User839733648 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 2:56 AM
  • User-1549556126 posted

    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");
                    }
                })
            })

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 19, 2019 8:59 PM