Question

这里我的表单通过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>

Answer 1

你必须在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();
});

如果你没有它，那就按照我标记的成功使用。

Answer 2

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

Answer 3

使用此：

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

Answer 4

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

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

通过ajax提交明确的表单值

4 个答案: