CodeIgniter form_open helper via ajax

Question

I am using CodeIgniter and jQuery .ajax function to send data from my view to my controller and update my database. Here is the problem, I use form_open() to generate code for my form, I need to use this so that in my controller I can use form validation library. Form validation library only works if you use "POST" method. But nevermind all that.

If I would use normal submit button to submit my form to controller everything would work fine. However I don't know how to use ajax in this case, what should I put in $.ajax({ url: ??? }); I need ajax to post the data to controller exactly like normal submit button would in my form. I think that in my case ajax function doesn't send request to controller like the regular submit button would.

Here is my form (I ommited inline styles and classes by purpose):

HTML

<div class="" style="">
    <h1 id="header" class="">Login/Register</h1>
    <?php echo form_open('users/sportappregister', 'data-ajax="false"'); ?>
        <div style=""><input id="email" type="text" name="email" value="email"  style=""></div>
        <div style=""><input id="pass" type="text" name="password" value="password"  style=""></div>
        <div style="" class=""><img class="" style="" src="<?php echo img_path(); ?>ikone/fb_login_icon.png" />Login with Facebook</div>
        <div id="send" style="" class=""><input type="submit"> Submit </div>
        <div id="cancel" style="" class=""> Cancel </div>
    </form>
</div>

jQuery

document ready etc...
$("#send").click(function() {
    $.ajax({
                url: "/public/index.php/users/sportappregister",
                type: "POST",
                data: {email: $("#email").val(), password: $("#pass").val()},
                dataType: "text",
                success:  function(msg){$("#header").css({"color":"red"}).html(msg);}
            });

I don't need to show you my controller as everything works fine there, problem is only here in my form page. Data isn't posted to controller correctly.

I think you have problem on the url. You could use your browser console to trace the error on ajax request. — assaqqaf, Jul 02 '14 at 10:00
First of all, you can post a static values to your controller, and check that Is that posting? — Suleman Ahmad, Jul 02 '14 at 10:34

score 0 · Answer 1 · edited Jul 03 '14 at 07:22

0

I think your url may have some problem, try this:

'url' : base_url + '/' + controller + '/test_add'

where controller is your controller name and test_add is your method/function name which is in your controller.

edited Jul 03 '14 at 07:22

julienc

19,087
17
82
82

answered Jul 02 '14 at 10:30

Hardik Vyas

500
1
7
27

score 0 · Accepted Answer · edited May 23 '17 at 10:32

I think your problem is with the form validation, not only with the AJAX. If you add the SAME url to your AJAX request, it ends in the same place (unless you explicitly write a special rule to redirect AJAX but I think this is not the case) .

When you post directly (normal submit) you send ALL THE INPUT INSIDE THE FORM. In your case, I suspect you're trying to avoid CSRF and thus, you have set in your config file (application/config/config.php) the csrf_protection:

$config['csrf_protection'] = true

When using form_open, CI creates a hidden input with a value it will internally check to be sure you're who you really say you are. When submitting the form without AJAX, you send the input, but in your AJAX request, you aren't sending it, and thus when checking for the value the validation fails. About the input hidden: http://ellislab.com/codeigniter/user-guide/libraries/security.html

To solve your issue, check in your form what the input hidden is, and add it as a var in your $.ajax data property.

More info about CSRF and how it works with CI here: Codeigniter CSRF - how does it work

UPDATE:

From: http://jerel.co/blog/2012/03/a-simple-solution-to-codeigniter-csrf-protection-and-ajax

$(function($) {

    // this bit needs to be loaded on every page where an ajax POST may happen
    $.ajaxSetup({
        data: {
            csrf_test_name: $.cookie('csrf_cookie_name')
        }
    });

    // now you can use plain old POST requests like always
    $.post('site.com/controller/method', { name : 'Jerel' });

});

csrf_test_name and csrf_cookie_name MUST be the name of your $config['csrf_token_name'] and $config['csrf_cookie_name'] set in your config file. Values posted are values set in the file by default

I understand now, though I don't want to use additionl "cookie" plugin, what is it for anyway? Is there a solution without that plugin? I only need this ajax call in one place. I wan't to add that hidden data to my ajax, how do I check what it is? — LazyPeon, Jul 02 '14 at 12:01
In other words I want to check the value (cookie hash) of that "csrf_token_name" without using some cookie plugin — LazyPeon, Jul 02 '14 at 12:10
But the author states "The only thing needed for this to work is jQuery and the Cookie plugin." I can't seem to find .cookie in jQuery documentation — LazyPeon, Jul 02 '14 at 12:26
current workaround is `ci_csrf_token: $("input[type=hidden]").val()` but as soon as I have 2 or more hidden inputs in my form this will be broken — LazyPeon, Jul 02 '14 at 12:29

CodeIgniter form_open helper via ajax

2 Answers2