Cannot pass value to Codeigniter controller using ajax

Question

I am having a trouble while sending a value from an input element to Codeigniter controller by using ajax.

Since I have to use WYSIWYG editor ( summernote ), thus I can just receive the input inside a <script> . However when I press the submit button, it just reloads the current page rather than the one in the controller. Here is my code:

PHP view

<section id="mainContent">    
    <form method="post">
        <input type="text" id="textbox" class="editor" name="textbox">
        <input id="submit_btn" type="button" name="sutmit" value="submit" onclick="myFunction()">
    </form>
</section>

<script type="text/javascript">
    function myFunction() {
        var markupStr = $('#textbox').summernote('code');
        alert(markupStr);
        $.ajax({
            type : 'POST',
            url : "<?= site_url().'cintern/save'; ?>",
            async : false,
            data : {'iDes': markupStr},
            success : function(data){
                alert("Success!");
            }
        });
        return false;
    };
</script>

PHP controller

public function save() 
    {
        $session_data = $this->session->userdata('logged_in');
        $data['id'] = $session_data['idlogin'];
        $data['role'] = $session_data['role'];
        $data['pageTitle'] = 'Success';
        $data['iDes'] = $this->input->post('iDes');
        $this->load->view('templates/header', $data);
        $this->load->view('internship/success', $data);
        $this->load->view('templates/footer');
    }

Please help! Thank you in advance.

Answer 1

You should use onsubmit of <form> tag instead.

<section id="mainContent">    
  <form method="post" onsubmit="myFunction()">
    <input type="text" id="textbox" class="editor" name="textbox">
    <input id="submit_btn" type="button" name="sutmit" value="submit">
  </form>
</section>

The reason is, if you handle the onclick of your <input type="submit"> , you can't intercept request of <form> tag after submit data.

I hope this can help you.

Answer 2

Since you are using JQuery for the ajax I suggest you use it to capture the submit also.

Remove the inline onclick assignment. Give the form an id attribute.

<section id="mainContent">    
    <form method="post" id="target">
        <input type="text" id="textbox" class="editor" name="textbox">
        <input id="submit_btn" type="button" name="sutmit" value="submit">
    </form>
</section>

Turn myfunction() into a 'submit' event handler

<script type="text/javascript">

$("#target").submit(function (event) {
  var markupStr = $('#textbox').summernote('code');
  //stop the normal submit from happening
  event.preventDefault();
  $.ajax({
    type: 'POST',
    url: "<?= site_url().'cintern/save'; ?>",
    async: false,
    data: {'iDes': markupStr},
    success: function (data) {
      //do stuff with data then redirect to 'after_save' 
      console.log(data.results, data.otherstuff);
      window.location.href = "http://example.com/cintern/after_save";
    }
  });
});

</script>

Controller:

public function save() 
{
   $data = $this->input->post(NULL, TRUE);
   // $data is now a semi-sanitized version of $_POST
   $_SESSION['iDes'] = $data['iDes'];
   //do other stuff with $data
   echo json_encode(['results' => "success", 'otherstuff' => $foo]);
}

  public function after_save()
  {
    $session_data = $this->session->userdata('logged_in');
    $data['id'] = $session_data['idlogin'];
    $data['role'] = $session_data['role'];
    $data['pageTitle'] = 'Success';
    $data['iDes'] = $session_data['iDes'];
    $this->load->view('templates/header', $data);
    $this->load->view('internship/success', $data);
    $this->load->view('templates/footer');
  }