使用JavaScript将数据从一个表单显示到另一个页面

Display Data from a form to another page using JavaScript

本文关键字：显示 表单 一个 另一个 JavaScript 数据 使用      更新时间：2023-09-26

用户可以从我的产品页面中选择他们想要的产品以及每种产品的数量。用户选择的产品会弹出在表单的顶部。它会显示他们选择的项目、金额，并向用户提供总额。目前，在用户选择他们想要的产品后，他们点击提交按钮，它会将他们引导到订单页面（即询问姓名、账单地址和付款信息的页面）。用户选择订购的产品如何也会弹出在订购页面的顶部？

产品页面形式：

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

如果在表单中使用GET方法，则可以在目标页面上使用document.URL获取参数。

HTML

<form method="GET" action="yourpage.html">
...
</form>

提交此表单时，url将显示为：yourpage.html？param1=1&param2=2

JavaScript

var parts = document.URL.split("?"); // the right part of the URL
var params = parts[1].split("&"); // [param1=1, param2=2]

对于一个类似的问题，我做了一把小提琴来证明这一点。

http://jsfiddle.net/tive/LjbPq/

相关文章：