Как мне сбросить форму в обратном вызове 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

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

это вызовет обратный вызов JavaScript от php.

С помощью jQuery

только добавить

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

Answer 2

Вы пробовали

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

Answer 3

В настоящее время большинство форм преодолевают проблему, когда некоторые пользователи дважды нажимают кнопки, нажимая setAttribute('disabled', 'disabled') на кнопке отправки. Вы можете сделать двойной удар, чтобы полностью скрыть форму и поместить на ее место кнопку, чтобы отобразить форму.

Answer 4

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

код выше сбросит всю форму

Answer 5

вам нужно будет eval () результат ajax после завершения. если вы используете что-то вроде jquery, это можно сделать очень легко.

Answer 6

Очень просто, но, может быть, не самый лучший способ это сделать - это после того, как он сделает

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

, а затем положить

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

Answer 7

Должно работать следующее:

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

Answer 8

Я лично делаю это с помощью Jquery, устанавливая пустые поля соответствующих форм после возвращения представления ajax. Я думаю, что вы найдете много ресурсов в StackOverflow или где-либо еще, если решите пойти по этому пути.

Answer 9

В php-файле, который выводит результаты, вставьте туда

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

и скажите javascript, чтобы он возвращался.Просто.Это также облегчает задачу, поскольку в случае возникновения ошибки вы просто изменяете выводимый текст без необходимости что-либо менять на стороне клиента.