我需要顯示/下拉列表從HTML頁面的選定值重定向到一個新的一頁。代碼無法執行。需要關於這個的幫助(使用javascript)。下拉列表項的值傳遞到另一個頁面作爲查詢字符串
這些都是「mainTest.html」文件中的代碼。我在將頁面重定向到另一個HTML頁面時遇到了問題。
< script type = "text/javascript" >
(function() {
/**
* Handles the click of the submit button.
*/
function onSubmitClicked(event) {
// Get the input element from the DOM.
var beverage = document.getElementById('foodbeverage'),
// Get the value from the element.
beverageValue = beverage.value,
// Construct the URL.
url = 'newPageTest.html?foodbeverage=' + encodeURIComponent(beverageValue) + '&status=' + encodeURIComponent(status);
// Instead of going to the URL, log it to the console.
console.log('goto to URL: ', url);
}
// Get the button from the DOM.
var submitButton = document.getElementById('btngo');
// Add an event listener for the click event.
submitButton.addEventListener('click', onSubmitClicked);
})(); <
/script>
<!DOCTYPE html>
<html>
<body>
<div align="center"></div>
<center>
<h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h3>
</center>
<table>
<tr>
<td>
<font size=2>
<B>Choose a Food/Beverage : </B>
</font>
<select ID="foodbeverage">
\t
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\t
\t <optgroup label="Food">
\t <option value = "chickenchop">Chicken Chop</option>
\t <option value = "pasta">Pasta</option>
\t <option value = "pizza">Pizza</option>
\t <option value = "chocolate">Chocolate Cake</option>
\t <option value = "redvelvet">Red Velvet Cake</option>
\t <option value = "icecream">Ice Cream Cake</option>
\t </optgroup>
\t
\t <optgroup label="Beverages">
\t <option value = "milk">Milk</option>
\t <option value = "freshjuice">Fresh Juice</option>
\t <option value = "icecream">Ice Cream</option>
\t <option value = "coffee">Coffee</option>
\t <option value = "carbonated">Carbonated Can Drink</option>
\t <option value = "water">Water</option>
\t </optgroup>
\t
\t </select>
<br/>
<font size=2>
<B>Choose a Food/Beverage : </B>
</font>
<select ID="foodbeverage1">
\t
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\t
\t <optgroup label="Food">
\t <option value = "chickenchop">Chicken Chop</option>
\t <option value = "pasta">Pasta</option>
\t <option value = "pizza">Pizza</option>
\t <option value = "chocolate">Chocolate Cake</option>
\t <option value = "redvelvet">Red Velvet Cake</option>
\t <option value = "icecream">Ice Cream Cake</option>
\t </optgroup>
\t
\t <optgroup label="Beverages">
\t <option value = "milk">Milk</option>
\t <option value = "freshjuice">Fresh Juice</option>
\t <option value = "icecream">Ice Cream</option>
\t <option value = "coffee">Coffee</option>
\t <option value = "carbonated">Carbonated Can Drink</option>
\t <option value = "water">Water</option>
\t </optgroup>
\t
\t </select>
<br/>
</td>
<td>
<font size=2>
<B>Dine In or Take Away : </B>
</font>
<select ID="status">
\t
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\t
\t <optgroup label="STATUS">
\t <option value = "dinein">Dine In</option>
\t <option value = "takeaway">Take Away</option>
\t </optgroup>
\t </select>
<br/>
<font size=2>
<B>Dine In or Take Away : </B>
</font>
<select ID="status1">
\t
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\t
\t <optgroup label="STATUS">
\t <option value = "dinein">Dine In</option>
\t <option value = "takeaway">Take Away</option>
\t </optgroup>
\t </select>
<br/>
</td>
</tr>
</table>
<br/>
<br/>
<input type="submit" id="btngo" value="Go" />
<br/>
</body>
</html>
這些是下拉選擇的值將被顯示的「newPageTest.html」文件中的代碼。
< script type = "text/javascript" >
window.onload = passParameters;
//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
var foodbeverage = getParameterByName("foodbeverage");
var status = getParameterByName("status");
if (foodbeverage != null && status != null) {
var data = "<b>Food Beverages:</b> " + foodbeverage + " <b>Dine Takeaway:</b> " + status;
document.getElementById("showdata").innerHTML = data;
}
}
//Get URL parameter value
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
} <
/script>
<!DOCTYPE html>
<html>
<body>
<div id="showdata" align="center"></div>
<font size=6>
<B>Food/Beverage Selected : </B>
</font>
<br/>
<br/>
<font size=6>
<B>Dine In/Take Away : </B>
</font>
<br/>
<br/>
</body>
</html>
。你甚至閱讀的代碼?我在你之前的問題的第一個片段中做了這個方法,代碼評論甚至說沒有重定向發生。你只是複製粘貼而不看它。 – Thijs
@Thijs很抱歉,我按照你所說的做了,仍然沒有重定向,這些都是你完成的原始代碼。我猜這個問題在別的地方。我試圖在按鈕代碼之間放入