• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3016
  • Last Modified:

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

0
john4823
Asked:
john4823
  • 2
  • 2
  • 2
1 Solution
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now