Insert Data using ajax on codeigniter

Question

I am trying to insert data using ajax in my codeigniter app but every time i click the submit button the whole page is reloads and nothing happens. actually the form submit button is not working in my case. But when i have tried the same code without ajax it can submit the data into database by using action on the form.

My view :

<script type="text/javascript">
  /*submit form via ajax*/
  $("#createGrade").on('click', function (e) {
  e.preventDefault();
  $.ajax({
    url: '<?php echo base_url();?>index.php?admin/exam_grade/create',
    data: {
      grade_title: $("#grade_title").val(),
      grade_point: $("#grade_point").val(),
      mark_from: $("#mark_from").val(),
      mark_upto: $("#mark_upto").val(),
      comment: $("#comment").val()
    },
    async: 'true',
    cache: 'false',
    type: 'post',
    success: function (data) {
      //jQuery("#attendence_report_holder").html(response);
      alert("Data successfully added");
    }
  });
});

</script>

<form method="post" role="form">
  <!-- start form elements -->
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' grade_title'); ?></span>
      <input type="text" id="grade_title" name="grade_title"  autocomplete="off" class="form-control" placeholder="A+"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' grade_point'); ?></span>
      <input type="number" id="grade_point" name="grade_point"  autocomplete="off" class="form-control" placeholder="5"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' mark_from'); ?></span>
      <input type="number" id="mark_form" name="mark_from"  autocomplete="off" class="form-control" placeholder="70"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' mark_upto'); ?></span>
      <input type="number" id="mark_upto" name="mark_upto"  autocomplete="off" class="form-control" placeholder="100"  required>
    </div>
  </div>

  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><?php echo get_phrase(' comment'); ?></span>
      <textarea class="form-control" id="comment" rows="3" name="comment" placeholder="add comment"></textarea>
    </div>
  </div>

  <!-- end form elements -->
  <div class="col-xs-6 form-group">
    <button type="submit" class="btn btn-success pull-left" id="createGrade"><?php echo get_phrase('submit');?></button>
  </div>
  <div class="col-xs-6 form-group">
    <button type="reset" class="btn btn-warning pull-right"><?php echo get_phrase('reset');?></button>
  </div>
</form>

and This is my controller:::

function exam_grade($param1 = '', $param2 = '')
{
    if ($this->session->userdata('admin_login') != 1)
    redirect(base_url(), 'refresh');
    if ($param1 == 'create') {
        $data['name']        = $this->input->post('grade_title');
        $data['grade_point'] = $this->input->post('grade_point');
        $data['mark_from']   = $this->input->post('mark_from');
        $data['mark_upto']   = $this->input->post('mark_upto');
        $data['comment']     = $this->input->post('comment');
        $this->db->insert('grade', $data);
        $this->session->set_flashdata('flash_message' , get_phrase('data_added_successfully'));
    }
}

appears you forgot to wrap the click listener in document.ready so it is likely running before button exists ... or a script error is being thrown in page and the click handler isn't being activated — charlietfl
– charlietfl, Commented Jan 16, 2016 at 2:53
I have modified my ajax function but its also reloads the form after submitting my form. or in the error section it doesn't trigger any error message. Please view my updated ajax function. — Suman Dahal
– Suman Dahal, Commented Jan 16, 2016 at 3:04
put an alert inside that click handler and see if it fires. You didn't seem to add document ready — charlietfl
– charlietfl, Commented Jan 16, 2016 at 3:06
Yes i have put the document.ready actually i am using bootstrap modal window for my form view. Please review my ajax function once again. I am new to Javascript and ajax, so need some help to accomplish this issue. by using document.ready it also reloads my page after clicking my submit button. — Suman Dahal
– Suman Dahal, Commented Jan 16, 2016 at 3:13
I have tried this but its not triggering any alert instead the page is still reloads '$(document).ready(function(){ $(document).on('click', '#createGrade', function (evt) { alert("the submit button is clicked"); }); });' — Suman Dahal
– Suman Dahal, Commented Jan 16, 2016 at 3:34

Suman Dahal · Accepted Answer · 2016-01-16 04:35:47Z

@raduation i have make it working by placed the code at the end of my page or after loading jquery into the page. The alert message is displaying .. but the error message is triggered. Is my post data has any coding that helps to trigger the error message.

<script>
$("#createGrade").on('click', function (e) {
  e.preventDefault();
  $.ajax({
    url: '<?php echo base_url();?>index.php?admin/exam_grade/create',
    data: {
      grade_title: $("#grade_title").val(),
      grade_point: $("#grade_point").val(),
      mark_from: $("#mark_from").val(),
      mark_upto: $("#mark_upto").val(),
      comment: $("#comment").val()
    },
    async: 'true',
    cache: 'false',
    type: 'post',
    success: function (data) {
      //jQuery("#attendence_report_holder").html(response);
      alert("Data successfully added");
    },
    error:function(data){
      alert("error happend");
    }
  });
});
})();  
</script>

raduation · Accepted Answer · 2016-01-16 03:24:48Z

-1

Remove type="submit" from the button. This attribute causes the button to submit the form, which causes a page reload in the browser.

answered Jan 16, 2016 at 3:24

raduation

7925 silver badges11 bronze badges

9 Comments

charlietfl Over a year ago

e.preventDefault(); takes care of that issue

raduation Over a year ago

It does not take care of the issue - the submit event will not be cancelled, only the click event itself. A simple test will confirm this.

Suman Dahal Over a year ago

$(document).ready(function(){     $(document).on('click', '#createGrade', function (evt) {       e.preventDefault();         alert("the submit button is clicked");     });   });

I have tried this one as well but nothing happens and remove by type="submit" but non of them working in my case.

raduation Over a year ago

The default is "submit" if the attribute is not specified. Use type="button".

raduation Over a year ago

Seems to work for me, at least in triggering the event handler. jsfiddle.net/bp00hfm6 ... are you sure the proper URL is getting requested?

|

Collectives™ on Stack Overflow

Insert Data using ajax on codeigniter

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related