Skip to content Skip to sidebar Skip to footer
Home / Ajax / Html / Javascript / Jquery / Php

Jquery Login Form In Div Without Refreshing Whole Page

Post a Comment
I have a php-file that i want to put to work in a div:
style="display: <?php echo $display; ?>;"> <input type='hidden' name='actionLogin' id='actionLogin' value='1'/> User: <input type="text" name="user" id="user" /><br /> Password: <input type="password" name="passwd" id="passwd" /><br /> <input type="submit" name="login" id="login" value="Login" /> </form> <?php } function logoutForm($isHidden) { $display = ($isHidden) ? "none" : "block"; ?> <form method="POST" action="" name="logoutForm" id="logoutForm" style="display: <?php echo $display; ?>;"> <input type='hidden' name='actionLogout' id='actionLogout' value='1'/> Logout: <input type="submit" value="Log out" name="logout" id="logout" /> </form> <?php } function loggedUser() { if(isset($_SESSION['user']) && isset($_SESSION['passwd'])) { return $_SESSION; } else { return array(); } } ?> <html> <head> <title>Form</title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript"> $(document).ready(function(){ $('#loginForm, #logoutForm').live('submit', function(e) { e.preventDefault(); $.post('loginLogout.php', $(this).serialize(), function (data, textStatus) { if (data == "true") { //login successful $("#loginForm").hide(); $("#logoutForm").show(); } else { $("#loginForm").show(); $("#logoutForm").hide(); } }); return false; }); }); </script> </head> <body> <div id="logindiv"> <?php $loggedUser = loggedUser(); if(!empty($loggedUser)) { loginForm(true); //hidden logoutForm(false); //not hidden } else { loginForm(false); logoutForm(true); } ?> </div> </body> </html>

Code for loginLogout.php

<?php
session_start(); 

if(isset($_POST['actionLogin']) && isset($_POST['user']) && isset($_POST['passwd']) &&
        $_POST['user'] == "admin" && $_POST['passwd'] == "admin") {
    $_SESSION['user'] = $_POST['user'];
    $_SESSION['passwd'] = $_POST['passwd'];
    echo "true"; //successful log in

} else if(isset($_POST['actionLogout']) && isset($_SESSION)) {
    foreach($_SESSION as $k => $v) {
        unset($_SESSION[$k]);
    }
    echo "false"; //successful log out
}
?>

Solution 2:

Change your code to process the form submission before it prints out the form. It might seem counter intuitive, but unless you process all input first, the HTML you have printed is already obsolete when it is ready to be sent to the browser.

You also won't need the refresh header if you use ajax.

Just change your code like this:

function loginLogout() {
    if(isset($_POST['login']) && isset($_POST['user']) && isset($_POST['passwd']) &&
            $_POST['user'] == "admin" && $_POST['passwd'] == "admin") {
        $_SESSION['user'] = $_POST['user'];
        $_SESSION['passwd'] = $_POST['passwd'];
    }
    if(isset($_POST['logout']) && isset($_SESSION)) {
        foreach($_SESSION as $k => $v) {
            unset($_SESSION[$k]);
        }
    }
    $loggedUser = loggedUser();
    if(!empty($loggedUser)) {
        logoutForm();
    } else {
        loginForm();
    }
}

Post a Comment for "Jquery Login Form In Div Without Refreshing Whole Page"