因此，在过去的几天里，我一直在努力将信息从我的产品页面传递到订单。我能够弄清楚如何处理我为制作网页所做的编码。
这是我对三页的所有编码
主页：
body{
background-color:#56A5EC;
}
div.banner{
text-align:center;
color:#ED9C55;
font-size:45px;
width:750px;
height:50px;
position:relative;
top:0px;
margin-left:auto;
margin-right:auto;
border:1px solid black;
}
div.nav{
font-size:25px;
color:#56A5EC;
background-color:#ED9C55;
width:750px;
height:30px;
margin-left:auto;
margin-right:auto;
position:relative;
top:3px;
border:1px solid black;
}
div.main{
position:relative;
top:6px;
width:750px;
height:600px;
margin-left:auto;
margin-right:auto;
position:relative;
border:1px solid black;
background-color:white;
}
div.footer{
background-color:#ED9C55;
font-size: 20px;
height:180px;
width:752px;
margin-left:auto;
margin-right:auto;
position:relative;
bottom:8px;
z-index:1;
color:white;
}
p.welcome{
text-align:center;
margin-left:auto;
margin-right:auto;
font-size:25px;
color:blac<div class="wrapper">
<div class="banner">Welcome to Electro-Market</div>
<div class="nav"><a href="lab07_product_page.html">Product page</a></div>
<div class=""main>
<p class="welcome">
Welcome to my store where we sell electronic devices that you may enjoy. Here we are committed to satisfying your needs.
</p>
</div>
<div class="footer">
If you need to contact about stock avaliablity please don't hesitate to call (918)999-0987.
</div>
</div>
产品页面：
var products = [];
var url_string = document.location.search.substring(1,document.location.search.length);
if( url_string.length > 0 ) {
var parameters = url_string.split('&');
for(var x = 0 ; x < parameters.length ; x++ ) {
products.push(parameters[x].split('='));
}
console.log(products);
} else {
console.log("no parameters");
}
window.onload = function( ) {
var form = document.getElementById("order_form");
form.onsubmit = function( ) {
var controls = document.getElementsByTagName("input");
for( var x = 0 ; x < controls.length ; x++ ){
if( controls[x].type == "checkbox" && controls[x].checked ) {
return true;
}
}
alert("You must select one product at least");
return false;
}
}body{
background-color:#56A5EC;
}<form action="lab07_order_form.html" method="get" id="order_form">
<h2>Lenovo Computer - $650.00</h2>
<div>
<input type="checkbox" name="Product1" value="" id="Product1"/>
<label for="product-1"><img src="Lenovo-pc.jpg" alt="Computer" style="width:225px;height:200px;"> Thi computer has many features built into it such as Intel i5 core processor 8GB ram and 1 TB of memory.</label>
</div>
<h2>Nintendo 64 - $50.00</h2>
<div>
<input type="checkbox" name="Product2" value="" id="Product2"/>
<label for="product-2"><img src="Nintendo-64.jpg" alt="Nintendo" style="width:225px;height:200px;"> A console from the 90's that many kids loved to play at a friends house and an all around family activity. Though cartridges are sold separately and come in serveral different games.</label>
</div>
<h2>Playstation 2 - $150.00</h2>
<div>
<input type="checkbox" name="Product3" value="" id="Product3"/>
<label for="product-3"><img src="playstation.jpg" alt="ps2" style="width:225px;height:200px;"> The Playstation 2 is a more modern console that is one of our highly anticipated consoles.</label>
</div>
<h2>Xbox - $125.00</h2>
<div>
<input type="checkbox" name="Product4" value="" id="Product4"/>
<label for="product-4"><img src="xbox.jpg" alt="xbox" style="width:225px;height:200px;">Xbox is made by microsoft and has one of the most iconic games ever played Halo and are in limited supply</label>
</div>
<div>
<input type="submit" value="Purchase item's"/>
</div>
</form>
<form action="lab_07.html" method="get" id="lab_07">
<input type="submit" value="Back"/>
</form>
表单页面：
var ids = ['first_name', 'last_name','street_address','city','state','zip', 'Billing_address', 'Billing_city', 'Billing_state', 'Billing_zip', 'Card_type', 'Card_number', 'Card_date'];
function validate( ){
var errors = new Array();
for(var x = 0 ; x <document.forms[0].elements.length ; x++ ) {
if(document.forms[0].elements[ x ].type == "text"){
if(document.forms[0].elements[ x ].value == ""){
errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank\n");
document.forms[0].elements[x].className = "in_error";
} else {
document.forms[0].elements[x].className = "no_error";
}
}
if( document.forms[0].elements[x].type == "select-one"){
if(document.forms[0].elements[x].selectIndex == 0){
errors.push("The " + document.forms[0].elements[x].name + " field cannot be blank\n");
document.forms[0].elements[x].className = "in_error";
} else {
document.forms[0].elements[x].className = "no_error";
}
}
}
if(errors.length == 0 ){
return true;
} else {
clear_errors( );
show_errors( errors );
return false;
}
}
var products = [];
var url_string = document.location.search.substring(1,document.location.search.length);
if( url_string.length > 0 ) {
var parameters = url_string.split('&');
for(var x = 0 ; x < parameters.length ; x++ ) {
products.push(parameters[x].split('='));
}
console.log(products);
} else {
console.log("no parameters");
}
function FillBilling(z){
if(z.billingtoo.checked == true) {
z.Billing_address.value = z.street_address.value;
z.Billing_city.value = z.city.value;
z.Billing_state.value = z.state.value;
z.Billing_zip.value = z.zip.value;
}
if(z.billingtoo.checked == false){
z.Billing_address.value = '';
z.Billing_city.value = '';
z.Billing_state.value = '';
z.Billing_zip.value = '';
}
}
function clear_errors(){
var div = document.getElementById( "errors" );
while(div.hasChildNodes()){
div.removeChild(div.firstChild);
}
}
function show_errors( errors ) {
var div = document.getElementById( "errors" );
for( var x = 0 ; x < errors.length ; x++ ) {
var error = document.createTextNode( errors[ x ]);
var p = document.createElement( "p" );
p.appendChild(error);
div.appendChild(p);
}
}
window.onload = function() {
document.forms[ 0 ].onsubmit = validate;
for( var x = 0 ; x < ids.length ; x++ ) {
var element = document.getElementById(ids[x]);
element.onfocus = function(){
console.log(this.id + " has been focused");
this.className = "element_focused";
document.getElementById(this.id + "_label").className = "element_focused";
}
element.onblur = function( ) {
console.log(this.id + " has been blurred");
this.className = "";
document.getElementById(this.id + "_label").className = "";
}
}
var products_div = document.getElementById("products");
var order_form = document.getElementById("order_form");
for( var x = 0 ; x < products.length ; x++ ) {
//create colored background div's
var div = document.createElement("div");
div.style.backgroundColor = products[x][1];
products_div.appendChild(div);
//create form fields
var input = document.createElement("input");
input.type = "hidden";
input.name = products[x][0];
input.value = products[x][1];
order_form.appendChild(input);
}
}#errors {
color: #F00;
}
.in_error{
background-color: #F00;
}
.no_error{
background-color: #FFFFFF;
}
input.element_focused, select.element_focused {
border: 5px solid #F00;
}
label.element_focused {
color: #F00;
}<h1>Products</h1>
<div id="products"></div>
<div id="errors"></div>
<form method="get" action="https://suchnull.com/examples/echo">
<p>
<label for="first_name" id="first_name_label">First Name:</label>
<input type="text" name="first name" value="" id="first_name"/>
</p>
<p>
<label for="last_name" id="last_name_label">Last Name:</label>
<input type="text" name="last name" value="" id="last_name"/>
</p>
<p>
<label for="street_address" id="street_address_label">Shipping Address:</label>
<input type="text" name="street address" value="" id="street_address"/>
<input type="checkbox" onclick="FillBilling(this.form)" name="billingtoo"/>
</p>
<p>
<label for="city" id="city_label">Shipping City:</label>
<input type="text" name="city" value="" id="city"/>
</p>
<p>
<label for="state" id="state_label">Shipping State:</label>
<input type="text" name="state" value="" id="state"/>
</p>
<p>
<label for="zip" id="zip_label">Shipping Zip:</label>
<input type="text" name="zip" value="" id="zip"/>
</p>
<p>
<label for="Billing_address" id="Billing_address_label">Billing address:</label>
<input type="text" name="Billing address" value="" id="Billing_address"/>
</p>
<p>
<label for="Billing_city" id="Billing_city_label">Billing City:</label>
<input type="text" name="Billing city" value="" id="Billing_city"/>
</p>
<p>
<label for="Billing_state" id="Billing_state_label">Billing State:</label>
<input type="text" name="Billing state" value="" id="Billing_state"/>
</p>
<p>
<label for="Billing_zip" id="Billing_zip_label">Billing Zip:</label>
<input type="text" name="Billing zip" value="" id="Billing_zip"/>
</p>
<p>
<label for="Card_type" id="Card_type_label">Credit Card Type:</label>
<input type="text" name="Card type" value="" id="Card_type"/>
</p>
<p>
<label for="Card_number" id="Card_number_label">Credit Card Number:</label>
<input type="text" name="Card number" value="" id="Card_number"/>
</p>
<p>
<label for="Card_date" id="Card_date_label">Credit Card Expiration Date:</label>
<input type="text" name="Card date" value="" id="Card_date"/>
</p>
<p>
<form method="get" action="https://suchnull.com/examples/echo">
<input type="checkbox" name="checkbox" value="check" /> I've completed the information
<input type="submit" name="submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" />
</form>
</p>
</form>
任何人都可以告诉我我做错了什么，并帮助我了解如何转移产品，价格和名称的图像，因为我完全不知道如何做到这一点。