Отправка формы PHP на той же странице, включая боковое меню навигации - PullRequest
Новая
       6

Отправка формы PHP на той же странице, включая боковое меню навигации

0 голосов
/ 28 января 2020

Я создавал проект php, и я создал боковое меню, в котором я хочу отправить форму на той же странице, которую я загрузил, используя функцию jquery load(). Я пытался использовать method="GET" и action="POST" метод, хотя форма отправляется на ту же страницу, но включенные страницы, кажется, vani sh. То, чего я хочу достичь, - это когда я отправляю форму, я хочу отобразить боковое навигационное меню.

Вот мой код, я их столько же вставил это необходимо.

Вот страница, которая загружается первой. Это страница, с которой начинается мой проект.

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>

Другие страницы, необходимые для запуска этого файла.

Account_Settings. php

<?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>

LeftNav. php

<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>

MainContent. php 

<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

<?php
//Create new Reservation
?>

Текущее резервирование. php

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

Change_Pwd. php

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

И, наконец, вот моя страница, на которой я хочу отправить форму после того, как пользователь введет пароль своей учетной записи:

Delete_Account. php

<?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>

Как этого добиться? Любая помощь приветствуется. Спасибо!

...