Ok, so I am working a project where one of the last parts is to have a hidden field in the form to pass the product id with everything else in the url parameters. As of right now I have it setup to grab product info for an external file and display on order_form.html(function addprod on line 29), in the h4 tag(line 250) is where the 'prodid' is displayed, I am needing to see if there is a way to get that value put into the hidden field(line 260) to be passes along.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Order Form</title>
<script type="text/javascript" charset="utf-8">
function cccheck () {
var errors = "";
if( ! /^\d{4}-\d{4}-\d{4}-\d{4}$/.test( document.forms[ 0 ].ccnum.value )){
errors += "The Credit Card Number you enter was not valid.\n";
}
if( ! /^\d{2}\/\d{2}\/\d{4}$/.test( document.forms[ 0 ].ccexp.value )){
errors += "The Credit Card Expiration you enter was not valid.\n";
}
if( errors == "" ) {
return true;
}else{
alert( errors );
return false;
}
}
function addprod () {
var image = get_image( pair[ 1] );
if( image ) {
var title_tag = document.getElementById( "title" );
var holder_tag = document.getElementById( "holder" );
var prodid_tag = document.getElementById( "prodid" );
var price_tag = document.getElementById( "price" );
var description_tag = document.getElementById( "description" );
title_tag.appendChild( document.createTextNode( image.title ) );
prodid_tag.appendChild( document.createTextNode( image.prodid ) );
price_tag.appendChild( document.createTextNode( image.price ) );
description_tag.appendChild( document.createTextNode( image.description ) );
var image_tag = document.createElement( "img" );
image_tag.src = "images/" + image.name + ".jpg";
holder_tag.appendChild( image_tag );
}
}
function validate( ) {
var errors = new Array( );
for( var i = 0; i < document.forms[ 0 ].elements.length ; i++ ){
if( document.forms[ 0 ].elements[ i ].type == "text" ) {
if( document.forms[ 0 ].elements[ i ].value == "" ){
errors.push( "The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");
document.forms[ 0 ].elements[ i ].className = "in_error";
}else{
document.forms[ 0 ].elements[ i ].className = "in_noerror";
}
}
if( document.forms[ 0 ].firstname.value == "" ){
document.getElementById( "labelfirstname" ).style.color = "red";
document.getElementById( "labelfirstname" ).style.fontWeight = "bold";
}else{
document.getElementById( "labelfirstname" ).style.color = "black";
document.getElementById( "labelfirstname" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].lastname.value == "" ){
document.getElementById( "labellastname" ).style.color = "red";
document.getElementById( "labellastname" ).style.fontWeight = "bold";
}else{
document.getElementById( "labellastname" ).style.color = "black";
document.getElementById( "labellastname" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].address.value == "" ){
document.getElementById( "labeladdress" ).style.color = "red";
document.getElementById( "labeladdress" ).style.fontWeight = "bold";
}else{
document.getElementById( "labeladdress" ).style.color = "black";
document.getElementById( "labeladdress" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].city.value == "" ){
document.getElementById( "labelcity" ).style.color = "red";
document.getElementById( "labelcity" ).style.fontWeight = "bold";
}else{
document.getElementById( "labelcity" ).style.color = "black";
document.getElementById( "labelcity" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].state.value == "" ){
document.getElementById( "labelstate" ).style.color = "red";
document.getElementById( "labelstate" ).style.fontWeight = "bold";
}else{
document.getElementById( "labelstate" ).style.color = "black";
document.getElementById( "labelstate" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].zipcode.value == "" ){
document.getElementById( "labelzipcode" ).style.color = "red";
document.getElementById( "labelzipcode" ).style.fontWeight = "bold";
}else{
document.getElementById( "labelzipcode" ).style.color = "black";
document.getElementById( "labelzipcode" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].baddress.value == "" ){
document.getElementById( "bbaddress" ).style.color = "red";
document.getElementById( "bbaddress" ).style.fontWeight = "bold";
}else{
document.getElementById( "bbaddress" ).style.color = "black";
document.getElementById( "bbaddress" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].bcity.value == "" ){
document.getElementById( "bbcity" ).style.color = "red";
document.getElementById( "bbcity" ).style.fontWeight = "bold";
}else{
document.getElementById( "bbcity" ).style.color = "black";
document.getElementById( "bbcity" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].bstate.value == "" ){
document.getElementById( "bbstate" ).style.color = "red";
document.getElementById( "bbstate" ).style.fontWeight = "bold";
}else{
document.getElementById( "bbstate" ).style.color = "black";
document.getElementById( "bbstate" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].bzip.value == "" ){
document.getElementById( "bbzip" ).style.color = "red";
document.getElementById( "bbzip" ).style.fontWeight = "bold";
}else{
document.getElementById( "bbzip" ).style.color = "black";
document.getElementById( "bbzip" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].cctype.selectedIndex == 0 ) {
//if(document.forms[ 0 ].cctype.selectedIndex == 0 ) {
document.getElementById( "cctype" ).style.color = "red";
document.getElementById( "cctype" ).style.fontWeight = "bold";
}else{
document.getElementById( "cctype" ).style.color = "black";
document.getElementById( "cctype" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].ccnum.value == "" ){
document.getElementById( "ccnum" ).style.color = "red";
document.getElementById( "ccnum" ).style.fontWeight = "bold";
}else{
document.getElementById( "ccnum" ).style.color = "black";
document.getElementById( "ccnum" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].ccexp.value == "" ){
document.getElementById( "ccexp" ).style.color = "red";
document.getElementById( "ccexp" ).style.fontWeight = "bold";
}else{
document.getElementById( "ccexp" ).style.color = "black";
document.getElementById( "ccexp" ).style.fontWeight = "normal";
}
if( document.forms[ 0 ].elements[ i ].type == "select-one") {
if(document.forms[ 0 ].elements[ i ].selectedIndex == 0 ) {
errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not a valid one\n');
document.forms[ 0 ].elements[ i ].className = "in_error";
}else{
document.forms[ 0 ].elements[ i ].className = "in_noerror";
}
}
}
if( errors.length == 0 ) {
return true;
} else {
clear_errors( );
show_errors( errors );
return false;
}
}
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 i = 0; i < errors.length; i++ ){
var error = document.createTextNode( errors[ i ] );
var p = document.createElement( "p" );
p.appendChild( error );
div.appendChild( p );
}
}
window.onload = function( ) {
document.forms[ 0 ].onsubmit = validate;
addprod();
}
</script>
<style type="text/css" media="screen">
#errors { color: #F00; }
.in_error { background-color: #F00; }
.in_noerror { background-color: #FFF; }
input:focus { background-color: #FFF; border-color:#777; }
select:focus { background-color: #FFF; }
h1 { font: Arial, Sans-serif; font-size: 175%; font-weight: bold; text-align: left; }
body { font:12px Arial, Sans-serif; }
form { width:300px; padding:5px ; background:#f7f7f7; border:1px solid #ddd; }
</style>
<script src="images/products.js" type="text/javascript"></script>
<script src="images/query_parser.js" type="text/javascript"></script>
</head>
<body>
<hr />
<h1>Order Form</h1>
<h2>Items in your cart: </h2>
<div id="holder"></div>
<h3 id="title"></h3>
<h4 id="prodid">Product ID: </h4>
<h4 id="price">Price: </h4>
<p id="description">Description: </p>
<hr />
<div id="errors"></div>
<form action="dummy_url.html" method="get" name="" >
<p> <input type="hidden" id="prodid" name="prodid" value="" /></p>
<p>
<label for="firstname" id="labelfirstname">First name:</label></br>
<input type="text" name="First name" id="firstname" />
</p>
<p>
<label for="lastname" id="labellastname">Last name:</label></br>
<input type="text" name="Last name" id="lastname"/>
</p>
<p>
<label for="address" id="labeladdress">Shipping address:</label></br>
<input type="text" name="Shipping address" id="address"/>
</p>
<p>
<label for="city" id="labelcity">Shipping City:</label></br>
<input type="text" name="Shipping City" id="city"/>
</p>
<p>
<label for="State" id="labelstate">Shipping State:</label></br>
<input type="text" name="Shipping State" id="state"/>
</p>
<p>
<label for="zipcode" id="labelzipcode">Shipping Zip:</label></br>
<input type="text" name="Shipping Zip" id="zipcode"/>
</p>
<p>
<input type="checkbox" onclick="sameAdd(this)">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
</p>
<p>
<label for="baddress" id="bbaddress">Billing address:</label></br>
<input type="text" name="Billing address" id="baddress"/>
</p>
<p>
<label for="bcity" id="bbcity">Billing City:</label></br>
<input type="text" name="Billing City" id="bcity"/>
</p>
<p>
<label for="bstate" id="bbstate">Billing State:</label></br>
<input type="text" name="Billing State" id="bstate"/>
</p>
<p>
<label for="bzip" id="bbzip">Billing Zip:</label></br>
<input type="text" name="Billing Zip" id="bzip"/>
</p>
<label for="cctype" id="cctype">Credit Card Type:</label></br>
<select name="Credit Card Type" id="cctype">
<option></option>
<option>Visa</option>
<option>Mastercard</option>
<option>Discover</option>
</select>
<p>
<label for="ccnum" id="ccnum">Credit Card Number:</label></br>
<input type="text" name="Credit Card Number" id="ccnum"/>
</p>
<p>
<label for="ccexp" id="ccexp">Credit Card Exipration Date:</label></br>
<input type="text" name="Credit Card Exipration Date" id="ccexp"/>
</p>
<p><input type="submit" value="Submit" onclick="validate(), cccheck()"/><input class="res" type="reset" value="Clear the form"></p>
</form>
<script type="text/javascript" >
function sameAdd( box ) {
if( box.checked == false ) {
return;
}
document.getElementById("baddress").value = document.getElementById("address").value;
document.getElementById("bcity").value = document.getElementById("city").value;
document.getElementById("bstate").value = document.getElementById("state").value;
document.getElementById("bzip").value = document.getElementById("zipcode").value;
}
</script>
</body>
</html>