如何在ajax回调中重置表单？

Question

我正在使用简单的ajax发送表单并将结果返回到表单上方的div中。问题是，在提交和验证表单后，我显示了一个感谢，并希望重置表单，以便他们不再只是再次按下提交按钮...似乎无法找到正确的代码来执行此操作。 ..

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

因此，我的sendemail.php验证错误和成功消息在#results中出现没有问题。

但是......当我尝试发送一个javascript表单重置命令时，它不起作用。当然我在源代码中看不到它，因为它是一个AJAX回调，所以我不知道这是不是问题，或者我是否只是使用了错误的语法。

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

任何想法大师？

Answer 1

你试过吗

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

Answer 2

的 First of all

变化

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

到

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

使用纯 javascript ，您可以执行以下操作：

在HTML中添加一个空白脚本标记：

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

在javascript中执行：

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;
}

PHP中的

返回：

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

它将导致来自php的javascript回调。

使用jQuery

仅添加

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

Answer 3

现在大多数表单都克服了某些用户通过在提交按钮上执行setAttribute('disabled', 'disabled')双击按钮的问题。您可能希望完全隐藏表单，并在其位置放置一个按钮以取消隐藏表单。

Answer 4

在输出结果的php文件中，粘贴

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

在那里告诉javascript返回。简单。它也更容易，因为如果发生错误，您只需更改输出的文本，而无需在客户端更改任何内容。

Answer 5

我个人通过Jquery做到这一点，一旦ajax提交返回，将相关的表单字段设置为空白。我想如果你决定走这条路，你会在StackOverflow或其他地方找到足够的资源。

Answer 6

以下内容应该有效：

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

Answer 7

真正的简单，但也许不是最好的方法，它是在valdidates做了

之后

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

然后把

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

Answer 8

完成后你需要eval（）ajax结果。如果你使用像jquery这样的东西，这可以很容易地完成。

Answer 9

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

以上代码将重置整个表单