ravinesolutions
asked on
Javascript change HTML button value not working in iE7
I have to change the value of a button i.e. the button text.
I have to be able to click on a button on a row in the table and then fill in the form and then clcik again and its disabled like before.
Problem is now that you click the edit button and it changes to save - you cannot change it back though. Cannot use two buttons as this makes more JS code (much more).
This is the HTML for it:
<?
while($company_contacts_ro w = mysql_fetch_array($company _contacts_ query))
{
echo "<tr>";
echo "<td>";
echo "<input type='text' name='type".$company_conta cts_row['c ontact_id' ]."' id='type".$company_contact s_row['con tact_id']. "' value='".$company_contacts _row['type ']."' disabled style='background-color:#9 7baef;widt h:60px;bor der:1px solid #97baef;border:1px solid #97baef;' onchange='makeLocked(this. id)'>";
echo "</td>";
echo "<td>";
echo "<input type='text' name='name".$company_conta cts_row['c ontact_id' ]."' id='name".$company_contact s_row['con tact_id']. "' value='".$company_contacts _row['titl e']." ".$company_contacts_row['f name']." ".$company_contacts_row['l name']."' disabled style='background-color:#9 7baef;widt h:60px;bor der:1px solid #97baef;' onchange='makeLocked(this. id)'>";
echo "</td>";
echo "<td>";
echo "<input type='text' name='mobile".$company_con tacts_row[ 'contact_i d']."' id='mobile".$company_conta cts_row['c ontact_id' ]."' value='".$company_contacts _row['mobi le']."' disabled style='background-color:#9 7baef;widt h:60px;bor der:1px solid #97baef;' onchange='makeLocked(this. id)'>";
echo "</td>";
echo "<td>";
echo "<input type='text' name='main_contact".$compa ny_contact s_row['con tact_id']. "' id='main_contact".$company _contacts_ row['conta ct_id']."' value='".$company_contacts _row['main _contact'] ."' disabled style='background-color:#9 7baef;widt h:60px;bor der:1px solid #97baef;' onchange='makeLocked(this. id)'>";
echo "</td>";
echo "<td>";
echo "<input type='text' name='email".$company_cont acts_row[' contact_id ']."' id='email".$company_contac ts_row['co ntact_id'] ."' value='".$company_contacts _row['emai l']."' disabled style='background-color:#9 7baef;widt h:60px;bor der:1px solid #97baef;' onchange='makeLocked(this. id)'>";
echo "</td>";
echo "<td>";
echo "<input type='text' name='responsible_for".$co mpany_cont acts_row[' contact_id ']."' id='responsible_for".$comp any_contac ts_row['co ntact_id'] ."' value='".$company_contacts _row['resp onsible_fo r']."' disabled style='background-color:#9 7baef;widt h:60px;bor der:1px solid #97baef;' onchange='makeLocked(this. id)'>";
echo "</td>";
echo "<td>";
echo "<input type='text' name='".$company_contacts_ row['conta ct_id']."' id='".$company_contacts_ro w['contact _id']."' value='".$company_contacts _row['main _telephone ']."' disabled style='background-color:#9 7baef;widt h:60px;bor der:1px solid #97baef;' onchange='makeLocked(this. id)'>";
echo "</td>";
echo "<td width='25px'>";
echo "<input type='button' value='Edit' id='edit_button".$company_ contacts_r ow['contac t_id']."' name='edit_button".$compan y_contacts _row['cont act_id']." ' onClick='makeEditable(".$c ompany_con tacts_row[ 'contact_i d'].");'>" ;
echo "</td>";
echo "<td width='30px'>";
echo "<input type='button' value='Remove' onClick='remove_contact(". $company_c ontacts_ro w['contact _id'].",". $company_i d.");'>";
echo "</td>";
echo "</tr>";
}
}
?>
Also the second problem is that the fields when disabled have the wrong text colour - black would be better, is there a hack or alternative method for this.
Would really appreciated some help with this one.
Thanks
I have to be able to click on a button on a row in the table and then fill in the form and then clcik again and its disabled like before.
Problem is now that you click the edit button and it changes to save - you cannot change it back though. Cannot use two buttons as this makes more JS code (much more).
This is the HTML for it:
<?
while($company_contacts_ro
{
echo "<tr>";
echo "<td>";
echo "<input type='text' name='type".$company_conta
echo "</td>";
echo "<td>";
echo "<input type='text' name='name".$company_conta
echo "</td>";
echo "<td>";
echo "<input type='text' name='mobile".$company_con
echo "</td>";
echo "<td>";
echo "<input type='text' name='main_contact".$compa
echo "</td>";
echo "<td>";
echo "<input type='text' name='email".$company_cont
echo "</td>";
echo "<td>";
echo "<input type='text' name='responsible_for".$co
echo "</td>";
echo "<td>";
echo "<input type='text' name='".$company_contacts_
echo "</td>";
echo "<td width='25px'>";
echo "<input type='button' value='Edit' id='edit_button".$company_
echo "</td>";
echo "<td width='30px'>";
echo "<input type='button' value='Remove' onClick='remove_contact(".
echo "</td>";
echo "</tr>";
}
}
?>
Also the second problem is that the fields when disabled have the wrong text colour - black would be better, is there a hack or alternative method for this.
Would really appreciated some help with this one.
Thanks
function makeEditable(whichOne)
{
if(document.getElementById(whichOne).disabled == true)
{
document.getElementById('name' + whichOne).disabled = false;
document.getElementById('name' + whichOne).style.backgroundColor = "#ffffff";
document.getElementById('type' + whichOne).disabled = false;
document.getElementById('type' + whichOne).style.backgroundColor = "#ffffff";
var name = document.getElementById('name' + whichOne).value;
var type = document.getElementById('type' + whichOne).value;
document.getElementById('edit_button' + whichOne).value = "Save";
get_ajax();
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "secured/save_contact_row.php?contact_id=" + whichOne + "&name=" + name + "&type=" + type + "&mobile=" + mobile + "&responsible_for=" + responsible_for + "&main_contact=" + main_contact + "&email=" + email, false);
xmlHttp.send(null);
xmlDoc = xmlHttp.responseText;
if(xmlDoc == 'redirect_index_open_add')
{
//alert("test1");
window.location = 'index.php?cmd=editContact&pg=3&company_id=' + company_id + '';
}
}
else if(document.getElementById(whichOne).disabled == false)
{
document.getElementById('name' + whichOne).disabled = true;
document.getElementById('name' + whichOne).style.backgroundColor = "#97baef";
document.getElementById('type' + whichOne).disabled = true;
document.getElementById('type' + whichOne).style.backgroundColor = "#97baef";
document.getElementById('edit_button' + whichOne).childNodes[0].nodeValue = "Edit";
}
}
function makeLocked(whichOne)
{
document.getElementById('name' + whichOne).disabled = true;
document.getElementById('name' + whichOne).style.backgroundColor = "#97baef";
document.getElementById('type' + whichOne).disabled = true;
document.getElementById('type' + whichOne).style.backgroundColor = "#97baef";
document.getElementById('edit_button' + whichOne).childNodes[0].nodeValue = "Edit";
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER