How do I reset a form in an ajax callback?

Question

I am sending a form using simple ajax and returning the results in a div above the form. The problem is that after the form is submitted and validated, I display a thank you and want to reset the form so they don't just press the submit button again... Can't seem to find the right code to do this...

<form id="myForm" target="sendemail.php" method="post">
<div id="results"></div>
<input type="text" name="value1">
<input type="text" name="value2">
<input type="submit" name="submit">
</form>

So, my sendemail.php validation errors and success messages appear in #results without problems.

But... when I try to send back a javascript form reset command, it does not work. Naturally I cannot see it in the source code since it is an AJAX callback so I don't know if that is the issue or if I am just using the wrong syntax.

echo "<p>Thank you. Your message has been accepted for delivery.</p>";
echo "<script type=\"text/javascript\">setTimeout('document.getElementById('myForm').reset();',1000);</script>";

Any ideas gurus?

Answer 1

Most forms nowadays overcome the problem of some users double-clicking buttons by doing a setAttribute('disabled', 'disabled') on the submit button. You may want to do a double-whammy of hiding the form completely, and putting a button in its place to unhide the form.

Answer 2

In the php file that outputs the results, stick a

echo '<p>Thank you. Your message has been accepted for delivery.</p>';

In there and tell the javascript to return that. Simple. It also makes it easier because if an error occurs, you just change the text outputted without having to change anything on the client side.

Answer 3

I personally do this with Jquery, by setting the relevant forms fields to blank once the ajax submission returns. I think you'll find plenty of resources on it on StackOverflow or elsewhere if you decide to go down that route.

Answer 4

The following should work:

<script type="text/javascript">
  function resetForm() {
    document.getElementById("myForm").reset();
  }
</script>

Answer 5

Real simple but maybe not the best way to go about it is after it valdidates do a header("Location: url?accepted=true") and then put if($_REQUEST['accepted'] == "true") echo "

Thank you. Your message has been accepted for delivery.

";

Answer 6

you'll need to eval() the ajax result once complete. if you are using something like jquery, this can be done very easily.