Question

我有一个Ask Question表格，客户可以向我们提出任何问题。当客户提交表单时，我们会在5秒内给他一封感谢信息，然后隐藏邮件并再次显示该div中的Ask Question表单。

但是，在成功发送消息之后，表单输入值仍然存在。在提交之前，我想要一个没有任何输入值的新鲜事物，如表格。

这是我的ajax代码

$.ajax({

            url:"{{ url('/ask_question_form') }}",
            type: 'GET',
            data: {_token :token, name : name, email : email, contact : contact, question : question},
            success:function(msg){

                // console.log(msg);

                $('.question-modal .textwidget').hide();

                trHTML = "";
                trHTML += "<div id='user-question' style='margin-top:50%; color:#0071BC'>";

                trHTML += "Thanks for your question. We will save your question for further query and give a feedback as soon as possible.";

                trHTML += "</div>";

                $('.question-modal').append(trHTML);

                setTimeout(function() {
                    $('.question-modal #user-question').remove();
                    $('.question-modal .textwidget').show();
                }, 5000);


            }
        });

其中textwidget是form

的班级名称

Answer 1

最佳解决方案是 -

$("#form")[0].reset();

在您的成功消息到来时使用此代码。

Answer 2

完成5秒后，当您隐藏“成功消息”时，您可以重置表单

$("#formId").get(0).reset();

此处“ formId ”表单的ID。

Answer 3

成功提交表单后，删除所有字段的值。

document.querySelector('get-your-field1').value = '';
document.querySelector('get-your-field2').value = '';
document.querySelector('get-your-field3').value = '';
document.querySelector('get-your-textarea').value = '';

或者您可以使用form reset。

＆＃13;

const form = document.querySelector('form');
const btn = document.querySelector('button');

btn.addEventListener('click', event => {
  event.preventDefault();
  form.reset();
});

＆＃13;

<form>
  <input />
  <input />
  <button type="submit">submit</button>
</form>

＆＃13;

Answer 4

以下是执行表单重置功能的示例：

＆＃13;

function reset(){
    setTimeout(function(){    
      var form = document.getElementById('myForm');
      form.reset();
    }, 1000);
}
var btn = document.getElementById('btn');
btn.onclick = function(){
  reset();
}

＆＃13;

<form id="myForm">

  <input value="" />
  <br />
  <input value="" />
  <br />
  <input value="" />
  <br />
  <input value="" />
  <br />

  <button id="btn" type="button">reset</button>
</form>

＆＃13;

Answer 5

请注意，您似乎正在使用表格中的一些令牌。

这意味着，如果您重置值，此令牌仍将存在，由于重复使用该令牌，服务器可能不会接受下一个表单提交。

当服务器响应时，您需要设置一个新令牌。

想要在没有页面重新连接的情况下自动刷新表单

5 个答案: