Show/hide edit row in table - PHP and Javascript

In this table are entries from a DB.

I need to be able to click on edit (remove works) and that row becomes editable - not having much joy with show/hiding texfields though. Please say why it only ever shows them after the button click and never hides them - this site is for IE7 so it will have to work for that.

function edit_contacts()
{
      if(document.getElementById('edit').style.visibility = 'hidden')
      {
            document.getElementById('edit').style.visibility = 'visible';
      }
      else if(document.getElementById('edit').style.visibility = 'visible')
      {
            document.getElementById('edit').style.visibility = 'hidden';
      }
}

Thanks anyone
<?
			while($company_contacts_row = mysql_fetch_array($company_contacts_query))
			{	
				echo "<tr>";				
				echo "<td>";	
				echo "<input type='hidden' value='".$company_contacts_row['contact_id']."' id='contact_id_".$company_contacts_row['contact_id']."' />";		
				echo $company_contacts_row['type'];
				echo "</td>";
				
				echo "<td>";
				echo $company_contacts_row['title']." ".$company_contacts_row['fname']." ".$company_contacts_row['lname'];
				echo "</td>";
				
				echo "<td>";
				echo "<span id='edit' style='visibility:hidden'>";
				echo "<input type='text' name='edit_mobile' id='edit_mobile' style='width:110px' />";
				echo "</span>";
				echo $company_contacts_row['mobile'];
				echo "</td>";
				
				echo "<td>";
				echo "<span id='edit' style='visibility:hidden'>";
				echo "<input type='text' name='edit_main_telephone' id='edit_main_telephone' style='width:110px' />";
				echo "</span>";
				echo $company_contacts_row['main_telephone'];
				echo "</td>";
				
				echo "<td>";
				echo $company_contacts_row['email'];
				echo "</td>";
				
				echo "<td>";
				echo $company_contacts_row['responsible_for'];
				echo "</td>";
				
				echo "<td>";
				echo $company_contacts_row['main_contact'];
				echo "</td>";
				
				echo "<td width='25px'>";
				echo "<input type='button' value='Edit' onClick='edit_contacts();'>";
				echo "</td>";
				
				echo "<td width='30px'>";
				echo "<input type='button' value='Remove' onClick='remove_contact(".$company_contacts_row['contact_id'].",".$company_id.");'>";
				echo "</td>";					
				echo "</tr>";
			}	
		}			
		?>

Open in new window

john4823Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BenMorelCommented:
Hi,
Maybe because you use = instead of == to compare values ? :)
Ben
function edit_contacts()
{
      if(document.getElementById('edit').style.visibility == 'hidden')
      {
            document.getElementById('edit').style.visibility = 'visible';
      }
      else if(document.getElementById('edit').style.visibility == 'visible')
      {
            document.getElementById('edit').style.visibility = 'hidden';
      }
}

Open in new window

0
john4823Author Commented:
Oops - well spotted. hehe.

Would you say this is the best way to get an edit type row to show?

Cheers for reply
0
flyingCoyoteCommented:
Do you need to have the fields actually hidden?  It sounds to me like that is just a way of disabling them for you.  

How about starting off with the fields non-editable and grayed-out, then clicking an "edit" button" to activate a row of form fields?  You should be able to extrapolate this idea to as many fields/rows as you like by adapting the below example.  The example also grays and disables a field after it is changed.
<form>
 
	<input type="button" value="EDIT ROW 1" onClick="makeEditable('edit_main_firstname');makeEditable('edit_main_lastname');">
	<br />
	
	First Name: <input type="text" name="edit_main_firstname" id="edit_main_firstname" disabled style="background-color:#cccccc;" onchange="makeLocked(this.id)">                       
	Last Name: <input type="text" name="edit_main_lastname" id="edit_main_lastname" disabled style="background-color:#cccccc;" onchange="makeLocked(this.id)">                       
 
	<br />
	<br />
 
	
	<input type="button" value="EDIT ROW 2" onClick="makeEditable('edit_main_email');makeEditable('edit_main_phone');">
	<br />
	
	Email: <input type="text" name="edit_main_email" id="edit_main_email" disabled style="background-color:#cccccc;" onchange="makeLocked(this.id)">                       
	Phone: <input type="text" name="edit_main_phone" id="edit_main_phone" disabled style="background-color:#cccccc;" onchange="makeLocked(this.id)">                       
 
</form>
 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
 
function makeEditable(whichOne){
	document.getElementById(whichOne).disabled = false;
	document.getElementById(whichOne).style.backgroundColor = "#ffffff";
	document.getElementById(whichOne).focus();
}
 
function makeLocked(whichOne){
	document.getElementById(whichOne).disabled = true;
	document.getElementById(whichOne).style.backgroundColor = "#cccccc";
}
 
</SCRIPT>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

john4823Author Commented:
This is what I got so far.

I hate IE sometimes -  cannot set the font color to black!

Any ideas?

Thanks
		<?
			//very inellegant technique although very tired at this point
			while($company_contacts_row = mysql_fetch_array($company_contacts_query))
			{	
				echo "<tr>";
				
				echo "<td>";	
				echo "<input type='text' name='".$company_contacts_row['contact_id']."' id='".$company_contacts_row['contact_id']."' value='".$company_contacts_row['type']."' disabled style='background-color:#97baef;width:60px;' onchange='makeLocked(this.id)'>";  
				echo "</td>";
				
				echo "<td>";
				echo "<input type='text' name='".$company_contacts_row['contact_id']."' id='".$company_contacts_row['contact_id']."' value='".$company_contacts_row['title']." ".$company_contacts_row['fname']." ".$company_contacts_row['lname']."' disabled style='background-color:#97baef;width:60px;' onchange='makeLocked(this.id)'>";  
				echo "</td>";
				
				echo "<td>";
				echo "<input type='text' name='".$company_contacts_row['contact_id']."' id='".$company_contacts_row['contact_id']."' value='".$company_contacts_row['mobile']."' disabled style='background-color:#97baef;width:60px;' onchange='makeLocked(this.id)'>";  
				echo "</td>";
				
				echo "<td>";
				echo "<input type='text' name='".$company_contacts_row['contact_id']."' id='".$company_contacts_row['contact_id']."' value='".$company_contacts_row['main_telephone']."' disabled style='background-color:#97baef;width:60px;' onchange='makeLocked(this.id)'>";  				
				echo "</td>";
				
				echo "<td>";
				echo "<input type='text' name='".$company_contacts_row['contact_id']."' id='".$company_contacts_row['contact_id']."' value='".$company_contacts_row['email']."' disabled style='background-color:#97baef;width:60px;' onchange='makeLocked(this.id)'>";  				
				echo "</td>";
				
				echo "<td>";
				echo "<input type='text' name='".$company_contacts_row['contact_id']."' id='".$company_contacts_row['contact_id']."' value='".$company_contacts_row['responsible_for']."' disabled style='background-color:#97baef;width:60px;' onchange='makeLocked(this.id)'>";  
				echo "</td>";
				
				echo "<td>";
				echo "<input type='text' name='".$company_contacts_row['contact_id']."' id='".$company_contacts_row['contact_id']."' value='".$company_contacts_row['main_contact']."' disabled style='background-color:#97baef;width:60px;' onchange='makeLocked(this.id)'>";  
				echo "</td>";
				
				echo "<td width='25px'>";
				echo "<input type='button' value='Edit/Save' id='edit_button' name='edit_button' onClick='javascript:makeEditable(".$company_contacts_row['contact_id'].");'>"; 
				echo "</td>";
				
				echo "<td width='30px'>";
				echo "<input type='button' value='Remove' onClick='remove_contact(".$company_contacts_row['contact_id'].",".$company_id.");'>";				
				echo "</td>";					
				echo "</tr>";
			}	
		}			
		?>

Open in new window

0
BenMorelCommented:
Where do you want to put a black font ?
0
flyingCoyoteCommented:
IE doesn't allow you to change the color of text in a 'disabled' form field =(
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.