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

Question

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.

Answer 1

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_$[e-mail]</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>";