how to clear the field form after success without redirect to another page in codeigniter

Question

here is my code in view.

    <? $this->load->view('includes/header'); ?>
<? $this->load->view('includes/navbar'); ?>


<div class="container">
<div class="content" style="display:none">
  <div class="page-header">
    <h2>Add A Contact</h2>
  </div>
  <div class="row">
    <div class="span4">
      <form id="formAdd" class="well" accept-charset="utf-8">
        <input type="text" name="cid" class="input-block-level" placeholder="Id Number" required maxlength="9" autofocus/>
        <input type="text" name="name" class="input-block-level" placeholder="Name" required maxlength="40" />
        <input type="email" name="email" class="input-block-level" placeholder="Email" required maxlength="50" />
        <input type="text" name="phone" class="input-block-level" placeholder="Phone" required maxlength="12" />
        <select name="cbo_list">
            <?php foreach($content as $gid =>$gname)
            {
                echo "<option value=$gid>$gname</option>";
            }
            ?>
        </select>
        <button type="submit" class="btn btn-success btn-large">
        <i class="icon-plus icon-white"></i> Add Contact</button>
      </form>
    </div>
  </div>
  <div id="success" class="row" style="display: none">
    <div class="span4">
      <div id="successMessage" class="alert alert-success"></div>
    </div>
  </div>
  <div id="error" class="row" style="display: none">
    <div class="span4">
      <div id="errorMessage" class="alert alert-error"></div>
    </div>
  </div>
</div>
<script src="<?=base_url('js/jquery.js'); ?>"></script>
<script>
$(document).ready(function() {

    $('#formAdd').submit(function() {

      var form = $(this);
      form.children('button').prop('disabled', true);
      $('#success').hide();
      $('#error').hide();

      var faction = '<?=site_url('site/add_contact'); ?>';
      var fdata = form.serialize();

      $.post(faction, fdata, function(rdata) {
          var json = jQuery.parseJSON(rdata);
          if (json.isSuccessful) {
              $('#successMessage').html(json.message);
              $('#success').show();
          } else {
              $('#errorMessage').html(json.message);
              $('#error').show();
          }

          form.children('button').prop('disabled', false);
          form.children('input[cid="cid"]').select();
      });

      return false;
    });

    $('#nav-add').addClass('active');

    $('.content').fadeIn(1000);
});
</script>
<? $this->load->view('includes/footer'); ?>

and here is my code in controller.

public function add_contact() {
        sleep(1); // pause for 1 sec
        $data['validation_error'] = '';

        $this -> load -> library('form_validation'); //call library
        $this -> form_validation -> set_rules('cid', 'Cid', 'required|max_length[9]|alpha_numeric'); //set rule
        $this -> form_validation -> set_rules('name', 'Name', 'required|max_length[40]|callback_alpha_dash_space');
        $this -> form_validation -> set_rules('email', 'Email', 'required|max_length[40]|valid_email');
        $this -> form_validation -> set_rules('phone', 'Phone', 'required|max_length[15]|alpha_numeric');
        $this->form_validation->set_rules('cbo_list', 'Group Name', 'required');


        if ($this -> form_validation -> run() == FALSE) { //if there is a mistake (cant run), send error
            $message = "<strong>Adding</strong> failed!";
            $this -> json_response(FALSE, $message);
        } else {
            $is_added = $this -> contact_model -> add(
                        $this -> input -> post('cid'), 
                        $this -> input -> post('name'), 
                        $this -> input -> post('email'), 
                        $this -> input -> post('phone'),
                        $this -> input -> post('cbo_list'), 
                        $this -> session -> userdata('uid'));


            if ($is_added) {
                $message = "<strong>" . $this -> input -> post('name') . "</strong> has been added!"; //good message
                $this -> json_response(TRUE, $message);

            } else {
                $message = "<strong>" . $this -> input -> post('cid') . "</strong> already exists!";
                $this -> json_response(FALSE, $message);
            }
        }
                //$this->load->view('add', array('success' => $success));
    }

is it possible when i want to clear the form after push the submit button? because i have tried many ways, and failed. do you have any suggestion for my case? ps : the outcome of this form is success message or failed in the same page.

thanks

Answer 1

try like this

<input type="text" name="name" class="input-block-level" placeholder="Name" required maxlength="40" id="name" />

     $.post(faction, fdata, function(rdata) {
              var json = jQuery.parseJSON(rdata);
              if (json.isSuccessful) {
                  $('#successMessage').html(json.message);
                  $('#success').show();
                  $('#name').val(''); // add this line
              } else {
                  $('#errorMessage').html(json.message);
                  $('#error').show();
              }