Reputation: 41
I have a while loop that fetches data from a database. I have made three buttons:
> Open
> Hold
> Close
The first time when the page loads, only the open button should be enabled, and the others should be disabled.
After I click the open button, the open button should be disabled, and the hold and close buttons should be enabled.
I got this result for only one row, but in the while loop not for all the rows.
I have used JavaScript with php.
Example:
function onload()
{
document.getElementById("Hold").disabled = true;
document.getElementById("close").disabled = true;
return false;
}
The above code was working for the first row, but I need it to work for all the while loop values.
Upvotes: 3
Views: 5598
Reputation: 54032
<input type="button" value="Open" id="openButton" name="openButton">
<input type="button" value="Hold" id="holdButton" name="holdButton" disabled="disabled">
<input type="button" value="Close" id="closeButton" name="closeButton" disabled="disabled">
$(document).on('click','input[type=button]', function() {
buttonVal = $(this).val();
if(buttonVal == 'Open' )
{
$(this).prop("disabled", true);
$('#holdButton,#closeButton').prop("disabled", false);
}
else
{
$('#holdButton,#closeButton').prop("disabled", true);
$('#openButton').prop("disabled", false);
}
});
Upvotes: 2
Reputation: 9027
Your problem lies in that you are using the same ID for multiple elements - ID's must be unique to each element, and thus, getElementById returns ONE element, with that ID. Give them classes instead.
Upvotes: 6