Question

I got the array of disabled text boxes from the database. When I click on edit button it should enable all the text boxes which are in array. But i could only enable the first text box. Here is the code.

code for edit button:

<input type="button" value="Edit" onclick="enable();" />

function enable()

function enable(){
document.getElementById("instance_name").disable = false;
document.getElementById("host_name").disable = false;
}

array:

$result=mysql_query("SELECT user_instance.instance_name, user_instance.host_name FROM
dba_account, user_instance WHERE dba_account.account_id = user_instance.account_id AND 
dba_account.account_id = '$accid'");

while($note = mysql_fetch_array($result))
{
<inut type='text' name='instance_name' id='instance_name' disabled='disabled' 
value='$note[instance_name]' size='25' />
<input type='text' name='host_name' id='host_name' disabled='disabled' 
value='$note[host_name]' size='25' />
}

I am getting all the disabled textboxes, but i can not anable them all. Appreciate your help.

Answer 1

You’re giving the same ID to multiple elements. Each ID can only be unique to one element, so once javascript finds the first ID, it stops. I’d give it a class="instance_name" instead and then get the elements by class instead. You could do something like this:

function enable(){
    Array.prototype.forEach.call( document.getElementsByClassName('instance_name'), 
                                  function(element){
                                      element.removeAttribute('disabled');
                                  });
}