How to pass form data to PHP via AJAX call (CodeIgniter Framework)

Question

I have the following HTML structure:

<form method="POST">
    Name : <input id="asgname" type="text"> <br>
    Description : <input id="asgdescription" type="text"> <br>
    <a href="#" id="asgsave" class="assignment-action">Save</a>
</form>

I want that on clicking the save button, the form values are sent to the server via AJAX call. For that, I've attached the click event via following command

$("#asgsave").click(save_assignment);

save_assignment is also a javascript function defined as follow:

function save_assignment() {
     return $.ajax({
           type: "POST",
           url:  "<?php echo base_url();?>index.php/user/save_assignment",
           data: $('form').serialize(),
                success: function(response) {
                    alert('Form was submitted');
                },
                error: function(error) {
                    alert("Error");
                }
     });
}

The above is not working. So I tried the following approach as well:

function save_assignment() {
     var formvalues = {
            name       : $('#asgname').text(),
            descripion : $('#asgdescription').text(),
     };
     return $.ajax({
           type: "POST",
           url:  "<?php echo base_url();?>index.php/user/save_assignment",
           data: {values : formvalues},
                success: function(response) {
                    alert('Form was submitted');
                },
                error: function(error) {
                    alert("Error");
                }
     });
   }

But this is also not working.

Can anyone please guide me as to why are the above methods not working and what is the correct way to do so ?

EDIT-1 :

By not working, I mean: in the first case ($('form').serialize() approach) the data is not being sent to the server. I checked it via chrome and firefox debugger that there was no post data sent corresponding to the form.

And in the second case, empty values are being sent. i.e. the post data sent to server is like following:

values[name]
values[description]

i.e. the above values are empty.

EDIT-2:

By logging on firephp, I have confirmed that the save_assignment PHP script is BEING EXECUTED. Thus ajax call is working fine but it is NOT passing the data correctly.

what is this is also not working mean? You get no error, you get no response etc; Are you using Chrome Inspector to see your ajax call and its response? — Jakub
– Jakub, Commented Dec 19, 2013 at 8:01
when all else fails, troubleshoot from the front to the back (js -> php). Don't go into PHP unless you see errors coming back from server side (using inspector). If you dig into both PHP + JS at once, you are bound to miss something. console.log() is your friend, use it to output all values you think you are sending. — Jakub
– Jakub, Commented Dec 19, 2013 at 8:22

Rohan Kumar · Accepted Answer · 2013-12-19 08:03:44Z

1

Try to use event.preventDefault() like,

$("#asgsave").on('click',function(e){
   e.preventDefault();
   save_assignment();
});

or use return false after ajax call like,

function save_assignment() {
    //ajax code
    return false;
}

answered Dec 19, 2013 at 8:03

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

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

Comments

MaiKaY · Accepted Answer · 2013-12-19 08:15:35Z

0

you have to use callbacks in the success function, cause ajax is asynchronously

edit

have you already tried console.log('foo'); in your function? so you are able to test if the function is called ;)

edit 2

add the following line to your ajax options

dataType: "json"

edited Dec 19, 2013 at 8:15

answered Dec 19, 2013 at 8:01

MaiKaY

4,48223 silver badges28 bronze badges

Comments

Jakub · Accepted Answer · 2013-12-19 08:19:24Z

0

You could just serialize your form values:
http://api.jquery.com/serialize/

However, looking over your code, I'll take a stab and guess that you are not getting and sending your values properly. Using jQuery, you grab a value from input like so:

$('#idofInput').val();

http://api.jquery.com/val/

You are doing: $('#asgname').text()

Format your data properly: data : { foo : 'bar', bar : 'foo' }

One last guess, make sure your CodeIgniter config has CSRF protection disabled, otherwise you would need to pass: $this->security->get_csrf_token_name() & $this->security->get_csrf_hash();

answered Dec 19, 2013 at 8:19

Jakub

20.5k8 gold badges67 silver badges93 bronze badges

Collectives™ on Stack Overflow

How to pass form data to PHP via AJAX call (CodeIgniter Framework)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related