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