1. 首頁
  2. 問答
  3. 使用JavaScript將數據從表單顯示到另一個頁面

使用JavaScript將數據從表單顯示到另一個頁面

2013-11-22 256 views
0

用戶可以從我的產品頁面中選擇他們想要的產品以及每種產品的數量。用戶選擇的產品彈出窗體的頂部。它顯示了他們選擇了哪些項目，它是多少，並給了用戶一個總數。目前在用戶選擇他們想要的產品之後，他們點擊提交按鈕，並將其引導至訂單頁面（這是要求提供姓名，賬單地址和付款信息的頁面）。用戶選擇訂購的產品怎樣才能在訂單頁面的頂部彈出？使用JavaScript將數據從表單顯示到另一個頁面

產品頁面形式：

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

來源

2013-11-22 PhillipBerry

回答

0

如果您在表單中使用GET方法，則可以在目標頁面上使用document.URL獲取參數。

HTML

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

當提交這種形式的URL看起來像：yourpage.html參數1 = 1個&參數2 = 2

的JavaScript

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

對於一個similar question我做了一個小提琴演示 這個。

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

來源

2013-11-22 16:06:38

相關問題

 相關問題