Answered by:
Unable to Disabled button , Input and Select control's on button click for html table

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