1. 홈
  2. 질의 응답
  3. JavaScript를 사용하여 양식에서 다른 페이지로 데이터 표시

JavaScript를 사용하여 양식에서 다른 페이지로 데이터 표시

2013-11-22 2 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이 모양을이 양식 제출 : 들어 = 2

자바 스크립트

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

yourpage.html PARAM1 = 1 & PARAM2?를 a similar question 나는 그것을 증명하는 바이올린을 만들었습니다. 이.

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

출처

2013-11-22 16:06:38

관련 문제

 관련 문제