将按钮重定向到不同页面并保存而不是在同一页面中保存值

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>