Question

我们使用以下代码更新数据库中的表单字段

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

两个form fields, edit and save部分仅显示在一个页面中。只使用相同的CSS。

Answer 1

也许以下快速编写的代码可能会帮助您以您希望的方式更改外观。

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

Answer 2

我使用以下代码创建了另一个页面 profile1.php ，一旦我们点击按钮，我就将 href 添加到该页面，以便将值保存在profile1中。 php，一旦我们点击“保存”按钮，它将再次重定向到编辑页面。再次点击编辑按钮后，它将重定向到保存页面。

<强> 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>

将按钮重定向到不同的页面＆amp;保存而不是在同一页面中保存值

2 个答案: