Javascript 在同一页面中提交PHP表单，包括侧边导航菜单_Javascript_Php_Jquery_Html_Form Submit

Javascript 在同一页面中提交PHP表单，包括侧边导航菜单

javascript php jquery html

Javascript 在同一页面中提交PHP表单，包括侧边导航菜单,javascript,php,jquery,html,form-submit,Javascript,Php,Jquery,Html,Form Submit,我正在创建一个php项目，并创建了一个侧栏菜单，在其中我可以在使用jqueryload（）函数加载表单的同一页面中提交表单。我尝试使用method=“GET”和action=“POST”方法，虽然表单提交到同一页面，但包含的页面似乎消失了我想要实现的是，无论何时提交表单，我都希望显示侧面导航菜单。这是我的代码，我已经按需要粘贴了它们这是首先加载的页面。这是我的项目开始的页面 Logged_In.php <?php $User_Info=array("User_Name" => "

我正在创建一个php项目，并创建了一个侧栏菜单，在其中我可以在使用jquery

load（）

函数加载表单的同一页面中提交表单。我尝试使用

method=“GET”

和

action=“POST”

方法，虽然表单提交到同一页面，但包含的页面似乎消失了我想要实现的是，无论何时提交表单，我都希望显示侧面导航菜单。

这是我的代码，我已经按需要粘贴了它们

这是首先加载的页面。这是我的项目开始的页面

Logged_In.php

<?php
$User_Info=array("User_Name" => "anirban", "User_ID" => "90royanirban", "User_Gender" => "Mr");
$User_ID=$User_Info['User_ID'];
?>

<html>
    <head>
        <title>Welcome</title>
        <script src="assets/scripts/jquery-3.4.1.min.js"></script>
        <style>
            body {
                transition: background-color .5s;
            }

            .Leftnav {
                height: 100%;
                width: 0;
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: #FFFFCC;
                overflow-x: hidden;
                transition: 0.5s;
                padding-top: 5%;
            }

            .Leftnav a {
                margin-top: 10px;
                padding: 8px 8px 8px 10px;
                text-decoration: none;
                font-size: 22px;
                color: #0066cc;
                display: block;
                transition: 0.3s;
            }

            .Leftnav a:hover, .Leftnav a:active {
                color: white;
                font-size: 23px;
                transition-duration: 0.5s;
                background-color: #666666;
                -webkit-transition-duration: 0.5s;
            }

            a:hover {
                cursor: pointer;
            }

            .Leftnav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 35px;
                margin-left: 50px;
            }

            .Leftnav .closebtn:hover {
                color: green;
                font-weight: bold;
                background-color: #FFFFCC;
                font-size: 45px;
            }

            #main_content {
                transition: margin-left .5s;
                padding: 16px;
            }

            @media screen and (max-height: 450px) {
                .sidenav {padding-top: 15px;}
                .sidenav a {font-size: 18px;}
            }
        </style>
    </head>
    <body id="bodycolor1" onload="startTime()">
        <script type="text/javascript" src="assets/scripts/utility_jscript.js"></script>
        <link rel="stylesheet" type="text/css" href="assets/css/CSSFile.css" property="">
        <?php include 'LeftNav.php'; ?>
        <?php include 'MainContent.php'; ?>

        <script>
            function openNav() {
                document.getElementById("LeftNav").style.width = "250px";
                document.getElementById("main_content").style.marginLeft = "250px";
                document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            }

            function closeNav() {
                document.getElementById("LeftNav").style.width = "0";
                document.getElementById("main_content").style.marginLeft = "0";
                document.body.style.backgroundColor = "cornsilk";
            }
        </script>
        <script>
            $(document).ready(function() {
                load_Div("CurrentReservations.php", "<?php echo $User_ID; ?>");
                //Replace CurrentReservations.php
                $("#nav_1").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Explore all current reservations.");
                        load_Div("CurrentReservations.php", "<?php echo $User_ID; ?>");
                    });
                });

                $("#nav_2").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Book a new reservation.");
                        load_Div("NewReservation.php", "<?php echo $User_ID; ?>");
                    });
                });

                $("#nav_3").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Edit your account related settings.");
                        load_Div("Account_Settings.php", "<?php echo $User_ID; ?>");
                    });
                });

                function load_Div(pageName, ID) {
                    closeNav();
                    $('#MainContents').prepend($('<div id="content_div" style="display: none;">Contents</div>'));
                    $("#content_div").load(pageName.toString(), { User_ID: ID}, function() {
                        $("#content_div").fadeIn({ duration: 800, queue: false }).css('display', 'none').slideDown(800);
                    });
                }
            });
        </script>
    </body>
</html>

<?php $User_ID=$_POST['User_ID']; ?>
<script>
    $(document).ready(function () {

        $("#change_pwd").click(function () {
            $("#content_div").fadeOut(500, function () {
                $(this).remove();
                $("#head1").text("Change your account password.");
                load_Div("Change_Pwd.php", "<?php echo $User_ID; ?>");
            });
        });

        $("#del_account").click(function () {
            $("#content_div").fadeOut(500, function () {
                $(this).remove();
                $("#head1").text("Delete your account permanently.");
                load_Div("Delete_Account.php", "<?php echo $User_ID; ?>");
            });
        });

        function load_Div(pageName, ID) {
            closeNav();
            $('#MainContents').prepend($('<div id="content_div" style="display: none;">Contents</div>'));
            $("#content_div").load(pageName.toString(), { User_ID: ID }, function () {
                $("#content_div").fadeIn({duration: 800, queue: false}).css('display', 'none').slideDown(800);
            });
        }
    });
</script>
<form method="GET" style="text-align: center; margin-top: 3.5em;">
    <font size="7" id="HeadingStyle1">Account Settings</font><br/><br/>
    <font color="Brown" size="6">Login ID</font><br><br>
    <?php echo '<font color="#840046" size="4">' . strtoupper($User_ID)."</font>"; ?><br><br><br><br>
    <a id="change_pwd" class="LinkShadow LinkStyle1" title="Change your current password." >Change Password</a>&emsp;
    <a id="del_account" class="LinkShadow LinkStyle2" title="Delete your account permanently.">Delete Your Account</a>
</form>

<div id="LeftNav" class="Leftnav">
    <a href="javascript:void(0)" style="" class="closebtn" onclick="closeNav()" title="Close menu">&times;</a>
    <a id="nav_1" title="Explore your reservations">Current Reservations</a>
    <a id="nav_2" title="Book a reservation">Book a Ticket</a>
    <a id="nav_3" title="Change account settings">Account settings</a>
    <a href="HomePage.php?Logout=1" target="_top" onclick="alert('You\'ve been logged out.');">Sign Out</a>
</div>

<div id="main_content">
    <div style="text-align: left;">
            <font size="20" color="#2E64FE">Welcome, <?php echo $User_Info['User_Gender'].". "; $Arr=str_split($User_Info['User_Name'],1);
                echo strtoupper($Arr[0]);for($i=1;$i<strlen($User_Info['User_Name']);$i++){ echo $Arr[$i];}?></font>
        <div style="float: right;" title="Date and Time" id="HoverDateTime">
            <?php date_default_timezone_set("Asia/Kolkata");
            echo "Date: <font color='Teal' face='Helvetica'>".date(" d \of F Y ")."</font>"; ?>
            &nbsp;<font color='RoyalBlue' face='verdana'><font id="s"></font><?php echo date(" A");?></font>
        </div>
    </div>
    <p><font size="5" color="Red" face="Calibri" id="head1">Click on the '&#9776;' icon to open the side navigation menu.</font></p>
    <span style="font-size:30px; cursor:pointer;" onclick="openNav()" title="Open menu">&#9776; Options</span>
    <div id="MainContents" />
</div>

<?php
//Create new Reservation
?>

<?php
//This page shows current reservations;
?>

<?php
//This page shows changing password options.
?>

<?php
if(isset($_GET['B1'])) {
    //I WANT TO SUBMIT THE FORM HERE to do some operation, at least in this page. BUT IT GOES BACK TO logged.In.php page again!
}
?>
<form method="GET" action="Delete_Account.php"  style="text-align: center; margin-top: 3.5em;">
    <font size="7" id="HeadingStyle1">Delete Your Account</font><br/><br/>
    <font size="4" color="blueviolet">
    You are about to permanently delete your account.<font size='4' color='Red'> Are you sure?</font><br/>
    If so, fill the following:</font><br/><br/>
    <font size="4" class="LabelCol">
        <label for="cpw">Current Password: </label>
    </font><input type="password" name="InpPwd" style="width: 175px; border-radius: 4px;"
                  title="Enter your current password to proceed." id="cpw" required=""/><br/><br/>
    <button type="submit" name="B1" class="RedBtn">Proceed</button>
    <br/><br/><font color="red">WARNING: </font>
    <font color="#0066cc">
    Deleting your account will also PERMANENTLY delete all your saved data, including cancellation of all your booked reservations.</font>
    <br/><font size="2" color="gray">HINT: You can click the 'Current Reservations' link on side panel to go back.</font>
</form>


欢迎
身体{
过渡：背景色。5s；
}
.左导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#FFFFCC；
溢出x：隐藏；
过渡：0.5s；
垫面：5%；
}
.左导航a{
边缘顶部：10px；
填充：8px 8px 8px 10px；
文字装饰：无；
字体大小：22px；
颜色：#0066cc；
显示：块；
过渡：0.3s；
}
.Leftnav a:悬停，.Leftnav a:活动{
颜色：白色；
字体大小：23px；
过渡时间：0.5s；
背景色：#666666；
-webkit转换持续时间：0.5s；
}
a:悬停{
光标：指针；
}
.Leftnav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：35px；
左边距：50像素；
}
.Leftnav.closebtn:悬停{
颜色：绿色；
字体大小：粗体；
背景色：#FFFFCC；
字体大小：45px；
}
#主要内容{
过渡：左边距。5s；
填充：16px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
函数openNav（）{
document.getElementById（“LeftNav”）.style.width=“250px”；
document.getElementById（“主要内容”）.style.marginLeft=“250px”；
document.body.style.backgroundColor=“rgba（0,0,0,0.4）”；
}
函数closeNav（）{
document.getElementById（“LeftNav”）.style.width=“0”；
document.getElementById（“主要内容”）.style.marginLeft=“0”；
document.body.style.backgroundColor=“cornsilk”；
}
$（文档）.ready（函数（）{
load_Div（“CurrentReservations.php”和“”）；
//替换CurrentReservations.php
$（“#导航1”）。单击（函数（）{
$（“#content_div”）.fadeOut（500，function（）{
$（this.remove（）；
$（“#头1”）.text（“浏览所有当前保留”）；
load_Div（“CurrentReservations.php”和“”）；
});
});
$（“#导航2”）。单击（函数（）{
$（“#content_div”）.fadeOut（500，function（）{
$（this.remove（）；
$（“#头1”）.text（“预订新预订”）；
load_Div（“NewReservation.php”，”）；
});
});
$（“#nav_3”）。单击（函数（）{
$（“#content_div”）.fadeOut（500，function（）{
$（this.remove（）；
$（“#头1”）.text（“编辑您的帐户相关设置”）；
load_Div（“Account_Settings.php”，”）；
});
});
函数加载分区（页面名称、ID）{
closeNav（）；
$（'MainContents'）。前置（$（'Contents'）；
$（“#content_div”）.load（pageName.toString（），{User_ID:ID}，function（））{
$（“#content_div”）.fadeIn（{duration:800，queue:false}）.css（'display'，'none'）.slideDown（800）；
});
}
});

运行此文件所需的其他页面

Account\u Settings.php

<?php
$User_Info=array("User_Name" => "anirban", "User_ID" => "90royanirban", "User_Gender" => "Mr");
$User_ID=$User_Info['User_ID'];
?>

<html>
    <head>
        <title>Welcome</title>
        <script src="assets/scripts/jquery-3.4.1.min.js"></script>
        <style>
            body {
                transition: background-color .5s;
            }

            .Leftnav {
                height: 100%;
                width: 0;
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: #FFFFCC;
                overflow-x: hidden;
                transition: 0.5s;
                padding-top: 5%;
            }

            .Leftnav a {
                margin-top: 10px;
                padding: 8px 8px 8px 10px;
                text-decoration: none;
                font-size: 22px;
                color: #0066cc;
                display: block;
                transition: 0.3s;
            }

            .Leftnav a:hover, .Leftnav a:active {
                color: white;
                font-size: 23px;
                transition-duration: 0.5s;
                background-color: #666666;
                -webkit-transition-duration: 0.5s;
            }

            a:hover {
                cursor: pointer;
            }

            .Leftnav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 35px;
                margin-left: 50px;
            }

            .Leftnav .closebtn:hover {
                color: green;
                font-weight: bold;
                background-color: #FFFFCC;
                font-size: 45px;
            }

            #main_content {
                transition: margin-left .5s;
                padding: 16px;
            }

            @media screen and (max-height: 450px) {
                .sidenav {padding-top: 15px;}
                .sidenav a {font-size: 18px;}
            }
        </style>
    </head>
    <body id="bodycolor1" onload="startTime()">
        <script type="text/javascript" src="assets/scripts/utility_jscript.js"></script>
        <link rel="stylesheet" type="text/css" href="assets/css/CSSFile.css" property="">
        <?php include 'LeftNav.php'; ?>
        <?php include 'MainContent.php'; ?>

        <script>
            function openNav() {
                document.getElementById("LeftNav").style.width = "250px";
                document.getElementById("main_content").style.marginLeft = "250px";
                document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            }

            function closeNav() {
                document.getElementById("LeftNav").style.width = "0";
                document.getElementById("main_content").style.marginLeft = "0";
                document.body.style.backgroundColor = "cornsilk";
            }
        </script>
        <script>
            $(document).ready(function() {
                load_Div("CurrentReservations.php", "<?php echo $User_ID; ?>");
                //Replace CurrentReservations.php
                $("#nav_1").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Explore all current reservations.");
                        load_Div("CurrentReservations.php", "<?php echo $User_ID; ?>");
                    });
                });

                $("#nav_2").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Book a new reservation.");
                        load_Div("NewReservation.php", "<?php echo $User_ID; ?>");
                    });
                });

                $("#nav_3").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Edit your account related settings.");
                        load_Div("Account_Settings.php", "<?php echo $User_ID; ?>");
                    });
                });

                function load_Div(pageName, ID) {
                    closeNav();
                    $('#MainContents').prepend($('<div id="content_div" style="display: none;">Contents</div>'));
                    $("#content_div").load(pageName.toString(), { User_ID: ID}, function() {
                        $("#content_div").fadeIn({ duration: 800, queue: false }).css('display', 'none').slideDown(800);
                    });
                }
            });
        </script>
    </body>
</html>

<?php $User_ID=$_POST['User_ID']; ?>
<script>
    $(document).ready(function () {

        $("#change_pwd").click(function () {
            $("#content_div").fadeOut(500, function () {
                $(this).remove();
                $("#head1").text("Change your account password.");
                load_Div("Change_Pwd.php", "<?php echo $User_ID; ?>");
            });
        });

        $("#del_account").click(function () {
            $("#content_div").fadeOut(500, function () {
                $(this).remove();
                $("#head1").text("Delete your account permanently.");
                load_Div("Delete_Account.php", "<?php echo $User_ID; ?>");
            });
        });

        function load_Div(pageName, ID) {
            closeNav();
            $('#MainContents').prepend($('<div id="content_div" style="display: none;">Contents</div>'));
            $("#content_div").load(pageName.toString(), { User_ID: ID }, function () {
                $("#content_div").fadeIn({duration: 800, queue: false}).css('display', 'none').slideDown(800);
            });
        }
    });
</script>
<form method="GET" style="text-align: center; margin-top: 3.5em;">
    <font size="7" id="HeadingStyle1">Account Settings</font><br/><br/>
    <font color="Brown" size="6">Login ID</font><br><br>
    <?php echo '<font color="#840046" size="4">' . strtoupper($User_ID)."</font>"; ?><br><br><br><br>
    <a id="change_pwd" class="LinkShadow LinkStyle1" title="Change your current password." >Change Password</a>&emsp;
    <a id="del_account" class="LinkShadow LinkStyle2" title="Delete your account permanently.">Delete Your Account</a>
</form>

<div id="LeftNav" class="Leftnav">
    <a href="javascript:void(0)" style="" class="closebtn" onclick="closeNav()" title="Close menu">&times;</a>
    <a id="nav_1" title="Explore your reservations">Current Reservations</a>
    <a id="nav_2" title="Book a reservation">Book a Ticket</a>
    <a id="nav_3" title="Change account settings">Account settings</a>
    <a href="HomePage.php?Logout=1" target="_top" onclick="alert('You\'ve been logged out.');">Sign Out</a>
</div>

<div id="main_content">
    <div style="text-align: left;">
            <font size="20" color="#2E64FE">Welcome, <?php echo $User_Info['User_Gender'].". "; $Arr=str_split($User_Info['User_Name'],1);
                echo strtoupper($Arr[0]);for($i=1;$i<strlen($User_Info['User_Name']);$i++){ echo $Arr[$i];}?></font>
        <div style="float: right;" title="Date and Time" id="HoverDateTime">
            <?php date_default_timezone_set("Asia/Kolkata");
            echo "Date: <font color='Teal' face='Helvetica'>".date(" d \of F Y ")."</font>"; ?>
            &nbsp;<font color='RoyalBlue' face='verdana'><font id="s"></font><?php echo date(" A");?></font>
        </div>
    </div>
    <p><font size="5" color="Red" face="Calibri" id="head1">Click on the '&#9776;' icon to open the side navigation menu.</font></p>
    <span style="font-size:30px; cursor:pointer;" onclick="openNav()" title="Open menu">&#9776; Options</span>
    <div id="MainContents" />
</div>

<?php
//Create new Reservation
?>

<?php
//This page shows current reservations;
?>

<?php
//This page shows changing password options.
?>

<?php
if(isset($_GET['B1'])) {
    //I WANT TO SUBMIT THE FORM HERE to do some operation, at least in this page. BUT IT GOES BACK TO logged.In.php page again!
}
?>
<form method="GET" action="Delete_Account.php"  style="text-align: center; margin-top: 3.5em;">
    <font size="7" id="HeadingStyle1">Delete Your Account</font><br/><br/>
    <font size="4" color="blueviolet">
    You are about to permanently delete your account.<font size='4' color='Red'> Are you sure?</font><br/>
    If so, fill the following:</font><br/><br/>
    <font size="4" class="LabelCol">
        <label for="cpw">Current Password: </label>
    </font><input type="password" name="InpPwd" style="width: 175px; border-radius: 4px;"
                  title="Enter your current password to proceed." id="cpw" required=""/><br/><br/>
    <button type="submit" name="B1" class="RedBtn">Proceed</button>
    <br/><br/><font color="red">WARNING: </font>
    <font color="#0066cc">
    Deleting your account will also PERMANENTLY delete all your saved data, including cancellation of all your booked reservations.</font>
    <br/><font size="2" color="gray">HINT: You can click the 'Current Reservations' link on side panel to go back.</font>
</form>


$（文档）.ready（函数（）{
$（“#更改pwd”）。单击（函数（）{
$（“内容分区”）。淡出（500，函数（）{
$（this.remove（）；
$（“#头1”）.text（“更改您的帐户密码”）；
load_Div（“Change_Pwd.php”，”）；
});
});
$（“#del_帐户”）。单击（函数（）{
$（“内容分区”）。淡出（500，函数（）{
$（this.remove（）；
$（“#头1”）.text（“永久删除您的帐户”）；
load_Div（“Delete_Account.php”，”）；
});
});
函数加载分区（页面名称、ID）{
closeNav（）；
$（'MainContents'）。前置（$（'Contents'）；
$（“#content_div”）.load（pageName.toString（），{User_ID:ID}，函数（）{
$（“#content_div”）.fadeIn（{duration:800，queue:false}）.css（'display'，'none'）.slideDown（800）；
});
}
});
帐户设置


登录ID

MainContent.php

<?php
$User_Info=array("User_Name" => "anirban", "User_ID" => "90royanirban", "User_Gender" => "Mr");
$User_ID=$User_Info['User_ID'];
?>

<html>
    <head>
        <title>Welcome</title>
        <script src="assets/scripts/jquery-3.4.1.min.js"></script>
        <style>
            body {
                transition: background-color .5s;
            }

            .Leftnav {
                height: 100%;
                width: 0;
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: #FFFFCC;
                overflow-x: hidden;
                transition: 0.5s;
                padding-top: 5%;
            }

            .Leftnav a {
                margin-top: 10px;
                padding: 8px 8px 8px 10px;
                text-decoration: none;
                font-size: 22px;
                color: #0066cc;
                display: block;
                transition: 0.3s;
            }

            .Leftnav a:hover, .Leftnav a:active {
                color: white;
                font-size: 23px;
                transition-duration: 0.5s;
                background-color: #666666;
                -webkit-transition-duration: 0.5s;
            }

            a:hover {
                cursor: pointer;
            }

            .Leftnav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 35px;
                margin-left: 50px;
            }

            .Leftnav .closebtn:hover {
                color: green;
                font-weight: bold;
                background-color: #FFFFCC;
                font-size: 45px;
            }

            #main_content {
                transition: margin-left .5s;
                padding: 16px;
            }

            @media screen and (max-height: 450px) {
                .sidenav {padding-top: 15px;}
                .sidenav a {font-size: 18px;}
            }
        </style>
    </head>
    <body id="bodycolor1" onload="startTime()">
        <script type="text/javascript" src="assets/scripts/utility_jscript.js"></script>
        <link rel="stylesheet" type="text/css" href="assets/css/CSSFile.css" property="">
        <?php include 'LeftNav.php'; ?>
        <?php include 'MainContent.php'; ?>

        <script>
            function openNav() {
                document.getElementById("LeftNav").style.width = "250px";
                document.getElementById("main_content").style.marginLeft = "250px";
                document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            }

            function closeNav() {
                document.getElementById("LeftNav").style.width = "0";
                document.getElementById("main_content").style.marginLeft = "0";
                document.body.style.backgroundColor = "cornsilk";
            }
        </script>
        <script>
            $(document).ready(function() {
                load_Div("CurrentReservations.php", "<?php echo $User_ID; ?>");
                //Replace CurrentReservations.php
                $("#nav_1").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Explore all current reservations.");
                        load_Div("CurrentReservations.php", "<?php echo $User_ID; ?>");
                    });
                });

                $("#nav_2").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Book a new reservation.");
                        load_Div("NewReservation.php", "<?php echo $User_ID; ?>");
                    });
                });

                $("#nav_3").click(function() {
                    $("#content_div").fadeOut(500, function() {
                        $(this).remove();
                        $("#head1").text("Edit your account related settings.");
                        load_Div("Account_Settings.php", "<?php echo $User_ID; ?>");
                    });
                });

                function load_Div(pageName, ID) {
                    closeNav();
                    $('#MainContents').prepend($('<div id="content_div" style="display: none;">Contents</div>'));
                    $("#content_div").load(pageName.toString(), { User_ID: ID}, function() {
                        $("#content_div").fadeIn({ duration: 800, queue: false }).css('display', 'none').slideDown(800);
                    });
                }
            });
        </script>
    </body>
</html>

<?php $User_ID=$_POST['User_ID']; ?>
<script>
    $(document).ready(function () {

        $("#change_pwd").click(function () {
            $("#content_div").fadeOut(500, function () {
                $(this).remove();
                $("#head1").text("Change your account password.");
                load_Div("Change_Pwd.php", "<?php echo $User_ID; ?>");
            });
        });

        $("#del_account").click(function () {
            $("#content_div").fadeOut(500, function () {
                $(this).remove();
                $("#head1").text("Delete your account permanently.");
                load_Div("Delete_Account.php", "<?php echo $User_ID; ?>");
            });
        });

        function load_Div(pageName, ID) {
            closeNav();
            $('#MainContents').prepend($('<div id="content_div" style="display: none;">Contents</div>'));
            $("#content_div").load(pageName.toString(), { User_ID: ID }, function () {
                $("#content_div").fadeIn({duration: 800, queue: false}).css('display', 'none').slideDown(800);
            });
        }
    });
</script>
<form method="GET" style="text-align: center; margin-top: 3.5em;">
    <font size="7" id="HeadingStyle1">Account Settings</font><br/><br/>
    <font color="Brown" size="6">Login ID</font><br><br>
    <?php echo '<font color="#840046" size="4">' . strtoupper($User_ID)."</font>"; ?><br><br><br><br>
    <a id="change_pwd" class="LinkShadow LinkStyle1" title="Change your current password." >Change Password</a>&emsp;
    <a id="del_account" class="LinkShadow LinkStyle2" title="Delete your account permanently.">Delete Your Account</a>
</form>

<div id="LeftNav" class="Leftnav">
    <a href="javascript:void(0)" style="" class="closebtn" onclick="closeNav()" title="Close menu">&times;</a>
    <a id="nav_1" title="Explore your reservations">Current Reservations</a>
    <a id="nav_2" title="Book a reservation">Book a Ticket</a>
    <a id="nav_3" title="Change account settings">Account settings</a>
    <a href="HomePage.php?Logout=1" target="_top" onclick="alert('You\'ve been logged out.');">Sign Out</a>
</div>

<div id="main_content">
    <div style="text-align: left;">
            <font size="20" color="#2E64FE">Welcome, <?php echo $User_Info['User_Gender'].". "; $Arr=str_split($User_Info['User_Name'],1);
                echo strtoupper($Arr[0]);for($i=1;$i<strlen($User_Info['User_Name']);$i++){ echo $Arr[$i];}?></font>
        <div style="float: right;" title="Date and Time" id="HoverDateTime">
            <?php date_default_timezone_set("Asia/Kolkata");
            echo "Date: <font color='Teal' face='Helvetica'>".date(" d \of F Y ")."</font>"; ?>
            &nbsp;<font color='RoyalBlue' face='verdana'><font id="s"></font><?php echo date(" A");?></font>
        </div>
    </div>
    <p><font size="5" color="Red" face="Calibri" id="head1">Click on the '&#9776;' icon to open the side navigation menu.</font></p>
    <span style="font-size:30px; cursor:pointer;" onclick="openNav()" title="Open menu">&#9776; Options</span>
    <div id="MainContents" />
</div>

<?php
//Create new Reservation
?>

<?php
//This page shows current reservations;
?>

<?php
//This page shows changing password options.
?>

<?php
if(isset($_GET['B1'])) {
    //I WANT TO SUBMIT THE FORM HERE to do some operation, at least in this page. BUT IT GOES BACK TO logged.In.php page again!
}
?>
<form method="GET" action="Delete_Account.php"  style="text-align: center; margin-top: 3.5em;">
    <font size="7" id="HeadingStyle1">Delete Your Account</font><br/><br/>
    <font size="4" color="blueviolet">
    You are about to permanently delete your account.<font size='4' color='Red'> Are you sure?</font><br/>
    If so, fill the following:</font><br/><br/>
    <font size="4" class="LabelCol">
        <label for="cpw">Current Password: </label>
    </font><input type="password" name="InpPwd" style="width: 175px; border-radius: 4px;"
                  title="Enter your current password to proceed." id="cpw" required=""/><br/><br/>
    <button type="submit" name="B1" class="RedBtn">Proceed</button>
    <br/><br/><font color="red">WARNING: </font>
    <font color="#0066cc">
    Deleting your account will also PERMANENTLY delete all your saved data, including cancellation of all your booked reservations.</font>
    <br/><font size="2" color="gray">HINT: You can click the 'Current Reservations' link on side panel to go back.</font>
</form>


欢迎
点击