4

Here my form is getting cleared through ajax and i had validation for all the fields and the problem am facing here is when i enter data for one field and submitting the form the value entered in that field is getting disappeared i want that to be remain. Here is my ajax please have a 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 Answers 4

1

Use trigger to reset your form after success event. You are resetting form outside of ajax so on every call it will reset. Try below 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>
0
1

You have to do that in the ajax's success 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>

Also this is not a valid way to have multiple IDs as per this code:

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

If you don't have it then just use as i have marked in the success.

2
  • i had changed as per what you have told but when i submit the button the page is redirecting without showing any validation rule
    – user_777
    May 24, 2016 at 5:44
  • You forgot to add { after if in success event
    – Vinie
    May 24, 2016 at 5:56
1

Use this :

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

First place your code in a document ready statement, second you need to put the reset in the success function of the ajax call so the form clears after the data is added to the 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 you should use classes instead of ids if you have multiple looped forms

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.