locked
Unable to Disabled button , Input and Select control's on button click for html table RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    I had written the below code where I required to disable the input , select and button controls and change the background color on click the submit button.

    But  I am finding no luck to move further.Can any one please let me what's going wrong in my below function.

    <head>
        <style>
            #customers {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
    
                #customers td, #customers th {
                    border: 1px solid #ddd;
                    padding: 8px;
                }
    
                #customers tr:nth-child(even) {
                    background-color: #f2f2f2;
                }
    
                #customers tr:hover {
                    background-color: #ddd;
                }
    
                #customers th {
                    padding-top: 12px;
                    padding-bottom: 12px;
                    text-align: left;
                    background-color: #4CAF50;
                    color: white;
                }
        </style>
    </head>
    <body>
    
        <table id="customers">
            <tr>
            	<th>Edit</th>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
                <td>Participants</td>
                <td>Gender</td>
                <td>Submit </td>
            </tr>
    
            <tr>
                 <td><input type="button" value="Edit" class="use-address"  ></td>
    
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
                <td><input type="text" id="'+" txtparticipants"+'"></td>
                <td><select>
                           <option value="select">select</option>
                           <option value="volvo">Volvo</option>
                           <option value="saab">Saab</option>
                           <option value="mercedes">Mercedes</option>
                           <option value="audi">Audi</option>
                    </select>
    </td> <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td> </tr> </table> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> function submitvallues(button){ var row=$(button).closest('tr'), select=row.find("select"), input=row.find("td:eq(4) input"); alert( select.val() + " " + input.val() ) var data = $(row).children('td').eq(1).text(); alert(data);
    row.disabled=true;
    row.background-color: coral; return false } </script> </body>


     

    Wednesday, March 21, 2018 1:34 PM

Answers

  • User-1838255255 posted

    Hi Beginer,

    According to your description and needs, i make a sample, please check the following sample code:

    <head>
        <style>
            #customers {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }
    
                #customers td, #customers th {
                    border: 1px solid #ddd;
                    padding: 8px;
                }
    
                #customers tr:nth-child(even) {
                    background-color: #f2f2f2;
                }
    
                #customers tr:hover {
                    background-color: #ddd;
                }
    
                #customers th {
                    padding-top: 12px;
                    padding-bottom: 12px;
                    text-align: left;
                    background-color: #4CAF50;
                    color: white;
                }
        </style>
    </head>
    <body>
    
        <table id="customers">
            <tr>
                <th>Edit</th>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
                <td>Participants</td>
                <td>Gender</td>
                <td>Submit </td>
            </tr>
    
            <tr>
                <td><input type="button" value="Edit" class="use-address"></td>
    
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
                <td><input type="text" id="txtparticipants"></td>
                <td>
                    <select>
                        <option value="select">select</option>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                </td>
                <td><input type="button" value="Submit" class="use-address" onclick="submitvallues(this)"></td>
    
            </tr>
    
        </table>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            function submitvallues(button) {
                debugger;
                var row = $(button).closest('tr');
                var inputbut = row.find("td:eq(0) input");
                var select = row.find("select");
                var input = row.find("td:eq(4) input");
                input.prop('disabled', true);
                select.prop('disabled', true);
                inputbut.prop('disabled', true);
                return false;
            }
        </script>
    </body>

    Result:

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 22, 2018 7:15 AM