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: <?phpecho$display; ?>;"><inputtype='hidden'name='actionLogin'id='actionLogin'value='1'/> User: <inputtype="text"name="user"id="user" /><br /> Password: <inputtype="password"name="passwd"id="passwd" /><br /><inputtype="submit"name="login"id="login"value="Login" /></form><?php } functionlogoutForm($isHidden) { $display = ($isHidden) ? "none" : "block"; ?><formmethod="POST"action=""name="logoutForm"id="logoutForm"style="display: <?phpecho$display; ?>;"><inputtype='hidden'name='actionLogout'id='actionLogout'value='1'/> Logout: <inputtype="submit"value="Log out"name="logout"id="logout" /></form><?php } functionloggedUser() { if(isset($_SESSION['user']) && isset($_SESSION['passwd'])) { return$_SESSION; } else { returnarray(); } } ?><html><head><title>Form</title><scripttype='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script><scripttype="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(); } }); returnfalse; }); }); </script></head><body><divid="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

} elseif(isset($_POST['actionLogout']) && isset($_SESSION)) {
    foreach($_SESSIONas$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:

functionloginLogout() {
    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($_SESSIONas$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"