CodeIgniter: Avoiding Refresh after Submitting Form?

Question

I am basically submitting form values to my controller and I am using CodeIgniter Framework. However, when I send the values to my controller's function, the page gets changed to the controller and leaves the index.php (current page)

index.php:

<form action="<?php echo base_url();?>index.php/LoginController/loginuser" method="post">
            <input id="login_emailbox" name="login_emailbox" type="text" class="form-control welcome-login-email" placeholder="Email" required="">
            <input id="login_passbox" name="login_passbox" type="password" class="form-control welcome-login-password" placeholder="Password" required="">
            <button id="loginbtn" type="submit" class="btn btn-info" style="margin-left: 30px">Login</button>
</form>

LoginController.php:

class LoginController extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
    }

    function index()
    {
        $this->load->helper('html');
        $this->load->helper('url');
        $this->load->view('header');
        $this->load->view('footer');

        $this->load->view('index.php');
    }


    public function loginuser(){
        echo $_POST['login_emailbox'];
        echo $_POST['login_passbox'];
    }

}

Steps I take during Runtime:

1) I browse to the index.php via => http://localhost/codeig/index.php/LoginController/index

2) Fill the form and hit submit. Values are submitted to the function: loginuser

3) Page gets redirected to the 'loginuser' function

How can I avoid this and basically send the values to the loginuser function in the controller without refreshing the current page?

To do a form submit without a page reload needs ajax. Here's a simple prototype: stackoverflow.com/questions/28977449/… — Vladimir Ramik
– Vladimir Ramik, Commented Mar 6, 2016 at 4:57
The problem is, I need to write the code referring to how CodeIgniter's URL mapping works. I need to specify the contoller name, function in the URL (example in the question). The SO question you linked doesn't address CodeIgniter @VladimirRamik — Jay
– Jay, Commented Mar 6, 2016 at 5:00
It should work just fine - you simply need an ajax call that goes to: <?php echo base_url();?>index.php/LoginController/loginuser and have that controller handle the form — Vladimir Ramik
– Vladimir Ramik, Commented Mar 6, 2016 at 5:02

santosh · Accepted Answer · 2016-03-06 05:37:58Z

5

<form action="" method="post" id="myForm">
            <input id="login_emailbox" name="login_emailbox" type="text" class="form-control welcome-login-email" placeholder="Email" required="">
            <input id="login_passbox" name="login_passbox" type="password" class="form-control welcome-login-password" placeholder="Password" required="">
            <button id="loginbtn" type="submit" class="btn btn-info" style="margin-left: 30px">Login</button>
</form>

Your Jquery

 $('#loginbtn').on('click',function(e){
e.preventDefault();
    var data = $('#myForm').serialize();
    var base_url='<?php echo base_url(); ?>'
    $.ajax({
    url:base_url+'index.php/LoginController/loginuser',
    type:'POST',
    data:data,
    success:function(data){

    alert(data); // here what you want to do with response
    }
    }); 
return false;


   });

edited Mar 6, 2016 at 5:37

answered Mar 6, 2016 at 5:11

santosh

7875 silver badges17 bronze badges

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

7 Comments

Jay Over a year ago

And I think I should set the button's type as 'button' instead of submit?

santosh Over a year ago

doesn't matter.. event is firing on click of loginbtn

Jay Over a year ago

Hmmm weird. It refreshes if I add submit as the type

Jay Over a year ago

Sorry brov, it refreshes still :/

Jay Over a year ago

Oh snap, I think none of my jquery related code doesn't work. I have referenced the CDN link as: <script src="ajax.googleapis.com/ajax/libs/jquery/1.12.0/…>. Is this correct in terms of CodeIgniter?

|

Mohsin Mujawar · Accepted Answer · 2018-09-02 03:20:24Z

    <form>
                    <input id="login_emailbox" name="login_emailbox" type="text" class="form-control welcome-login-email" placeholder="Email" required="">
                    <input id="login_passbox" name="login_passbox" type="password" class="form-control welcome-login-password" placeholder="Password" required="">
                    <button id="loginbtn" type="submit" class="btn btn-info" style="margin-left: 30px">Login</button>
    </form>

<script>
$(document).ready(function(){
              $('#loginbtn').click(function(){
                    var login_emailbox = document.getElementById('login_emailbox').value;

                    $.ajax({
                        url:'<?=base_url()?>index.php/Controller/function',
                        method: 'post',
                        data: {login_emailbox: login_emailbox},
                        dataType: 'json',
                        success: function(response){
alert('data updated'); 
                        }
                    });
                }); 
});
</script>

Collectives™ on Stack Overflow

CodeIgniter: Avoiding Refresh after Submitting Form?

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related