Passing variables to shopping cart with Javascript
- by albatross
This question is an extension of this one:
http://stackoverflow.com/questions/2359238/calculate-order-price-by-date-selection-value
I'm trying to make a conference registration page based off the previous page, which passes the variables(name, email, price) to my organization's outdated shopping cart using javascript. I'm also using Seminar Registration by CSSTricks (http://css-tricks.com/examples/SeminarRegTutorial/)
Currently, my proceed to payment button produces an 'element is undefined' error on line 298(same thing on unresolved previous question, linked above^):
switch (document.Information.amount.value) {
Any help would be greatly appreciated. I'm at my wits end with this. Here is the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Seminar Registration Form with jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script src="js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<script src="js/form-fun.jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if IE]>
<style type="text/css">
legend {
position: relative;
top: -30px;
}
fieldset {
margin: 30px 10px 0 0;
}
</style>
<script type="text/javascript">
$(function(){
$("#step_2 legend").css({ opacity: 0.5 });
$("#step_3 legend").css({ opacity: 0.5 });
});
</script>
<![endif]-->
</head>
<body>
<div id="page-wrap">
<h1>Conference <span>Registration</span></h1>
<form action="#" method="post">
<fieldset id="step_1">
<legend>Step 1</legend>
<label for="num_attendees">
How cool are you?
</label>
<select id="amount">
<option id="0" value="0">Please Choose</option>
<option id="prof" value="90.00">Professional</option>
<option id="grad" value="55.00">Graduate Student</option>
</select>
<br />
<div id="attendee_1_wrap" class="name_wrap push">
<h3>Who are you?</h3>
<p>
<label for="FirstName">
First Name:
</label>
<input type="text" id="FirstName" class="name_input"></input>
</p>
<p>
<label for="LastName">
Last Name:
</label>
<input type="text" id="LastName" class="name_input"></input>
</p>
<p>
<label for="OfficialTitle">
Official Title:
</label>
<input type="text" id="OfficialTitle" class="name_input"></input>
</p>
<h3>How do we find you?</h3>
<label for="email">Email: </label>
<input id="email" name="email" class="required email" />
</p>
<p>
<label for="Address">Street Address: </label><input name="Address" id="Address" type="text" size="20" maxlength="75" />
</p>
<p>
<label for="City">City: </label><input name="City" id="City" />
</p>
<p>
<label for="State">State: </label><select name="State" id="State">
<option selected value="IL">IL</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
</p>
<p>
<label for="Zip">Zip Code: </label><input name="Zip" id="Zip" type="text" value="" size="5" maxlength="10" />
</p>
<p>
<label for="Phone">Telephone: </label><input name="Phone" id="Phone" type="text" value="" size="10" maxlength="13" />
</p>
</div>
</fieldset>
<fieldset id="step_2">
<legend>Step 2</legend>
<p>
Do you work in Higher Education?
</p>
<input type="radio" id="company_name_toggle_on" name="company_name_toggle_group"></input>
<label for="company_name_toggle_on">Yes</label>
 
<input type="radio" id="company_name_toggle_off" name="company_name_toggle_group"></input>
<label for="company_name_toggle_off">No</label>
<div id="company_name_wrap">
<label for="company_name">
Which School?
</label>
<input type="text" id="company_name"></input>
</div>
<div class="push">
<p>
Will anyone in your group require special accommodations?
</p>
<input type="radio" id="special_accommodations_toggle_on" name="special_accommodations_toggle"></input>
<label for="special_accommodations_toggle_on">Yes</label>
 
<input type="radio" id="special_accommodations_toggle_off" name="special_accommodations_toggle"></input>
<label for="special_accommodations_toggle_off">No</label>
</div>
<div id="special_accommodations_wrap">
<label for="special_accomodations_text">
Please explain below:
</label>
<textarea rows="10" cols="10" id="special_accomodations_text"></textarea>
</div>
</fieldset>
<fieldset id="step_3">
<legend>Step 3</legend>
<label for="rock">
Are you ready to rock?
</label>
<input type="checkbox" id="rock"></input>
<p>
<INPUT onclick="javascript:PaymentButtonClick()" type=button value="Proceed to payment" name=PaymentButton>
<img src="images/visa1.gif" />
<img src="images/mastercard1.gif" />
</p>
</fieldset>
</form>
</div>
<FORM name="emailForm" action="mailform.asp" method=post">
<INPUT type="hidden" value="Conference Registration" name="mf_subject">
<INPUT type="hidden" value="Yes" name="mf_email_results">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="20" name="num_attendees">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="FirstName">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="22" name="LastName">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="64" name="OfficialTitle">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="40" name="email">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="48" name="Address">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="City">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="State">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="Zip">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="Phone">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffa0" size="17" name="company_name">
<INPUT type="hidden" title="" style="BACKGROUND-COLOR: #ffffff" size="20" name="special_accomodations_text">
<INPUT type="hidden" value="[email protected]" name="mf_from">
<INPUT type="hidden" value="[email protected]" name="mf_to">
</FORM>
<FORM name="addform" action="https://webcluster.niu.edu/CreditCard/servlet/Shopping_Cart_Add_Item_Servlet" method="post">
<INPUT type="hidden" value="orient" name="Dept_ID">
<INPUT type="hidden" value="Orientation" name="Product_Name">
<INPUT type="hidden" value="z000000" name="Product_Code">
<INPUT type="hidden" value="" name="amount">
<INPUT type="hidden" value="/orientation/index.shtml" name="return_link">
<INPUT type="hidden" value="http://www.niu.edu" name="return_server">
<INPUT type="hidden" value="1" name="quantity"> <INPUT type="hidden" value="0" name="tax">
<INPUT type="hidden" value="0" name="ship"> <INPUT type="hidden" value="DQ83225" name="sale_id">
<INPUT type="hidden" value="XXXXXX" name="sale_acct">
</FORM>
<SCRIPT language="Javascript">
function PaymentButtonClick() {
switch (document.Information.amount.value) {
case 'prof':
document.Information.amount.value = 90.00;
break;
case 'grad':
document.Information.amount.value = 55.00;
break;
}
document.addform.Product_Name.value = document.Information.FirstName.value + ","+
document.Information.LastName.value+","+
document.Information.OfficialTitle.value+","+
document.Information.email.name+","+","+
document.Information.Address.value+ "," +
document.Information.City.value+ "," +
document.Information.State.value+ "," +
document.Information.Zip.value+ "," +
document.Information.Phone.value+ "," +
document.Information.company_name.value+ "," +
document.Information.special_accomodations_text.value;
document.addform.Product_Code.value = document.Information.LastName.value;
if ((document.Information.UCheck.checked==true) &&
(document.Information.altDate1.value != "") &&
(document.Information.altDate1.value != "x")) {
if (document.Information.StudentLastName.value != "" ||
document.Information.StudentFirstName.value != "" ||
document.Information.StudentID.value != "" ) {
document.addform.submit();
}
else {
alert("Please enter missing information");
}
}
}
</SCRIPT>
</body>
</html>
