CODEWITHSUNDEEP
phphtmlforms
user8359236
user8359236

Reputation:

How can I reset a PHP form using a button within the form when the form populates itself using $_POST?

I want to add another input or button next to the submit which will clear the form. The problem I've found is that because the form uses $_POST to keep its values after the form is submitted (a feature I want to keep), it seems to prevent something like <input type="reset" value="Reset" name="reset" /> from working.

This is the code:

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

Upvotes: 2

Views: 7492

Answers (5)

NASEEM FASAL
NASEEM FASAL

Reputation: 429

Try Jquery form reset method.

put id attribute to form tag in your form.

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

I have set id attribute to reset button also to initialise reset function from there. Add jquery js above below code and test your reset button.

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

Upvotes: 1

Jhecht
Jhecht

Reputation: 4435

There are a few things you can do here to get yourself going in the right direction. If you are using Javascript on the front end (and considering it's 2017 I think it's a safe assumption you are) then you could simply use whatever library you're using (read: Probably jQuery) and set the values to the empty string or un-check them.

Javascript / jQuery

I am very careful to only include inputs that are NOT the submit or reset button, otherwise you'll end up with two buttons on the bottom with no text.

Also note that $variable is my jQuery syntax for denoting to myself that this variable is a jQuery wrapped object.

$(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="[email protected]" /><br />
  <input type="checkbox" name="something" checked />
  <input type="radio" name="something_else" checked/>
  <input type="submit" />
  <input type="reset" />
</form>

PHP

For PHP what you want to do is actually add in another submit button, but change it's value. Like so:

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

Now, in your PHP code you do this at the top:

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

Upvotes: 1

Just_Do_It
Just_Do_It

Reputation: 821

On click of reset button you can do something like this in php:

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

Upvotes: 0

Anandhu Nadesh
Anandhu Nadesh

Reputation: 672

Use jquery to clear the values.

add the button to reset the page and give it an id

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

then do this

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

make sure you add the jquery library in the head

Upvotes: 0

Jim Wright
Jim Wright

Reputation: 6058

You can reset using 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>

Upvotes: 0

Related Questions