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

【问题标题】：How do I reset a form in an ajax callback?如何在 ajax 回调中重置表单？
【发布时间】：2011-01-30 04:37:45
【问题描述】：

我正在使用简单的 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>";

大师们有什么想法吗？

【问题讨论】：

标签： php javascript ajax forms

【解决方案1】：

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

上面的代码会重置整个表单

【讨论】：

【解决方案2】：

`First of all`

改变

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

到

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

使用纯 javascript 你可以做到这些：

在 HTML 中放一个空白的 script 标签：

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

【讨论】：

知道这个答案已经有一段时间了，但是 jQuery 选项应该是 $('#myform')[0].reset();

【解决方案3】：

真正简单但也许不是最好的方法是在验证后做一个

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

然后放

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

【讨论】：

【解决方案4】：

你试过了吗

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

【讨论】：

【解决方案5】：

一旦完成，您将需要 eval() ajax 结果。如果您使用的是 jquery 之类的东西，这可以很容易地完成。

【讨论】：

你能给我一个例子，说明我将在哪里以及如何使用此处问题中的代码执行此操作吗？感谢您的意见。
$.ajax({ url: 'ajax/test.php', 成功: function(result) { eval(result); } });您可以在 test.php 中生成一些 javascript 代码，例如： alert("this is a test");

【解决方案6】：

以下应该有效：

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

【讨论】：

出于某种奇怪的原因......这没有做任何事情......没有错误......只是没有做任何事情。
你调用了这个函数吗？您可以添加一个按钮进行测试，如下所示：
对不起，我想我误读了你原来的问题。我认为您不需要使用 setTimeout。如果您只是直接调用重置，它应该可以工作： echo "";
我已将此回显添加到成功后放置在 div 中的数据中......它没有做任何事情（而且我看不到源代码，因为它是通过 ajax 注入的）。但是，按钮方法调用脚本并清除表单，所以我知道该函数有效......似乎调用可能没有做任何事情......可能超出范围，因为它在页面已经呈现后进入？

【解决方案7】：

我个人使用 Jquery 执行此操作，方法是在 ajax 提交返回后将相关表单字段设置为空白。如果你决定走这条路，我认为你会在 StackOverflow 或其他地方找到大量资源。

【讨论】：

【解决方案8】：

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

【讨论】：

我正在发送电子邮件的 php 中进行验证...如何在发送回 div 的成功数据中设置此属性？