如何使用$ _POST填充表單時使用表單中的按鈕重置PHP表單？

Question

我想添加另一個輸入或按鈕旁邊的提交將清除表單。 我發現的問題是，因爲窗體使用$ _POST在表單提交後保留其值（我想保留一個功能），所以它似乎阻止了像<input type="reset" value="Reset" name="reset" />這樣的工作。

這是代碼：

<form method="post" action="<?php echo htmlspecialchars ($_SERVER["PHP_SELF"]);?>"> 
    Name: <input type="text" name="name" value="<?php echo $name;?>"> 
    <span class="error">* <?php echo $nameErr;?></span><br> 
    E-mail: <input type="text" name="email" value="<?php echo $email;?>"> 
    <span class="error">* <?php echo $emailErr;?></span><br> 
    Website: <input type="text" name="website" value="<?php echo $website;?>"> 
    <span class="error"><?php echo $websiteErr;?></span><br> 
    Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea><br> 
    Gender: 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male 
    <span class="error">* <?php echo $genderErr;?></span><br> 
    <input type="submit" name="submit" value="Submit"> 
    <input type="reset" value="Reset" name="reset" /> 
</form> 

Answer 1

可以使用JS復位。

<form is="myForm" method="post" action="<?php echo htmlspecialchars ($_SERVER["PHP_SELF"]);?>"> 
    Name: <input type="text" name="name" value="<?php echo $name;?>"> 
    <span class="error">* <?php echo $nameErr;?></span><br> 
    E-mail: <input type="text" name="email" value="<?php echo $email;?>"> 
    <span class="error">* <?php echo $emailErr;?></span><br> 
    Website: <input type="text" name="website" value="<?php echo $website;?>"> 
    <span class="error"><?php echo $websiteErr;?></span><br> 
    Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea><br> 
    Gender: 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male 
    <span class="error">* <?php echo $genderErr;?></span> 
    <br> 
    <input type="submit" name="submit" value="Submit"> 
    <button onclick="document.getElementById("myForm").reset();" value="Clear form" /> 
</form> 

Answer 2

使用jquery清除值。

添加按鈕重設頁面，並給它一個id

<input type="button" id="reset" value="reset"> 

然後做到這一點

<script> 
$("#reset").click(function(){ 
$("input").val(""); 
}) 
</script> 

確保你的頭

Answer 3

添加jQuery庫上的點擊重置按鈕，你可以在php中做這樣的事情：

If(isset($_POST['reset'])){ 
    $_POST = array(); 
} 

Answer 4

你可以在這裏做一些事情來讓自己走向正確的方向。如果你在前端使用Javascript（並且考慮到它是2017年，我認爲這是一個安全的假設），那麼你可以簡單地使用你正在使用的任何庫（閱讀：可能是jQuery），並將值設置爲空字符串或聯合國 - 檢查他們。

使用Javascript/jQuery的

我很小心，只包括那些投入不提交或復位按鈕，否則你會與沒有文本底部的兩個按鈕結束。

另請注意，$variable是我的jQuery語法，用於表示此變量是一個jQuery包裝對象。

$(function() { 
 
    $('[type="reset"]').on('click', function(e) { 
 
    e.preventDefault(); //We don't want the reset function to fire normally. 
 
    var $this = $(this), 
 
     $form = $this.parent('form'), 
 
     $input = $form.find(':input:not(:submit):not(:reset)'); 
 
    $input.each((i, item) => { 
 
     var $item = $(item); 
 

 
     if ($item.is(':checkbox')||$item.is(':radio')) { 
 
     $item.prop('checked', false); 
 
     } else { 
 
     $item.val(''); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="email" name="email" value="jbob@app.com" /><br /> 
 
    <input type="checkbox" name="something" checked /> 
 
    <input type="radio" name="something_else" checked/> 
 
    <input type="submit" /> 
 
    <input type="reset" /> 
 
</form>

PHP

對於PHP，你想要做什麼，實際上是在另一個添加提交按鈕，但改變它的價值。像這樣：

<form method="post" action="<?php echo htmlspecialchars ($_SERVER[" PHP_SELF "]);?>"> 
 
    Name: <input type="text" name="name" value="<?php echo $name;?>"> 
 
    <span class="error">* <?php echo $nameErr;?></span><br> E-mail: <input type="text" name="email" value="<?php echo $email;?>"> 
 
    <span class="error">* <?php echo $emailErr;?></span><br> Website: <input type="text" name="website" value="<?php echo $website;?>"> 
 
    <span class="error"><?php echo $websiteErr;?></span><br> Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea><br> Gender: 
 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female 
 
    <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male 
 
    <span class="error">* <?php echo $genderErr;?></span> 
 
    <br> 
 
    <input type="submit" name="submit" value="Submit"> 
 
    <input type="submit" name="submit" value="Reset" /> 
 
</form>

現在，在你的PHP代碼，你在上面做：

<?php if($_POST['submit']=='Reset') $_POST = array(); 
//you could also use [] to dictate an empty array in more recent versions of PHP. 
///rest of code /// 

Answer 5

嘗試jQuery的形式復位方法。

將id屬性設置爲表單中的標籤。

<form id="Myform" method="post" action="<?php echo htmlspecialchars ($_SERVER["PHP_SELF"]);?>"> 
      Name: <input type="text" name="name" value="<?php echo $name;?>"> 
      <span class="error">* <?php echo $nameErr;?></span><br> 
      E-mail: <input type="text" name="email" value="<?php echo $email;?>"> 
      <span class="error">* <?php echo $emailErr;?></span><br> 
      Website: <input type="text" name="website" value="<?php echo $website;?>"> 
      <span class="error"><?php echo $websiteErr;?></span><br> 
      Comment: <textarea name="comment" rows="5" cols="40"><?php echo $comment;?></textarea><br> 
      Gender: 
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female 
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male 
      <span class="error">* <?php echo $genderErr;?></span> 
      <br> 
      <input type="submit" name="submit" value="Submit"> 
      <input id="Reset_btn" value="Reset" name="reset" /> 
     </form> 

我已經設置了id屬性來重置按鈕也從那裏初始化重置功能。在代碼下面添加jquery js並測試您的重置按鈕。

<script> 
    $('#Reset_btn').click(function(){ 
     $('#Myform')[0].reset(); 
    }); 
</script>