CodeIgniter : AJAX post data issue

Question

i have a problem with this simple login with ajax is when i click login the page refresh when it should not -_-

My form

<div class="user_login">
            <form action="<?php echo base_url('welcome/login');?>" method="post" id="login-usr-frm">
                <label>Email / Username</label>
                <input type="text" name="user"/>
                <br />

                <label>Password</label>
                <input type="password" name="password" />
                <br />

                <div class="checkbox">
                    <input id="remember" type="checkbox" />
                    <label for="remember">Remember me on this computer</label>
                </div>

                <div class="action_btns">
                    <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                    <div class="one_half last"><input type="submit" id="lgn-btn-red" class="btn btn_red" value="Login"></div>
                </div>
            </form>

            <a href="#" class="forgot_password">Forgot password?</a>
        </div>

My jquery code

<script type="text/javascript">
    $(function (){
        $("#login-usr-frm").submit(function(event) {
            event.preventDefault();
            var url = $(this).attr('action');
            var postData = $(this).serialize();

            $.post(url, postData, function (o))

        }, 'json');

        });

    });
</script>

i can't find the issue , please help ! :)

Check out the given link. It contains similar question [Ajax form submit](http://stackoverflow.com/questions/14235596/ajax-submitting-a-form-without-refreshing-the-page) — Harigovind R, Apr 18 '15 at 09:30
please use the firebug....and check there is any jquery error coming...will loading the page...if coming then solve that first or put error jquery to bottom of the page .... — parth, Apr 18 '15 at 10:29

score 3 · Accepted Answer · edited Apr 18 '15 at 09:56

First thing you need to start Ajax using $.ajax({ //ajax code });

And Then put message in if condition to show success and error message

Try this code below:

    $(document).ready(function (){
        $("#login-usr-frm").submit(function (e){
            e.preventDefault();
            var url = $(this).attr('action');
            var method = $(this).attr('method');
            var data = $(this).serialize();

            $.ajax({
               url:url,
               type:method,
               data:data
            }).done(function(data){
               if(data !=='')
                {
                    $("#response").show('fast');
                    $("#response").effect( "shake" );
                    $('#frm_login')[0].reset();
                }
                else
                {
                window.location.href='<?php echo base_url() ?>welcome/login';
                throw new Error('go');
                } 
            });
        });

    });

first thing you need to start ajax using $.ajax({ //ajax code }); — Shakir Khan, Apr 18 '15 at 09:40
then I put message in if condition to show succes and error message — Shakir Khan, Apr 18 '15 at 09:41
correct if(data !=='') this line in your code it should be data!=" " — Saty, Apr 18 '15 at 09:44

CodeIgniter : AJAX post data issue

1 Answers1