0
我正在爲項目創建假旅行網站，並且我已設置基本網頁和表單。我知道如何根據下拉菜單中的選擇重定向頁面，我知道如何將表單選項保存到本地數據庫，但我無法弄清楚如何執行這兩個操作。我可以保存數據並重定向到將數據插入數據庫的php，或者轉到另一個頁面而不保存數據庫。因此，有兩個提交按鈕 - 一個可以提交數據，另一個提供另一個頁面。無法將表單數據保存到數據庫，並根據下拉菜單轉到特定頁面
<?php
\t
\t session_start();
\t if (!isset($_SESSION['username'])) {
\t \t $_SESSION['msg'] = "You must log in first";
\t \t header('location: login.php');
\t }
\t if (isset($_GET['logout'])) {
\t \t session_unset();
\t \t session_destroy();
\t \t header("location: login.php");
\t \t exit;
\t }
//When user logged-in
$_SESSION['user_id']="logged_in_user_id";
//When you need to insert
$userId = $_SESSION['user_id'];
// connect to database
\t $db = mysqli_connect('localhost', '', '', 'registration');
if(isset($_POST['submit']))
{
// receive all input values from the form
$Deapart_Place = mysqli_real_escape_string($db, $_POST['Deapart_Place']);
\t \t $Arive_Place = mysqli_real_escape_string($db, $_POST['Arive_Place']);
\t \t $Leave_Date = mysqli_real_escape_string($db, $_POST['Leave_Date']);
\t \t $Return_Date = mysqli_real_escape_string($db, $_POST['Return_Date']);
\t $Adults = mysqli_real_escape_string($db, $_POST['Adults']);
\t $Children = mysqli_real_escape_string($db, $_POST['Children']);
// Insert Data into Trip_Plan Table
\t $query= "INSERT INTO Trip_plan (Deapart_Place, Arive_Place, Leave_Date, Return_Date, Adults, Children)
\t \t \t VALUES ('.$Deapart_Place.', '$Arive_Place', '$Leave_Date', '$Return_Date', '$Adults', '$Children')";
\t \t \t mysqli_query($db, $query);
\t
}
?>< script type = "text/javascript" >
var popupDiv = document.getElementById("popup_bg");
function openPopupMenu() {
popupDiv.style.display = "block";
}
function closePopupMenu() {
popupDiv.style.display = "none";
}
function gotosite() {
window.location = document.getElementById("menu").value; // JQuery: $("#menu").val();
}
<
/script>
<!-- End Script for Popup Menu -->@charset 'UTF-8';
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
/* //border: 1px solid red; */
}
body {
background-image: url(../images/Thai.jpg);
}
header {
position: fixed;
/* padding: 2em; */
top: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.2);
}
nav {
opacity: 1.10;
position: relative;
display: block !important;
float: left;
width: 40%;
height: auto;
font-family: 'Lato', sans-serif;
}
.login {
opacity: 1.10;
position: static;
float: right;
width: 10%;
height: auto;
font-size: 20px;
clear: right;
}
.login a {
color: white;
text-decoration: none;
}
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.5);
}
/* Navigation */
.menu {
margin: 0;
padding-left: 10px;
padding-top: 5px;
overflow: hidden;
float: left;
}
.menu a {
padding: 10px;
text-decoration: none;
/*font-size: 20px;
\t border-right: 4px solid rgba(0,0,0,0.4); */
color: white;
font-family: 'Lato', sans-serif;
font-size: 25px;
font-weight: 560;
}
.intro {
position: relative;
color: #343144;
background: #fff;
height: 30vw;
padding: 9em 6em 5em;
}
.compass {
margin-left: 100px;
margin-top: 4px;
}
/* End Navigation */
/* Account Dropdown Button */
.dropbtn {
background-color: rgba(0, 0, 0, 0.2);
color: white;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 35px;
font-family: 'Lato', sans-serif;
font-size: 25px;
font-weight: 560;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 900;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: rgba(0, 0, 0, 0.2);
}
/* End of Account Dropdown Button */
/* Body Grid Types */
.div1 {
width: 800px;
height: 400px;
box-sizing: border-box;
margin-top: 350px;
margin-left: 350px;
}
p {
box-sizing: border-box;
float: center;
text-align: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
font-size: 40px;
color: white;
font-family: 'Lato', sans-serif;
font-weight: 500;
}
.welcome {
color: white;
font-family: 'Lato', sans-serif;
font-size: 25px;
text-align: right;
margin-top: 15px;
}
/* End Body Grid Types */
/* PopUp Style */
#popup_bg {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.70);
width: 100%;
height: 100%;
display: none;
}
#popup_main_div {
position: fixed;
width: 800px;
height: 600px;
border: 2px solid white;
border-radius: 5px;
background-color: #89B1E5;
left: 50%;
margin-left: -400px;
top: 50px;
margin-top: 50px;
}
#close_popup_div {
position: absolute;
width: 25px;
height: 25px;
text-align: center;
right: 15px;
top: 15px;
}
#close_button {
width: 30px;
height: 30px;
cursor: pointer;
}
#popup_button {
position: static;
margin-top: 30px;
margin-left: 350px;
padding: 0;
border: none;
background: none;
font-size: 35px;
color: white;
cursor: pointer;
}
/* End of PopUp Style */
/* Form Style */
form {
text-align: center;
margin-top: 105px;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.search {
color: white;
font-family: 'Lato', sans-serif;
font-size: 25px;
font-weight: 560;
margin-left: 220px;
margin-top: 20px;
width: 204px;
height: 50px;
background-color: #1170b9;
border: 1px solid #1170b9;
position: static;
text-align: center;
}
.form {}
.img {
float: left;
margin: 10px;
padding: 10px;
max-width: auto;
height: auto;
margin-left: 160px;
margin-top: 150px;
}
.backoftable {
background: rgba(0, 0, 0, 0.20);
opacity: 1.10;
position: relative;
text-align: left;
float: left;
width: 610px;
height: 600px;
max-width: auto;
max-height: auto;
margin-left: 80px;
margin-top: 160px;
}
select {
width: 150px;
}
tr,
td {
padding-bottom: 35px;
padding-left: 90px;
font-family: 'Lato', sans-serif;
font-size: 27px;
font-weight: 560;
color: aliceblue;
}
th {
padding-bottom: 25px;
padding-left: 90px;
font-family: 'Lato', sans-serif;
font-size: 27px;
font-weight: 560;
color: aliceblue;
}<?php
\t session_start();
include('insert.php');
\t if (!isset($_SESSION['username'])) {
\t \t $_SESSION['msg'] = "You must log in first";
\t \t header('location: login.php');
\t }
\t if (isset($_GET['logout'])) {
\t \t session_unset();
\t \t session_destroy();
\t \t header("location: login.php");
\t \t exit;
\t }
//When user logged-in
$_SESSION['user_id']="logged_in_user_id";
//When you need to insert
$userId = $_SESSION['user_id'];
?>
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/Main_Stylesheet.css">
<link rel="stylesheet" href="css/Travel_Style.css">
<link rel="script" href="javascript/Date.js">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
</style>
</head>
<body class="backdrop">
<!--NAVIGATION BAR -->
<header>
<nav class="menu">
<ul>
<li class="menu"><a href="">Home</a></li>
<li class="menu"><a href="index.php">Destinations</a></li>
<li class="menu"><a href="">Packages</a></li>
<li class="menu">
<a href="">
<?php if (isset($_SESSION['username'])) : ?>Hello<strong> <?php echo $_SESSION['username']; ?></strong>
<?php endif ?>
</a>
</li>
</ul>
</nav>
<img class="compass" src="images/compass-icon.png" width="45" height="45" alt="" />
<div class="dropdown">
<button class="dropbtn">Acount</button>
<div class="dropdown-content"> <a href="#">My Plan</a> <a href="login.php?logout='1'">Log Out</a> </div>
</div>
</header>
<div class="img">
<img src="images/sea.jpg" width="400" height="600" alt="" box-shadow="0px 0px 130px rgba(0,0,0,.85)" />
</div>
<!--END OF NAVIGATION BAR -->
<div class="backoftable">
<table>
<!-- Fourm Heading -->
<form method="post">
<input type="submit" name="submit" value="submit" action="insert.php" />
<th colspan="2" style="padding-top: 10px;">
<p style="padding-top: 15px; padding-bottom: 20px;font-size: 25;">Book Your Trip and Select Your Package </p>
</th>
<!-- End of Fourm Heading -->
<tr>
<th>
<label for="Departing From">Departing From:</label><br>
</th>
<th>
<label for="Arriving To">Arriving To:</label>
</th>
</tr>
<!-- Deaprting From-->
<td>
<select name="Deapart_Place">
<option value="Bradley International Airport">Bradley International Airport | Windsor Locks, CT</option>
<option value="Hartford–Brainard Airport">Hartford–Brainard Airport | Hartford, CT</option>
<option value="Westchester County Airport">Westchester County Airport | White Plains, NY</option>
<option value="Sikorsky Memorial Airport" >Sikorsky Memorial Airport | Stratford, CT</option>
<option value="John F. Kennedy International Airport">JFK International Airport | Queens, NY</option>
</select>
</td>
<td>
<!-- Arriving to-->
<select id="menu">
<option value="" >Choose Arriving Airport...</option>
<option value="California_Info.php">Los Angeles International Airport | Los Angeles, CA</option>
<option value="California_Info.php">San Francisco International Airport | San Francisco, CA</option>
<option value="Florida_Info.php">Orlando International Airport | Orlando, FL</option>
<option value="Florida_Info.php">Florida Keys Marathon Airport | Marathon, FL</option>
<option value="Louisiana_Info.php">LANO International Airport | Kenner, LA</option>
<option value="Louisiana_Info.php">Lakefront Airport | New Orleans, LA</option>
</select>
<tr>
<th>
<label for="Departure">Departure Date:</label>
</th>
<th>
<label for="Return2">Return Date:</label><br>
</th>
</tr>
<td><input type="date" id="mydate" required min="{{today}}"></td>
<td><input type="date"></td>
<tr>
<td>
<lable for="Number of Adults">Adults</lable>
<input type="number" name="quantity" min="1" max="5">
</td>
<td>
<lable for="Number of Children">Children</lable>
<input type="number" name="quantity" min="1" max="5">
</td>
</tr>
</form>
</table>
<input class="search" type="submit" name="submit" onClick="gotosite()" value="submit">
</div>
</body>
</html>有我，我可以保存數據，進入基礎上，下拉選擇特定頁面的方式。我對php和javascript還是比較新的，所以我的代碼可能不是最好的。