Menu
?I am having trouble making a website for a vacation rental
I pieced this javascript code and form together with a simple goal in mind:
-to have 3 checkboxes each with its unique variable
weeks: 2,000
weekends: 325
weekdays: 275
-to allow users to check one or more of the checkboxes, and multiply it by a quantity they choose (ie “I’d like to stay for two weeks (2 x 2,000=6,000) and one weekday (1 x 275=275)
-finally, to add up the totals at the end (6,000 + 275=6,275)
Any ideas? THANK YOU!!!
Here is the link to my page and the script I used below:
[url]http://www.lilbitprints.com/vacarental/quotespring.html
<head>
<script type=”text/javascript”>
function processForm() {
//get form variables
var theItems = document.getElementsByName( “item” );
var theQty = Number( document.getElementById( “qty” ).value );
//variable for selected item
var selectedItem;
//variable for order total
var orderTotal = 0.00;
//the display box
var outBox = document.getElementById( “total” );
//set selectedItem = checked item
for(var i = 0; i < theItems.length; i++) {
if( theItems[i].checked) {
selectedItem = theItems[i].value;
break;
}
}
//get price for selected item
switch(selectedItem) {
case “A”:
total = 2000.00;
break;
case “B”:
total = 450.00;
break;
case “C”:
total = 400.00;
break;
default:
total = 0.00;
}
//figure final total
total = (total * theQty) ;
//output to text box
outBox.value = “$” + total.toString();
}
</script>
</head>
<body>
<form id=”form1″ action=”” method=”get”>
<table>
<tr>
<fieldset>
<legend>Springtime (May 25th – June 29th)</legend>
<input type=”radio” name=”item” value=”A” />Full Weeks <br />
<input type=”radio” name=”item” value=”B” />Weekday Nights <br />
<input type=”radio” name=”item” value=”C” />Weekend Nights
</fieldset>
</td>
</tr>
<tr>
<td colspan=”3″>
How many weeks or nights will you be staying with us? <input type=”text” id=”qty” size=”3″ maxlength=”3″ value=”1″ /> <br />
<input type=”button” id=”submit” value=”Calculate Order Total” onclick=”processForm()” />
</form>
Your total: <input type=”text” id=”total” size=”10″ maxlength=”10″ readonly=”readonly” value=”0″ />
</td>
</tr>
</table>
</body>