How to reset form in ajax callback?

Question

I submit the form using simple ajax and return the results in a div above the form. The problem is that after the form is submitted and confirmed, I show thanks and want to reset the form so that they do not just press the submit button again ... It seems that they did not find the correct code ...

<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 corrections appear in #results without problems.

But ... when I try to send the javascript form reset command, it does not work. Naturally, I do not see it in the source code, since it is an AJAX callback, so I do not know if this is a problem or I just use 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 guru ideas?

Answer 1

First of all

change

 <form id="myForm" target="sendemail.php" method="post"> 

to

 <form id="myForm" onsubmit="return doSend();"> 

With pure javascript, you can do this:

put an empty script tag in the HTML:

 <script type="text/javascript" id="request"></script> 

in javascript do:

 function $(_){ return document.getElementById(_); } function renderMessage(msg){ $("results").innerHTML = msg; } function resetForm(){ $("myForm").reset(); } function doSend(){ //only for **GET** request $("request").src = "sendemail.php?value1=xx&value2==yy"; return false; } 

in PHP returns:

 renderMessage("<p>Thank you.</p>");resetForm(); 

it will call javascript callback from php.

With jQuery

add only

 function doSend(){ $("#results").load("sendemail.php",{value1:"xx",value2:"yy"},function(){ //callback here $("#myForm").reset(); }) } 

Answer 2

Most forms currently overcome the problem with some users by double-clicking the buttons by doing setAttribute('disabled', 'disabled') on the submit button. You may want to make a double hit, hiding the form completely, and overlaying a button on it to display the form.

Answer 3

You tried

 <script type="text/javascript"> $.ajax..... success: function() { $("#MyForm input").val(''); } </script> 

Answer 4

In the php file that displays the results, click

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

There and say javascript to get it back. Simply. It also simplifies the job, because if an error occurs, you simply change the text displayed without having to change anything on the client side.

Answer 5

I personally do this using Jquery by setting the fields of the corresponding forms to empty fields after returning the ajax view. I think you will find many resources on it in StackOverflow or elsewhere if you decide to go this route.

Answer 6

The following should work:

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

Answer 7

A real simple, but maybe not the best way to do this after it validates, does

 header("Location: url?accepted=true") 

and then put

 if($_REQUEST['accepted'] == "true") echo "<p>Thank you. Your message has been accepted for delivery.</p>"; 

Answer 8

you will need eval () to get the ajax result after completion. if you use something like jquery, this can be done very easily.

Answer 9

 <script type="text/javascript"> $.ajax..... success: function() { $("#myForm")[0].reset(); } </script> 

the above code will reset the whole form