用户可以从我的产品页面中选择他们想要的产品以及每种产品的数量。用户选择的产品会弹出窗体顶部。它显示了他们选择了哪些项目，它是多少，并为用户提供了总计。目前，当用户选择他们想要的产品后，他们会点击提交按钮并将其定向到订单页面（这是要求提供姓名，帐单地址和付款信息的页面）。用户选择订购的产品如何在订单页面的顶部弹出？
产品页面表单：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="form.css">
<script language="javascript" type="text/javascript" src="j.js"></script>
</head>
<body>
<section>
<header>
</header>
<nav>
<li><a href="index.htm" >Home</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="order.htm">Order Form</a></li>
</nav>
<article>
<div id="ordersummary">
</div>
<form>
<legend>Enter The Shipping Address</legend>
<fieldset id="custInfo">
<label id="firstNameLabel" for="firstName">First Name:</label>
<input type="text" name="fname" id="firstName" placeholder="First Name" required/>
<label id="lnameLabel" for="lname">Last Name:</label>
<input type="text" name="lname" id="lastName" placeholder="Last Name" required/>
<label id="saddressLabel" for="saddress">Street Address:</label>
<input name="saddress" id="saddress" required/>
<label id="scityLabel" for="scity">City:</label>
<input type="text" name="scity" id="scity" placeholder="Tulsa" required/>
<label id="sstateLabel" for="sstate">State:</label>
<select id="sstate" name="sstate" required>
<option value="" selected="selected">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label id="szipLabel" for="szip">Zip Code:</label>
<input name="szip" id="szip" placeholder="xxxxx (-xxxx)" required/>
</fieldset>
<legend>Billing Address</legend>
<fieldset id="billingInfo">
<label id="baddressLabel" for="baddress">Street Address:</label>
<input name="baddress" id="baddress" required/>
<label id="bcityLabel" for="bcity">City:</label>
<input type="text" name="bcity" id="bcity" placeholder="Tulsa" required/>
<label id="bstateLabel" for="bstate">State:</label>
<select id="bstate" name="bstate" required>
<option value="" selected="selected">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label id="bzipLabel" for="bzip">Zip Code:</label>
<input name="bzip" id="bzip" placeholder="xxxxx (-xxxx)" required/>
</fieldset>
<legend>Credit/Debit Card</legend>
<fieldset id="CreditInfo">
<label id="ccardLabel" for="ccardtype">Credit Card Type:</label>
<select id="ccardtype" name="ccardtype" required>
<option value="" selected="selected"></option>
<option value="AL">Visa</option>
<option value="AK">AMEX</option>
<option value="AZ">Discovery</option>
<option value="AZ">MasterCard</option>
</select>
<label id="ccardnoLabel" for="ccardno">Credit Card Number:</label>
<input name="ccardno" id="ccardno" required/>
<label id="ccardexpLabel" for="ccardexp">Credit Card Exp. Date:</label>
<input name="ccardexp" id="ccardexp" placeholder="mm/yy" required/>
</fieldset>
<p>
<button id="submitButton" onclick="return validateForm();">Submit</button>
<button id="clearButton" type="reset" >Clear</button>
</p>
</form>
</article>
<footer>
Copyright 2013 philtography.blah
</footer>
</section>
products.js
function Totals() {
var photos = ['photo1_', 'photo2_', 'photo3_', 'photo4_', 'photo5_', 'photo6_'];
var prices = 'price';
var quantities = 'quantity';
var subtotals = 'subtotal';
var prodText = 'text';
var total = 0;
var orderSum = "<table><tr><th>Product</th><th>Price</th><th>Quantity</th><th>Sum</th> </tr>";
for (var i = 0; i < photos.length; i++) {
var price = document.getElementById(photos[i] + prices).value;
var quantity = document.getElementById(photos[i] + quantities).value;
document.getElementById(photos[i] + subtotals)
.innerHTML = parseInt(price) * parseInt(quantity);
total += price * quantity;
if (quantity > 0) {
orderSum += "<tr><td>" + document.getElementById(photos[i] + prodText).value + " </td><td>" + "$" + price + "</td><td>"+quantity+"</td><td>" + "$" + (price * quantity) + "</td></tr>";
}
}
orderSum += "</table>";
document.getElementById("ftotal").innerHTML = total;
document.getElementById("ordersummary").innerHTML = orderSum;
}
function setup() {
var theForm = document.getElementById("orderform");
var amounts = document.getElementsByTagName("select");
for(var i = 0; i < amounts.length; i++){
amounts[i].onchange = Totals;
}
}
window.onload = setup;
order.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="form.css">
<script language="javascript" type="text/javascript" src="j.js"></script>
</head>
<body>
<section>
<header>
</header>
<nav>
<li><a href="index.htm" >Home</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="order.htm">Order Form</a></li>
</nav>
<article>
<div id="ordersummary">
</div>
<form>
<legend>Enter The Shipping Address</legend>
<fieldset id="custInfo">
<label id="firstNameLabel" for="firstName">First Name:</label>
<input type="text" name="fname" id="firstName" placeholder="First Name" required/>
<label id="lnameLabel" for="lname">Last Name:</label>
<input type="text" name="lname" id="lastName" placeholder="Last Name" required/>
<label id="saddressLabel" for="saddress">Street Address:</label>
<input name="saddress" id="saddress" required/>
<label id="scityLabel" for="scity">City:</label>
<input type="text" name="scity" id="scity" placeholder="Tulsa" required/>
<label id="sstateLabel" for="sstate">State:</label>
<select id="sstate" name="sstate" required>
<option value="" selected="selected">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label id="szipLabel" for="szip">Zip Code:</label>
<input name="szip" id="szip" placeholder="xxxxx (-xxxx)" required/>
</fieldset>
<legend>Billing Address</legend>
<fieldset id="billingInfo">
<label id="baddressLabel" for="baddress">Street Address:</label>
<input name="baddress" id="baddress" required/>
<label id="bcityLabel" for="bcity">City:</label>
<input type="text" name="bcity" id="bcity" placeholder="Tulsa" required/>
<label id="bstateLabel" for="bstate">State:</label>
<select id="bstate" name="bstate" required>
<option value="" selected="selected">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label id="bzipLabel" for="bzip">Zip Code:</label>
<input name="bzip" id="bzip" placeholder="xxxxx (-xxxx)" required/>
</fieldset>
<legend>Credit/Debit Card</legend>
<fieldset id="CreditInfo">
<label id="ccardLabel" for="ccardtype">Credit Card Type:</label>
<select id="ccardtype" name="ccardtype" required>
<option value="" selected="selected"></option>
<option value="AL">Visa</option>
<option value="AK">AMEX</option>
<option value="AZ">Discovery</option>
<option value="AZ">MasterCard</option>
</select>
<label id="ccardnoLabel" for="ccardno">Credit Card Number:</label>
<input name="ccardno" id="ccardno" required/>
<label id="ccardexpLabel" for="ccardexp">Credit Card Exp. Date:</label>
<input name="ccardexp" id="ccardexp" placeholder="mm/yy" required/>
</fieldset>
<p>
<button id="submitButton" onclick="return validateForm();">Submit</button>
<button id="clearButton" type="reset" >Clear</button>
</p>
</form>
</article>
<footer>
Copyright 2013 philtography.blah
</footer>
</section>
</body>
</html>
答案 0 :(得分：0)
如果您在表单中使用GET方法，则可以在目标页面上使用document.URL获取参数。
<强> HTML
<form method="GET" action="yourpage.html">
...
</form>
提交此表单时，网址将如下所示：yourpage.html？param1 = 1＆amp; param2 = 2
<强>的JavaScript
var parts = document.URL.split("?"); // the right part of the URL
var params = parts[1].split("&"); // [param1=1, param2=2]
对于一个similar question我做了一个小提琴来证明这一点。