abcd abcd - 1 month ago 8
PHP Question

Redirect button to different page & save instead of saving values in same page

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.

enter image description here

Answer

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>";