Codeigniter & Jquery Ajax, Post data not going through

Question

I am having problem getting the post data in the controller when I send the post request via Jquery Ajax, I have checked with firebug and the form post data is being submitted, but in the controller when I do print_r($_POST); it returns an empty array. What could be wrong ?

Here is the relevant code :

FORM HTML

<form id="contact-form" class="form-horizontal subscribe" accept-charset="utf-8" action="<?= base_url ( 'Contact/' ); ?>" method="post"> <!--Name--> <div class="form-group"> <label class="sr-only" for="name">Name</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div> <input id="name" type="text" class="form-control validate" name="name" placeholder="Your full name" value=""> </div> </div> <!--Email--> <div class="form-group"> <label class="sr-only" for="email">Email</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div> <input id="email" type="text" class="form-control validate" name="email" placeholder="Your email address" value=""> </div> </div> <!--Message--> <div class="form-group"> <label class="sr-only" for="message">Message</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div> <textarea id="message" name="message" class="form-control" rows="3" placeholder="Message"></textarea> </div> </div> <!--Submit Button--> <div class="form-group text-right"> <input id="contact_us" type="hidden" name="contact_us" value="Submit" /> <button type="submit" id="contact_us" class="btn btn-warning" name="contact_us" value="Submit"> Send &nbsp;<span class="glyphicon glyphicon-send" aria-hidden="true"></span> </button> </div> </form>

JAVASCRIPT

<script> $( '#contact-form' ).submit ( function ( event ) { event.preventDefault ( ); event.stopPropagation ( ); var $scriptUrl = $( '#contact-form' ).attr ( 'action' ); $.ajax ( { method : 'POST', url : $scriptUrl, data : $( this ).serialize ( ), cache : false, processData: false, contentType: false, dataType : 'json', success : function ( data, textStatus, jqXHR ) { if ( data.success === true ) { alert ('success'); } else { alert ('failure'); } }, error : function ( jqXHR, textStatus, errorThrown ) { alert ( jqXHR.responseText );/*This returns the empty array*/ } } ); } ); </script>

Controller (index function) (http://mysite/Contact - Localhost-wamp)

public function index ( ) { print_r($_POST); }

Veshraj Joshi · Accepted Answer · 2016-09-14 05:00:54Z

1

change data : $( this ).serialize ( ), to data : new FormData($('#contact-form')[0]) remove dataType : 'json' if this didnot work for you please let me know?

edited Sep 14, 2016 at 5:00

answered Sep 14, 2016 at 4:53

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

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

2 Comments

Veshraj Joshi Over a year ago

this will work for image upload to ... serialize() may have problem while submitting image...

StudentX Over a year ago

changing data : $( this ).serialize ( ), to data : new FormData($('#contact-form')[0]) Did work, but can you please explain $('#contact-form')[0] ?

PHP Geek · Accepted Answer · 2016-09-14 04:38:37Z

If you are using jquery then you should use the syntax as follows:

$.post('url',$("#contact-form").serialize(),function(data){ //here take action on returned data });

parth · Accepted Answer · 2016-09-14 06:54:56Z

1

You just change the
data : $(this).serialize(),
to
data : $('#contact-form').serialize(),

In ajax $this not working because when you call $this in ajax then $this call always parent object ajax.

edited Sep 14, 2016 at 6:54

parth

1,9203 gold badges22 silver badges32 bronze badges

answered Sep 14, 2016 at 4:47

Kumar Rakesh

2,7082 gold badges20 silver badges39 bronze badges

1 Comment

StudentX Over a year ago

If firebug is showing the post data being transmitted, it means data : $('#contact-form').serialize (), is working. I tried your changes anyway, but that too didn't work :(

Brad · Accepted Answer · 2016-09-14 18:54:25Z

Student x. This may not be your answer, but this is all you need to pass a form

$(function() { "use strict"; $("#form1").submit(function() { var data = $("#form1").serialize(); //alert(data); return false; $.ajax({ url: "/forms/form1", data: data, type: "POST", success: function(msg) { if (msg) { $("#display").html(msg); } else { $("#display").text("nothing came back For some reason"); } } }); return false; });

});

You can also use this. I use this for all my forms, then I only need 1 script. Of course you would change the success. Just name all your forms with an ID of ajax

(function() { "use strict"; $('form#ajax').on('submit', function() { var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); $.ajax({ url: url, type: type, data: data, success: function(response) { $('#display').html(response).delay(8000).fadeOut(1000); } }); return false;

}); })(jQuery);

Collectives™ on Stack Overflow

Codeigniter & Jquery Ajax, Post data not going through

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Related