Passing form data to controller using AJAX and jquery with Codeigniter

Question

I am trying to post the data from this form into the database. I have tried some tutorials with no success. Here is my code. Any ideas?

View:

<form method="post" name="myForm1" id="myForm1" enctype="multipart/form-data" >
Email: <input type="text" name="email" id="email">
Question: <input type="text" name="qText" id="qText">
<input id="submitbutton" type="submit">
</form>

AJAX (in the view, right below the form)

<script type='text/javascript' language='javascript'>

$("#submitbutton").click(function(){


$.ajax({
       url:'http://localhost:8888/index.php/trial/insert_into_db',
       type: 'POST',
       data: $("#myForm1").serialize(),
       success: function(){
           alert("success");
       },
       error: function(){
           alert("Fail")
       }
   });
   e.preventDefault();
});


</script>

Controller

  function insert_into_db(){
    $this->load->model('insert_db');
    $this->insert_db->insertQ();  
}

Model

 class Insert_db extends CI_Model{

    function insertQ(){
        $email = $_POST['email'];
        $qText = $_POST['qText'];
        $this->db->query("INSERT INTO questions VALUES('','$email','$qText','','')");
    }
 }

Can you give more information about what happens on the button click? Did you check if an AJAX event is triggered? Also Check HHTP events to see if an Ajax post is made. — Clain Dsilva
– Clain Dsilva, Commented Jan 8, 2014 at 19:13
If you use Firefox you could use web console tool, from tools > web developer > web console. Or download the "Live HTTP Headers" add on to watch the HTTP transactions going on. There are several other tools, but these are the simple one. I am not biased to any of the tools. — Clain Dsilva
– Clain Dsilva, Commented Jan 8, 2014 at 19:33

Damien Pirsy · Accepted Answer · 2014-01-08 19:44:40Z

5

As @David Knipe already said, you should wait for the DOM to be ready before trying to access one of its elements. Moreover, you likely have an e is undefined error, since you're not passing the event reference to the click handler:

<script>   //no need to specify the language
 $(function(){
  $("#submitbutton").click(function(e){  // passing down the event 

    $.ajax({
       url:'http://localhost:8888/index.php/trial/insert_into_db',
       type: 'POST',
       data: $("#myForm1").serialize(),
       success: function(){
           alert("success");
           $('#email').val('');
           $('#qText').val('');
       },
       error: function(){
           alert("Fail")
       }
   });
   e.preventDefault(); // could also use: return false;
 });
});
</script>

To be more complete, your query is vulnerable, and you might be getting an error there. Make use of the advantage of having a framework beneath you:

function insertQ(){
    $email = $this->input->post('email');
    $qText = $this->input->post('qText');
    $this->db->insert('questions', array('email' =>$email, 'text' => $text));
}

^_ I'm guessing the column names since you didn't specify them

edited Jan 8, 2014 at 19:44

answered Jan 8, 2014 at 19:21

Damien Pirsy

25.5k8 gold badges72 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2796352 Over a year ago

Thank you very much @Damien Pirsy. I implemented this code and it is working fine. There is one more thing: Do you know how to clear the fields after submission? Right now I click submit, the data is correctly sent to the DB, but the page doesnt change, and the input fields still have the text within them. Thank you for any extra info you can provide :)

David Knipe Over a year ago

Why did you delete the $(function() { line at the start?

Damien Pirsy Over a year ago

@DavidKnipe Ops, I added the comment after <script> and I deleted it accidentally, thanks!

Damien Pirsy Over a year ago

@user2796352 You could just set their value back to '', see updated answer.

David Knipe · Accepted Answer · 2014-01-08 19:24:49Z

1

Looks like you've forgotten to use $.ready. As it is, the javascript runs before the page has loaded, which means it can't find the page element from $("#submitbutton"). Try this:

$(document).ready(function() {
    $("#submitbutton").click(function(){
    ....
    ....
});

edited Jan 8, 2014 at 19:24

answered Jan 8, 2014 at 19:15

David Knipe

3,5031 gold badge21 silver badges21 bronze badges

5 Comments

Damien Pirsy Over a year ago

Isn't $(document).ready(function(){}) or just $(function(){}) ?

user2796352 Over a year ago

I have added the $(document).ready(function(){ code and it is still giving me the error function response @damien pirsy

user2796352 Over a year ago

@David Knipe I tried using $.ready(function() { and I received no response from the AJAX.

David Knipe Over a year ago

@Damien You're right, either of those will work. I've changed my answer. user2796352, Damien's answer is the same but clearer :-)

Damien Pirsy Over a year ago

@user2796352 You might have other errors somewhere, your alert isn't helping in debugging.

Collectives™ on Stack Overflow

Passing form data to controller using AJAX and jquery with Codeigniter

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest