Remove From My Forums

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

Answered by:

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

Question

Answers