Clear the Form Field After Successful Submission of PHP Form

Clear the form field after successful submission of php form

They remain in the fields because you are explicitly telling PHP to fill the form with the submitted data.

<input name="firstname" type="text" placeholder="First Name" required="required" 
value="<?php echo $_POST['firstname'];?>">
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HERE

Just remove this, or if you want a condition to not do so make a if statement to that echo or just cleanup the $_POST fields.

$_POST = array(); // lets pretend nothing was posted

Or, if successful, redirect the user to another page:

header("Location: success.html");
exit; // Location header is set, pointless to send HTML, stop the script

Which by the way is the prefered method. If you keep the user in a page that was reached through a POST method, if he refreshes the page the form will be submitted again.

PHP or JQUERY - Clear form fields after a successful submission

A Quick fix for your situation.

To call a js function from php:

<?php
    if(!$formValidationError) {
        echo '<script type="text/javascript">',
            '$(function(){ clearInput(); })',
        '</script>';
    }
?>

or

<?php
    if(!$formValidationError) {
?>

    <script type="text/javascript">
        $(function(){ clearInput(); })
    </script>

<?php } ?>

Echo the js script after jQuery librairy script tag.

Clear form fields after a successful submit

You can use .reset() on your form.

$("#form")[0].reset();

You could follow that with Javascript too

document.getElementById('form').reset();

Or, if successful, redirect the user back to your contact page:

header("Location: contact.php"); // redirect back to your contact form
exit;

EDIT

<input type="submit" class="csubmit" value="Now !" name="get" onClick="clearform();" />

function clearform()
{
    document.getElementById("name").value=""; //don't forget to set the textbox ID
    document.getElementById("message").value=""; //don't forget to set the textbox ID
    document.getElementById("code").value=""; //don't forget to set the textbox ID
}

Also use:

required="required"

so people will be required to fill out the input fields :)

Which by the way is the prefered method. If you keep the user in a page that was reached through a POST method, if he refreshes the page the form will be submitted again.

Clear forms on successful submission

I assume you render your form fields after you check if it was success or not. If I am right, set in success also some $success variable to true

$success = true;

when you have success or to false where not. And then in rendering input just do:

<input name="uname" type="text" class="form-control" id="uname" placeholder="Username" value="<?php if (!empty($_POST["uname"]) && !$success) { echo $_POST["uname"]; } ?>" required>

ps: you do not need else { echo ''; }; ;)

Resetting the form fields after successful submission

None of the above answers worked for me. I decided to use echo "$('#contact-fm').trigger('reset');"; after echo "$('#text').fadeOut(5000);"; in my php code. Then it worked.

Resetting form input after submit and/or redirect

UPDATE

Good work learning the fundamentals of AJAX!

In terms of handling ajax in wordpress specifically, there are some wordpress hooks for this:

This article does a good job overviewing some of the fixes you will need to fine-tune this.

The key to making your form work the wordpress way is to use the built in wordpress hooks, but they also suggest the following:

Passing your ajax request to admin-ajax.php.

Use jQuery to handle form submission.

Applying a nonce field to protect the form processor script (you should do this no matter what).

---

Don't forget to read up on the basics of PHP forms.

The simplest thing to prevent form resubmission is to wrap your form validation code in a if(isset($_POST['submit']) condition.

In terms of emptying the fields, you can do what the accepted answer here suggests: reset your $_POST variable after you've handled the form, or simply not echo out the $_POST data in your input values.

The questions to ask regarding the use of AJAX are the following:

Can you set up a separate file on your system to handle the php processing - but none of the html or javascript - of this form?

Do you have access to a library such as jQuery to smooth the transition into using XHR?

If so, you can make this form an ajax form that posts its data to your separate php file. That will ensure that only the javascript event you have chosen to trigger the form submission will run the php code. Plus it will give you all the fun animation stuff that javascript can handle and your no page reload goodness.

---

Related Topics