Geek Answers Handbook

Clean form values ​​passed via ajax

Here, my form is cleared through ajax, and I had a check for all the fields, and the problem that I encountered is when I enter data for one field and present the form whose value is entered in this field disappears. I want this to stay. Here is my ajax, please look

 <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>
+4
source share
4 answers

Use triggerto reset your form after a successful event. You are returning the form outside of ajax, so with every call it will be reset. Try under the code

 <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>
+1
source

You should do this in ajax callback:

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

:

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

, , .

+1

Use this:

$('#Your_form_id').trigger('reset');
+1
source

First put your code in a document ready for execution, the second you need to put reset in the success function of the ajax call so that the form is deleted after adding data to 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>');

  }}


});
});

Note that you should use classes instead of ids if you have multiple closed forms

0
source

More articles:


All Articles