asked on

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

BenMorel

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

john4823

ASKER

Oops - well spotted. hehe.

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

Cheers for reply

flyingCoyote

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

john4823

ASKER

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

BenMorel

Where do you want to put a black font ?

ASKER CERTIFIED SOLUTION

flyingCoyote

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial