0

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>
2
Contributors
12
Replies
13
Views
5 Years
Discussion Span
Last Post by urtrivedi
0

modify line 250 (prodid to prodid_h4), make sure you do not use same id for any element of html, whether div, text, para whatever

<h4 id="prodid_h4">Product ID: </h4>

at line 340 (after sameadd function)
add line

document.getElementById("prodid").value  = document.getElementById("prodid_h4").value;
0

Thanks for the reply, it seems that doesnt work for my code, all it does is make it undefined.

0

undo what you changed by my previous post
ok sorry, change line 260 to

<input type="hidden" id="prodid_hidden" name="prodid_hidden" value=""  />

at line 340 (after sameadd function)
add line

document.getElementById("prodid_hidden").value  = document.getElementById("prodid").innerHTML;
</script>

Edited by urtrivedi: n/a

0

I tried that as well, and this is what is showing in my URL:

file:///C:/Users/AODfan/Desktop/dummy_url.html?prodid_hidden=undefined&First+name=John&Last+name=Doe&Shipping+address=123+E+1st+St&Shipping+City=New+York&Shipping+State=NY&Shipping+Zip=12345&Billing+address=123+E+1st+St&Billing+City=New+York&Billing+State=NY&Billing+Zip=12345&Credit+Card+Type=Visa&Credit+Card+Number=1234-1234-1234-1234&Credit+Card+Exipration+Date=12%2F12%2F1222

It is the first parameter and it is still showing up as undefined. Could it be because that the value for prodid is coming in from a .js file? But what I dont get is it displays the value from the .js file in the h4 tag.

0

have you noticed innerHTML, i have used .innerHTML and not .value

document.getElementById("prodid_hidden").value  = document.getElementById("prodid").innerHTML;

Edited by urtrivedi: n/a

0

Ok, I tried that, what that does I believe is add what is between the h4 tags, not what the id is:

file:///C:/Users/AODfan/Desktop/dummy_url.html?prodid_hidden=Product+ID%3A+&First+name=John&Last+name=Doe&Shipping+address=123+E+1st+St&Shipping+City=New+York&Shipping+State=NY&Shipping+Zip=12345&Billing+address=123+E+1st+St&Billing+City=New+York&Billing+State=NY&Billing+Zip=12345&Credit+Card+Type=Visa&Credit+Card+Number=1234-1234-1234-1234&Credit+Card+Exipration+Date=12%2F12%2F1222

0

open your html file in google chrome,
right click on the actual product id (not label).
click on INSPECT ELEMENT.
NOW YOU WILL SEE SOME HTML CODE, POST THAT CODE HERE (related to prod id fetched from js file)

or

if you want me to check here, post your all other js files used

Edited by urtrivedi: n/a

0

Here are my other files:

products_page.html

<!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>Products</title>

	<script src="images/products.js" type="text/javascript"></script>

	<script type="text/javascript">
	
	function checkCheckBoxes( MyForm ) {
	if (
	MyForm.ksport.checked == false &&
	MyForm.ladder.checked == false &&
	MyForm.wheel.checked == false &&
	MyForm.strutbar.checked == false) 
	{
		alert ('You did not choose a product!');
		return false;
	} else { 	
		return true;
	}
}
	

	
		window.onload = function( ) {
			var holder = document.getElementById( "product_thumb_holder" );
			
			for( var x = 0; x < products.length; x++ ){
				var image = document.createElement( "img" );
				image.src = "images/" + products[ x ].name + ".jpg";
				var a = document.createElement( "a" );
				a.href = "order_form.html?image=" + products[ x ].name;
				
				a.appendChild( image );
				holder.appendChild( a );
		
			}
		}
		
		
	</script>

	<style type="text/css">
	.center{ margin:1px auto; width:auto; height:150px; }
	h2 { font: Arial, Sans-serif; font-size: 175%; font-weight: bold; text-align: left; }
	body { font:12px Arial, Sans-serif; } 
	form { width:590px; padding:5px ; background:#f7f7f7; border:1px solid #ddd; } 
	</style>


</head>

<body>
<hr />
<h2>Our Products</h2>

<div id="product_thumb_holder" class="center"></div>
<hr />
<form action="order_form.html" method="get" name="MyForm" onsubmit="return checkCheckBoxes( MyForm )">

<input type="checkbox" name="product[]" value="ksportkontrol">
<label for="" id="" value="K-Sport Coilovers">(1)K-Sport Coilovers</label> <br />
<label value="KSPORT123">Product ID: KSPORT123</label><br />
<label value="899.99">Price: $899.99</label><br />
<label value="Ksport Kontrol Pro Fully Adjustable Coilover Kits provide the ultimate in suspension technology featuring its 36-way adjustable dampening, adjustable spring perch, adjustable body and pillow-ball mounts. ">Description: Ksport Kontrol Pro Fully Adjustable Coilover Kits provide the ultimate in suspension technology featuring its 36-way adjustable dampening, adjustable spring perch, adjustable body and pillow-ball mounts. </label><br /><br />

<input type="checkbox" name="product[]" value="protegebar">
<label for="" id="">(2)Protege Ladder Bar</label><br />
<label value="LADBAR012">Product ID: LADBAR012</label><br />
<label value="49.99">Price: $49.99</label><br />
<label value="GT SPEC 4 Point Ladder Bar for Mazda Protégé (4 Door / 5 Door). Comes in metallic orange color only. Constructed of 6061 / 6063 aluminum with double internal hallow wall for maximum rigidity.">Description: GT SPEC 4 Point Ladder Bar for Mazda Protégé (4 Door / 5 Door). Comes in metallic orange color only. Constructed of 6061 / 6063 aluminum with double internal hallow wall for maximum rigidity. </label><br /><br />

<input type="checkbox" name="product[]" value="racemode">
<label for="" id="">(3)Racemode Wheel</label> <br />
<label value="">Product ID: WHEELRACEM</label><br />
<label value="">rice: $199.99</label><br />
<label value="">Description: Race Mode by Speedy Wheels. Comes in three sizes 15x6.5", 16x7.0" and 17x7.0"  Patterns available: 4/100 (15", 16", 17"), Finishes: Black.  OFFSET for this wheel is +40.</label><br /><br />

<input type="checkbox" name="product[]" value="strutbar">
<label for="" id="">(4)Strut Bar</label> <br />
<label value="">Product ID: STRUTBAR3</label><br />
<label value="">Price: $149.99</label><br />
<label value="">Description: The strut bar come with double internal hallow wall structure for stronger support. The actual bar is make of aluminum with high polish. Constructed by air craft 6061 grade aluminum for rigidity and strength.  </label><br /><br />

<p><input type="submit" value="Go To Checkout" /></p>

</form>
</body>

</html>

products.js

// Products

var products = new Array( );

products.push( {name: 'ksportkontrol', title: 'K-Sport Coilovers', description: 'Ksport Kontrol Pro Fully Adjustable Coilover Kits provide the ultimate in suspension technology featuring its 36-way adjustable dampening, adjustable spring perch, adjustable body and pillow-ball mounts. ', price: '$899.99', prodid:'KSPORT123'} );

products.push( {name: 'protegebar', title: 'Protege Ladder Bar', description: 'GT SPEC 4 Point Ladder Bar for Mazda Protégé (4 Door / 5 Door). Comes in metallic orange color only. Constructed of 6061 / 6063 aluminum with double internal hallow wall for maximum rigidity.', price: '$49.99', prodid:'LADBAR012'} );

products.push( {name: 'racemode', title: 'Racemode Wheels', description: 'Race Mode by Speedy Wheels. Comes in three sizes 15x6.5", 16x7.0" and 17x7.0"  Patterns available: 4/100 (15", 16", 17"), Finishes: Black.  OFFSET for this wheel is +40.', price: '$199.99', prodid:'WHEELRACEM'} );

products.push( {name: 'strutbar', title: 'Strut Bar', description: 'The strut bar come with double internal hallow wall structure for stronger support. The actual bar is make of aluminum with high polish. Constructed by air craft 6061 grade aluminum for rigidity and strength.', price: '$149.99', prodid:'STRUTBAR3'} );


function get_image( name ){
for( var x = 0; x < products.length; x++ )	{
	if( products[ x ].name == name ) {
		return products[ x ];
		}
	}
		return null;
}

and dummy_url.html is just a blank html file

0

at the end line no 360 add this 2 link

var image=  get_image(pair[1]);
        document.getElementById("prodid_hidden").value  = image.prodid;
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.