CODEWITHSUNDEEP
phpjqueryajaxcodeigniter
LazyPeon
LazyPeon

Reputation: 339

CodeIgniter form_open helper via ajax

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.

Upvotes: 1

Views: 1948

Answers (2)

Hardik Vyas
Hardik Vyas

Reputation: 500

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.

Upvotes: 0

Federico J.
Federico J.

Reputation: 15912

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

Upvotes: 0

Related Questions