We are using below code to update the form fields in a database
<form action="profile.php" method="POST">
Name :
<input type="text" name="txtuname" value="<?php echo $row['userName'] ?>" /><br/>
Email :
<input type="text" name="txtemail" value="<?php echo $row['userEmail'] ?>" />
<input id="sub" type="submit" name="submit" value="Save" style="display:none" />
<button class = "pedit" name="submit" onclick="work()">Edit</button>
</form>
script
<script>function work()
{
var see = document.getElementsByName("submit");
for (i = 0; i < see.length; i++)
{
see[i].style.display = see[i].style.display === 'none' ? 'block' : 'none'; }}
</script>
both form fields, edit and save
parts are displaying in only one page & using only same css.
Perhaps the following, quickly written code, might help you change the appearance in the manner you are wishing.
echo "
<form>";
for( $i=0; $i < 10; $i++ ){
echo "
<div class='record'>
<output id='name$i' name='name'>Fred Bloggs $i</output><br />
<output id='email$i' name='email'>fred.bloggs_$i@gmail.com</output><br />
<input type='submit' value='Save' style='display:none'/>
<input type='button' value='Edit' />
</div>";
}
echo "
</form>
<script type='text/javascript'>
var col=document.querySelectorAll('input[type=\"button\"]');
if( col )for( var n in col )if( col[n] && col[n].nodeType==1 )col[n].onclick=function(e){
var parent = this.parentNode;
var fname = parent.querySelectorAll('output[name=\"name\"]')[0];
var femail = parent.querySelectorAll('output[name=\"email\"]')[0];
var bttn = parent.querySelectorAll('input[type=\"submit\"]')[0];
var vname = fname.innerHTML;
var vemail = femail.innerHTML;
parent.removeChild(fname);
parent.removeChild(femail);
fname = document.createElement('input');
fname.type='text';
fname.name='name';
fname.value=vname;
femail = document.createElement('input');
femail.type='text';
femail.name='email';
femail.value=vemail;
parent.appendChild(fname);
parent.appendChild(femail);
this.style.display='none';
bttn.style.display='block';
}.bind( col[n] );
</script>";
I created one more page as profile1.php with below code and i gave href to that page once we click on button, so that values are saving in profile1.php and once we click on save button , again it will redirect to edit page. and after clicking on edit button again it will redirect to save page.
profile.php
<form action="profile1.php" method="POST">
Name :
<input type="text" name="txtuname" value="<?php echo $row['userName'] ?>" /><br/>
Email :
<input type="text" name="txtemail" value="<?php echo $row['userEmail'] ?>" />
<a href="profile1.php"><button class="pedit" name="submit">Edit</button></a>
</form>
profile1.php
<form action="profile.php" method="POST">
Name :
<input type="text" name="txtuname" value="<?php echo $row['userName'] ?>" /><br/>
Email :
<input type="text" name="txtemail" value="<?php echo $row['userEmail'] ?>" />
<input type="submit" name="submit" value="Save" />
</form>