Popup edit single record form

[Xtremefaith]

So let me start by saying I am new to PHP so any extra advice is helpful, working on a large scale personal project hoping to get better with PHP because of it.

Now I have a script that displays my database just as I like, and next to each row is a [edit] link (currently doesn't do anything). My goal is to enable this edit/icon link to enable a popup from; enabled through a .JS file (I've attached). I would like the form to popup pre-filled with the info of that record selected (I suppose using the $result[$id] var).

//This section gathers the field names
// and puts them in the first row of the table
$sql = "SELECT * FROM `vendors` ORDER BY `Company/Name` ASC";
$query = mysql_query($sql);
$fields_nums = mysql_num_fields($query); // Code, Account Info, Ph#, User, PW, Web, Active
		$fieldname = array();
		for($i=0; $i<$fields_nums; $i++)
			{
			$fields = mysql_fetch_field($query);
			$fieldname[$i] = $fields->name;
			echo "<td id='headers'>".$fieldname[$i]."</td>";
			}
// This section is pulling the data from the db and populating the 
//table accordingly
while($result = mysql_fetch_array($query)) { 
	$id = $result[0];
	$name = $result[1];
	$code = $result[2];
	$acct = $result[3];
	$ph = $result[4];
	$username = $result[5];
	$pw = $result[6];
	$web = $result[7];
	$active = $result[8];
	echo "<tr id='data'>";
	echo "<td>".$id."</td>";
	echo "<td>".$name."</td>";
	echo "<td>".$code."</td>";
	echo "<td>".$acct."</td>";
	echo "<td>".$ph."</td>";
	echo "<td>".$username."</td>";
	echo "<td>".$pw."</td>";
	echo "<td><a href='".$web."'>".$web."</a></td>";
	echo "<td>".$active."</td>";
	echo "<td style='border:none'>[edit]</td>";
	echo "</tr>";
}

The popup form is already predefined above this section for when adding an entry:

<!-- ADD PAYEE FORM -->
        <div id="button"><input type="Submit" name="addPayee" value="Add Payee" id="popup"></div>  
     </center>  
     <div id="popupContact">  
         <a id="popupContactClose">x</a>  
       <h1>Add a new Payee here!</h1>  
         <p id="contactArea">  
             <form action="payees.php" method="post">
             If field is blank please leave blank.
                <p>Company/Name: <input type="text" name="name">  Code: <input type="text" name="code" size="4"></p>
                <p>Account Info: <input type="text" name="acct" size="36" /></p>
                <p>Phone: <input type="text" name="phone"/> xxx.xxx.xxx</p> 
                <p>Username: <input type="text" name="username" size="15"> Password:<input type="text" name="password" size="15"></p>
                <p>Website: <input type="text" name="web" value="http://" size="36"></p>
                <p><LABEL>Active Account:<INPUT TYPE="checkbox" NAME="active" VALUE="yes">Yes</LABEL></p>
                <p><input type="Submit" name="addPayee" value="Add Payee"></p>
             </form>
         </p>  
     </div>  

  <div id="backgroundPopup"></div> <!-- End payee form pop-up -->

So first question, how do I make the [edit] link (or possible icon in future) active so onClick a new update form pops up with an update button. Even without the pop-up feature I'm not sure how to edit a single-entry.

Thank you so much for any help you can provide, I've looked everywhere so if you can help this will mean so much. Thanks again.

[Xtremefaith]

Ok, so with no replies here is an update of where I'm at. I decided to make the "add entry" button update an in-line form instead of the popup form I was using. Now I just need to make the "edit" link next to each of my rows activate the popup form and pre-fill it with the data based on the ID of that row.

Sounds simple to me just not sure what I'm suppose to do or if there's a function that makes this easy. Any help on this would go a long way, so thank you in advance for whoever has the magical answer.

Here's some of my current code:

if( mysql_num_rows($query) > 0)
{
	$row=mysql_fetch_assoc($query);

	do{
		//save the value of id
		$id=$row['ID'];
		
		//"erase" ID from $row
		unset($row['ID']);
		
		//implode will "join" all the $row elements using '</td><td>' as the 'glue'
		echo '<tr id="data"><td>'.implode('</td><td>',$row).'</td><td style="border: medium none;"><a href="?id='.$id.'">[Edit]</a></td></tr>';
	}while($row=mysql_fetch_assoc($query));
	
} 
else
{
	echo 'No Records found';
}

Also this is the popup form called by a js.file:

<div id="button"><input type="Submit" name="updatePayee" value="Update Payee" id="popup"></div>  
     </center>  
     <div id="popupContact">  
         <a id="popupContactClose">x</a>  
       <h1>Add a new Payee here!</h1>  
         <p id="contactArea">  
             If field is blank please leave blank.
             <form action="updatePayee.php" method="post">
                <input type="hidden" name="ud_id" value="<? echo $id; ?>">
                Company/Name: <input type="text" name="ud_name" value="<? echo $name; ?>">
                Code: <input type="text" name="ud_code" value="<? echo $code; ?>">
                Account Info: <input type="text" name="ud_phone" value="<? echo $acct; ?>">
                Phone: <input type="text" name="ud_mobile" value="<? echo $ph; ?>">
                Username: <input type="text" name="ud_fax" value="<? echo $username; ?>">
                Password: <input type="text" name="ud_email" value="<? echo $pw; ?>">
                Web Address: <input type="text" name="ud_web" value="<? echo $web; ?>">
                <input type="Submit" value="Update">
             </form>
         </p>  
     </div>  

  <div id="backgroundPopup"></div> <!-- End payee form pop-up -->

[hielo]

On your first block of code above, this is wrong:
<tr id="data">...</tr>

If your query yields three records you will see the same id three times:

<tr id="data">...
<tr id="data">...
<tr id="data">...</tr>

You are NOT allowed to have an id multiple times. It MUST be unique throughout the page. My suggestion would be to append the record id prefixed with an underscore - ex:

<tr id="data_1">...
<tr id="data_12">...
<tr id="data_34">...</tr>

On your second block of code above, on lines 9-16, you do NOT need any php code. On your first code of block you are generating an HTML table. Each Row of that table corresponds to one record in your db. So if you click on Edit of the Third row, you do NOT need to send a request to the server to find out what the data for that record is. You already have it on the browser (in your HTML table!). All you need to do is Extract the data from each of the cells in the relevant row. If you incorporate the edits I suggested above, you can extract the id from the <TR> element.

Thus, there really is no need for the id in <a href="?id=X">Edit</a> .

As for your popup.txt file, it currently has: $("#popup").click(function(){...});

Instead, use:

$(".popup").bind('click',function(){
		//find the parent row of the clicked "Edit"
		var row= $(this).closest("tr");

		//"extract" the id from row
		var id =row.attr('id').split('_')[1];

		//find the hidden field in your edit form and assign the id
		$('#ud_id').val(id);

		//iterate through each table cell and extract the innerHTML
		//and assign it to the corresponding field in your edit form
		//NOTE: this requires that each cell in your Table has a
		//class="FIELD_ID" - ex:
/*
		<tr id="data_1"><td class="ud_name">Google</td><td class="ud_code">a</td><td class="ud_account">123</td><td class="ud_phone">855-999-9999</td><td class="ud_username">alpha</td><td class="ud_password">Password</td><td class="ud_web">v</td><td><a class="popup" href='#'>[Edit]</a></td></tr>

Thus in your edit form you will need a field with
id="ud_name" 
AND one with id="ud_code"
AND one with id="ud_account"
etc.

Also notice that the Edit link now has class="popup" since your jquery changed from:
$('#popup')

to:
$('.popup')
*/
		$('td:not(:last)',row).each(function(){
			$('#'+this.className).val(this.innerHTML);
		});
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	return false;
	});