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
– assaqqaf, Commented Jul 2, 2014 at 10:00
First of all, you can post a static values to your controller, and check that Is that posting? — Suleman Ahmad
– Suleman Ahmad, Commented Jul 2, 2014 at 10:34

Community · Accepted Answer · 2017-05-23 10:32:22Z

0

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

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 2, 2014 at 10:30

Federico J.

16k7 gold badges35 silver badges54 bronze badges

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

5 Comments

LazyPeon Over a year ago

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 Over a year ago

In other words I want to check the value (cookie hash) of that "csrf_token_name" without using some cookie plugin

LazyPeon Over a year ago

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

Federico J. Over a year ago

I'm sorry, so quick commenting

LazyPeon Over a year ago

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

julienc · Accepted Answer · 2014-07-03 07:22:24Z

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 3, 2014 at 7:22

julienc

20.4k19 gold badges87 silver badges86 bronze badges

answered Jul 2, 2014 at 10:30

Hardik Vyas

5001 gold badge8 silver badges27 bronze badges

Collectives™ on Stack Overflow

CodeIgniter form_open helper via ajax

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related