How to View and Edit data in same table

Hey every one. i am new in php. i know how to select, edit, add, delete data from database and show it in html table. before i was doing this using 4 php pages each for every one.

but today i got an assignment that i have to display data in html table and with every row there is a button of edit.
if user press edit same row of same table will convert to textbox with data in then and edit button will change to save button.

so i want to know how i can identify the row and change it in to textbox.plz explain with som exampl.... i will really appreciate your help.

 

You can accomplish that simply using id field in your database. Make it primary and auto increment.

Then when you UPDATE, just need to identify row by (WHERE id=$id) or whatever relevant.

About the task "click button then convert to text box with data", it can be done by some javascript. If you dont mind posting your code here, I might be able to modify it to meet your question .

 

Here is the code........

<script language="javascript">
function vsb()
{
document.getElementById('sj').style.visibility='hidden';
document.getElementById('kj').style.visibility='visible';
}
</script>
<form method="post">
<div id="sj" style="visibility:visible">
<?
mysql_connect("localhost","root","tree") or die ("can not connect to database because".mysql_error());
mysql_select_db("jaggi");
$a=mysql_query("select * from signup");
while ($b=mysql_fetch_array($a))
{
?>

<ul>
<li><?=$b[id];?></li>
<li><?=$b[uname];?></li>
<li><?=$b[pas];?></li>
<li><?=$b[fname];?></li>
</ul>

<?
}
?>
</div>

<div id="kj" style="visibility:hidden; position:absolute; top:0px; left:0px;">
<?
$a=mysql_query("select * from signup");
while ($b=mysql_fetch_array($a))
{
?>
<ul>
<li><input type="text" value="<?=$b[id];?>" name="id"></li>
<li><input type="text" value="<?=$b[uname];?>" name="uname"></li>
<li><input type="text" value="<?=$b[pas];?>" name="pass"></li>
<li><input type="text" value="<?=$b[fname];?>" name="fname"></li>
</ul>

<?
}
?>
</div>
<input type="button" name="edt" value="Edit" onClick="vsb()">
<?
if(isset($_POST['sbmt']))
{
$a=$_POST['id'];
$b=$_POST['uname'];
$c=$_POST['pass'];
$d=$_POST['fname'];
$slct=mysql_query("update signup set uname='$a',pas='$c',fname='$d' where id='$a' ") or die(mysql_error());
}
?>
<script language="javascript">
function updt()
{
document.getElementById('sj').style.visibility='visible';
document.getElementById('kj').style.visibility='hidden';
}
</script>

<input type="submit" onclick="updt()" name="sbmt" value="Update" />
</form>

 

actuly first i have done it in table but im facing some prblm thn i have wrote it it <ul> and li tag...

 

Can I rewrite it all over? Just kidding, your code looks great. I have modified it a bit. Replace yours with mine, and see whether it works as you want.

This code now only allows update 1 row each time. If you want multiple update, just ask. And make sure you understand the code since you are still learning php

<?php
mysql_connect("localhost","root","tree") or die ("can not connect to database because".mysql_error());
mysql_select_db("jaggi");

if(isset($_POST['sbmt']))
{
	$a=$_POST['id'];
	$b=$_POST['uname'];
	$c=$_POST['pass'];
	$d=$_POST['fname'];
	$slct=mysql_query("update signup set uname='$b',pas='$c',fname='$d' where id='$a' ") or die(mysql_error());
	if ($slct) {
		echo "Update succeed!<br>";
	}
}
?>
<script>
function vsb(id, uname, pas, fname)
{
	text="<form method='post' action=''><ul><input type=hidden name=id value='"+id+"'> <li>Your username: <input type=text name=uname value='"+ uname +"'></li> <li>Your password: <input type=text name=pass value='"+pas+"'></li><li>Last name: <input type=text name=fname value="+fname+"></li><li><input type=submit name=sbmt value=Update></li></ul></form>";
					
	document.getElementById(id).innerHTML= text;
	
}
</script>
<?
$a=mysql_query("select * from signup");
while ($b=mysql_fetch_array($a))
{
?>
<div id='<? echo $b[id];?>'>
<ul>
<li><? echo $b[id];?></li>
<li><? echo $b[uname];?></li>
<li><? echo $b[pas];?></li>
<li><? echo $b[fname];?></li>
<li> 
<input type="button" name="edt" value="Edit" onClick="vsb(<? echo "'$b[id]', '$b[uname]', '$b[pas]', '$b[fname]'"; ?>); return false" /></li>
</ul>
</div>
<? } ?>

PHP:

BTW, I suggest using table. It's more organized.

 

thanx buddy.....its nice ya now i put it in table...thankx for help....

 

You are welcomed. I'm glad that I get the right solution for you.

 

frnd i have 1 more prblm i have put the whole code in <table>
but when i clk on edit the text field come up on the edit field not on same place

<?php
mysql_connect("localhost","root","tree") or die ("can not connect to database because".mysql_error());
mysql_select_db("jaggi");

if(isset($_POST['sbmt']))
{
    $a=$_POST['id'];
    $b=$_POST['uname'];
    $c=$_POST['pass'];
    $d=$_POST['fname'];
    $slct=mysql_query("update signup set uname='$b',pass='$c',fname='$d' where id='$a' ") or die(mysql_error());
    if ($slct) {
        echo "Update succeed!<br>";
    }
}
?>
<table>
<script>
function vsb(id, uname, pass, fname)
{
    text="<form method='post' action='' ><tr><input type=hidden name=id value='"+id+"'> <td>Your username: <input type=text name=uname value='"+ uname +"'></td> <td>Your password: <input type=text name=pass value='"+pass+"'></td><td>Last name: <input type=text name=fname value="+fname+"></td><td><input type=submit name=sbmt value=Update></td></tr></table></form>";
                   
    document.getElementById(id).innerHTML= text;
   
}
</script>

<table>
<?
$a=mysql_query("select * from signup");
while ($b=mysql_fetch_array($a))
{
?>
<div id='<? echo $b[id];?>'>
<tr>
<td><? echo $b[id];?></td>
<td><? echo $b[uname];?></td>
<td><? echo $b[pass];?></td>
<td><? echo $b[fname];?></td>
<td>
<input type="button" name="edt" value="Edit" onclick="vsb(<? echo "'$b[id]', '$b[uname]', '$b[pass]', '$b[fname]'"; ?>); return false" /></td>
</tr>
</div>
<? } ?>
</table>

PHP:

 

This involves javascript, and your problem is solely javascript .

Here is the code that will work with table. Just remind you that, it only updates 1 row each time.

<?php
mysql_connect("localhost","root","tree") or die ("can not connect to database because".mysql_error());
mysql_select_db("jaggi");

if(isset($_POST['sbmt']))
{
    $a=$_POST['id'];
    $b=$_POST['uname'];
    $c=$_POST['pass'];
    $d=$_POST['fname'];
    $slct=mysql_query("update signup set uname='$b',pas='$c',fname='$d' where id='$a' ") or die(mysql_error());
    if ($slct) {
        echo "Update succeed!<br>";
    }
}
?>
<script>
function vsb(id, uname, pass, fname)
{
 	divid= id;
	document.getElementById(divid).innerHTML+= '<input type=hidden name=id value="'+id+'">'; 
 	divid= id+uname;
	document.getElementById(divid).innerHTML= '<input type=text name=uname value="'+uname+'" size=15>'; 
 	divid= id+pass;
	document.getElementById(divid).innerHTML= '<input type=text name=pass value="'+pass+'" size=15>'; 
 	divid= id+fname;
	document.getElementById(divid).innerHTML= '<input type=text name=fname value="'+fname+'" size=15>'; 
	divid= id+"edt";
	document.getElementById(divid).innerHTML= '<input type=submit name=sbmt value="Update">';	
}
</script>
<form action='' method=post>
<table border='1' cellspacing=3 cellpadding=3>
<?
$a=mysql_query("select * from signup");
while ($b=mysql_fetch_array($a))
{
?>
<tr>
<td><div id='<?php echo $b[id]; ?>'><? echo $b[id];?></div></td>
<td><div id='<?php echo $b[id].$b[uname]; ?>'><? echo $b[uname];?></div></td>
<td><div id='<?php echo $b[id].$b[pas]; ?>'><? echo $b[pas];?></div></td>
<td><div id='<?php echo $b[id].$b[fname]; ?>'><? echo $b[fname];?></div></td>
<td><div id='<?php echo $b[id]."edt"; ?>'><input type="button" name='edt' value="Edit" onclick="vsb(<? echo "'$b[id]', '$b[uname]', '$b[pas]', '$b[fname]'"; ?>); 

return false" /></div></td>
</tr>

<? } ?>
</table>
</form>

PHP:

 

thanku dear thnku so much....its work.....

 

This scripting is working fine but having some problem like when two data field will match then it will not showing the text box.

regards
Manoj