php Codeigniter and jquery ajax - php

Question

I want to call the codeigniter controller with ajax after the login. But when I execute it, the login page is only refreshed and ajax url isn't calling controller function of codeigniter.
I don't understand what happened. Please help?
Below is my code
function ValidateReg() {
var username = document.getElementById("inputName").value;
var password = document.getElementById("inputPassword").value;
$.post("<?php echo site_url('Panel/login') ?>", {checkUser: username, checkPassword: password, action: "validateUser"},
function (data) {
var result = data + "";
if (result.lastIndexOf("Success" > -1)) {
$.ajax({
url: "<?php echo site_url('Dashboard/state'); ?>",
type: 'POST',
complete: function (done) {
console.log("Finished.")
}
});
}
});
}
Here Panel and Dashboard are my two different Controllers

Answer 1

It gets refreshed because it's a submit button and it must be inside form. So it submits the form on click event.
What you need to do is make your function to return false on click of the button so that page doesn't get refreshed.
Update your HTML like this,
<button type="submit" class="btn button text-uppercase" onclick="return ValidateReg();">Login </button>
And your JS function would look something like this:
function ValidateReg() {
var username = document.getElementById("inputName").value;
var password = document.getElementById("inputPassword").value;
$.post("<?php echo site_url('Panel/login') ?>", {checkUser: username, checkPassword: password, action: "validateUser"},
function (data) {
var result = data + "";
if (result.lastIndexOf("Success" > -1)) {
$.ajax({
url: "<?php echo site_url('Dashboard/state'); ?>",
type: 'POST',
complete: function (done) {
console.log("Finished.")
}
});
}
});
return false;
}

Answer 2

If what you want to do is go to the page Dashboard/state then using ajax is the wrong approach. You need to redirect to that page instead.
$.post("<?php echo site_url('Panel/login') ?>", {checkUser: username, checkPassword: password, action: "validateUser"},
function (data) {
var result = data + "";
if (result.lastIndexOf("Success" > -1))
{
console.log("Finished.");
window.location = "<?php echo site_url('Dashboard/state'); ?>";
}
}
);
The other way to redirect with javascript would be done like this
window.location.replace("<?php echo site_url('Dashboard/state'); ?>");
which is probably better because it does not keep the originating page in the session history.

Answer 3

function ValidateReg() {
var username = document.getElementById("inputName").value;
var password = document.getElementById("inputPassword").value;
$.post("<?php echo site_url('Panel/login') ?>", {checkUser: username, checkPassword: password, action: "validateUser"},
function (data) {
var result = data + "";
if (result.lastIndexOf("Success" > -1)) {
$.ajax({
url: "<?php echo site_url('Dashboard/state'); ?>",
type: 'POST',
success: function (done) {
console.log("Finished.")
}
});
}
});
return false;
}