How do I reset a form in an ajax callback?

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 开发者_Python百科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?

Did you try

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

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

put a blank script tag in 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 cause a javascript callback from php.

With jQuery

only add

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

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.

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.

The following should work:

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

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

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 "<p>Thank you. Your message has been accepted for delivery.</p>";  

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

the above code will reset the entire form