清除通过ajax提交的表单值答案

【问题标题】：clear form values submitting through ajax清除通过ajax提交的表单值
【发布时间】：2016-05-24 05:29:51
【问题描述】：

在这里，我的表单正在通过 ajax 清除，并且我对所有字段都进行了验证，这里面临的问题是，当我为一个字段输入数据并提交表单时，在该字段中输入的值正在消失，我希望这样留下来。这是我的ajax，请看一下

 <script type="text/javascript">
 $('#send').click(function() {

var form_data = {
  name: $('#name').val(),
  email: $('#email').val(),
  message: $('#message').val()

};
$.ajax({
  url: "<?php echo base_url();?>roxcontrol/contact_form",
  type: 'POST',
  data: form_data,
  success: function(msg) {
    if (msg == 'YES')
      $('#alert-msg').html('<div class="alert alert-success text-center">Your mail has been sent successfully!</div>');
    else if (msg == 'NO')
      $('#alert-msg').html('<div class="alert alert-danger text-center">Error in sending your message! Please try again later.</div>');
    else
      $('#alert-msg').html('<div class="alert alert-danger">' + msg + '</div>');

  }


});


$( '#contact' ).each(function(){
this.reset();
});


return false;


});

</script>

【问题讨论】：

标签： jquery ajax codeigniter

【解决方案1】：

使用trigger 在成功事件后重置您的表单。您正在 ajax 之外重置表单，因此每次调用都会重置。试试下面的代码

 <script type="text/javascript">
 $('#send').click(function() {

var form_data = {
  name: $('#name').val(),
  email: $('#email').val(),
  message: $('#message').val()

};
$.ajax({
  url: "<?php echo base_url();?>roxcontrol/contact_form",
  type: 'POST',
  data: form_data,
  success: function(msg) {
    if (msg == 'YES')
    {
      $('#alert-msg').html('<div class="alert alert-success text-center">Your mail has been sent successfully!</div>');
        $( '#contact' ).trigger("reset");
     }
    else if (msg == 'NO')
      $('#alert-msg').html('<div class="alert alert-danger text-center">Error in sending your message! Please try again later.</div>');
    else
      $('#alert-msg').html('<div class="alert alert-danger">' + msg + '</div>');

  }


});


return false;


});

</script>

【讨论】：

【解决方案2】：

你必须在 ajax 的成功回调中这样做：

<script type="text/javascript">
    $('#send').click(function() {
      var form_data = {
        name: $('#name').val(),
        email: $('#email').val(),
        message: $('#message').val()
      };
      $.ajax({
        url: "<?php echo base_url();?>roxcontrol/contact_form",
        type: 'POST',
        data: form_data,
        success: function(msg) {
          if (msg == 'YES')
            $('#alert-msg').html('<div class="alert alert-success text-center">Your mail has been sent successfully!</div>');
            $('#contact')[0].reset(); // <------here you can reset it.
          else if (msg == 'NO')
            $('#alert-msg').html('<div class="alert alert-danger text-center">Error in sending your message! Please try again later.</div>');
          else
            $('#alert-msg').html('<div class="alert alert-danger">' + msg + '</div>');

        }
      });
      return false;
    });
</script>

此外，根据此代码，这不是拥有多个 ID 的有效方法：

$( '#contact' ).each(function(){
   this.reset();
});

如果你没有，那么就按照我在成功中标记的那样使用。

【讨论】：

我已经按照您所说的进行了更改，但是当我提交按钮时，页面正在重定向而不显示任何验证规则
如果在成功事件后忘记添加{

【解决方案3】：

使用这个：

$('#Your_form_id').trigger('reset');

【讨论】：

【解决方案4】：

首先将您的代码放在文档就绪语句中，其次您需要将重置放在 ajax 调用的成功函数中，以便在将数据添加到数据库后清除表单

$(function(){
$('#send').click(function(e) {
e.preventDefault();
var form_data = {
  name: $('#name').val(),
  email: $('#email').val(),
  message: $('#message').val()

};
$.ajax({
  url: "<?php echo base_url();?>roxcontrol/contact_form",
  type: 'POST',
  data: form_data,
  success: function(msg) {
     //do reset here after success
    if (msg == 'YES') {
      $('#alert-msg').html('<div class="alert alert-success text-center">Your mail has been sent successfully!</div>');}
    else if (msg == 'NO') {
      $('#alert-msg').html('<div class="alert alert-danger text-center">Error in sending your message! Please try again later.</div>');
    } else {
      $('#alert-msg').html('<div class="alert alert-danger">' + msg + '</div>');

  }}


});
});

请注意，如果您有多个循环表单，则应使用类而不是 id

【讨论】：