forms and javascript

Sugarcoma101 · 12-08-2004, 12:08 PM

hello! im looking for some help with a form. I have a form made out with product prices and names, with checkboxes. There is a total box at the end. Once a checkbox is ticked (more than one can be ticked) a calculate button at the end gives you the total. This works fine.

Im using :
if(document.products.check1.checked==true){
Total +=25;}<!25 is the price of 1 product!>

now however i want to add a shipping option to a drop down menu, as in shipping to europe, if this is selected, add 5 euros to the overall total, the same one as used with the products form above, but im not sure how?

Also, I want to add a pop up alert saying something like "please chose at least 1 product" if the total button is pressed without a checkbox being checked on the products from.

All very basic questions i know but im new at this and a bit stuck!

Thanks!!!

Sugarcoma101 · 12-08-2004, 02:23 PM

please help its driving me crazy

Sugarcoma101 · 12-08-2004, 03:01 PM

here is a copy of my code:

<table border=1 width=500 height=50 background="clouds.gif">

<tr>

<td align=left> <b>Calculate Shipping</b> </td>

</tr>

</table>
<br>
<br>
<br>

<form name="products">

<table border=1 width=200 height=10 cellpadding=10 bgcolor="ADBBFF">
<caption> Select products below </caption>
<tr>
<td align=center> <b> Product 1 </b> </td><td align=center><b>25</b></td><td align center><input type = checkbox name =

check1 ></td>
</tr>
<tr>
<td align=center><b> Product 2 </b> </td> <td align=center><b>50</b></td><td align center><input type = checkbox name =

check2 ></td>
</tr>
<tr>
<td align=center><b> Product 3 </b> </td> <td align=center><b>100</b></></td><td align center><input type = checkbox name =

check3 >
</tr>
</form>

</table>

<form name="delivery">
Where do you want your products delivered to?
<select name=status>
<option selected value = "none"> Choose Shipping Option ...</option>
<option value ="irl">Ireland(2.00)
<option value = "roe">Rest Of Europe (3.00)
<option value = "row">Rest of world (7.00)
</select>
<p>

</form>

<form name = form1>
<input type = text size = 6 name = "ship1" value="-total-">

<input type = button name = button1 value = "calculate"

onClick='

Total = 0;

if(document.products.check1.checked){
Total +=25;}

if(document.products.check2.checked){
Total +=50;}

if(document.products.check3.checked){
Total +=100;}

if (document.delivery.status.value == "irl"){
Total+=2;}

else if (document.delivery.status.value =="roe"){
Total+=3;}

else if (document.delivery.status.value =="row"){
Total+=7;}

document.form1.ship1.value = Total;

'>

</form>

which displays 2 forms, one for shipping information and one for product information. how do i display an alert if no product boxes are ticked, or if no shipping info is selected? im basically stuck on how to write the javascript function to do this. help?

hemebond · 12-08-2004, 08:27 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>48627</title>
		<style type="text/css">
			p#total_text	{
				display:none;
			}
			label	{
				display:block;
				float:left;
				width:8em;
			}
		</style>
	</head>
	<body>
		<form name="products" onsubmit="calculate();return false">
			<fieldset>
				<legend>Select products below</legend>

				<div>
					<label for="check1">Product 1 <span class="price">25</span></label>
					<input id="check1" name="check1" type="checkbox">
				</div>

				<div>
					<label for="check2">Product 2 <span class="price">50</span></label>
					<input id="check2" name="check2" type="checkbox">
				</div>

				<div>
					<label for="check3">Product 3 <span class="price">100</span></label>
					<input id="check3" name="check3" type="checkbox">
				</div>
			</fieldset>

			<fieldset>
				<label for="destination">Destination</label>
				<select id="destination" name="destination">
					<option value="irl">Ireland (2.00)</option>
					<option value="roe">Rest Of Europe (3.00)</option>
					<option value="row">Rest of world (7.00)</option>
				</select>
			</fieldset>

			<input type="button" value="calculate" onclick="calculate()">
		</form>

		<p id="total_text">The total cost comes to <span id="total"> </span></p>

		<script type="text/javascript">
			function calculate()
			{
				document.getElementById("total_text").style.display = "none";

				var total = 0;
				total += (document.getElementById("check1").checked) ? 25 : 0;
				total += (document.getElementById("check2").checked) ? 50 : 0;
				total += (document.getElementById("check3").checked) ? 100 : 0;

				if(total == 0)
				{
					return;
				}

				switch(document.getElementById("destination").value)
				{
					case "irl":
						total += 2;
						break;
					case "roe":
						total += 3;
						break;
					case "row":
						total += 7;
						break;
				}
				document.getElementById("total").replaceChild(document.createTextNode(total), document.getElementById("total").firstChild);
				document.getElementById("total_text").style.display = "block";
			}
		</script>
	</body>
</html>

Basscyst · 12-08-2004, 09:04 PM

Here is another one. Your's doesn't seem to be working Heme.

Code:

<html>
	<head>
		<style type="text/css">
			table
			{
				text-align:center;
				background-color:#ADBBFF;
				padding:10px;
			}
			
			.txt
			{
				width:50px;
				background-color:#E5E5E5;
			}
			
			td
			{
				border:solid 1px;
				border-color:#000;
			}
			
			th
			{
				border:solid 1px;
				border-color:#000;
			}
			
			#hdr
			{
				border:solid 1px;
				font-weight:bold;
				width:150px;
				text-align:center;
			}
		</style>
		<script type="text/javascript">
			
			function calc()
			{
				var stat=false;
				var frm=new Array();
				var ttl=0;
				frm[0]=document.forms[0].elements[0];
				frm[1]=document.forms[0].elements[1];
				frm[2]=document.forms[0].elements[2];
				frm[3]=document.forms[0].elements[3].options[document.forms[0].elements[3].selectedIndex];
				for(var i=0;i<frm.length;i++)
				{
					if(frm[i].checked)
					{
						stat=true;
						ttl=ttl+frm[i].value*1;
					}
				}
				if(stat==false)
				{
					alert("Please select at least one product and a shipping option!");return;
				}
				if(frm[3].value=="")
				{
					alert("Please select a shipping option");
				}
				else
				{
					ttl=ttl+frm[3].value*1;
					document.forms[0].elements[5].value=ttl;
				}
			}
		</script>
	</head>
	<body>
		<div id="hdr">
			Calculate Costs
		</div>
		<form name="products">
			<table>
				<thead>
					<th colspan="3">Select products below.</th>
				</thead>
				<tr>
					<th>Product 1</th>
					<th>25</th>
					<td><input type="checkbox" value="25" name="check1"></td>
				</tr>
				<tr>
					<th>Product 2</th>
					<th>50</th>
					<td><input type="checkbox" value="50" name="check2"></td>
				</tr>
				<tr>
					<th>Product 3</th>
					<th>100</th>
					<td><input type="checkbox" value="100" name="check3"></td>
				</tr>
				<tr>
					<td colspan="3">
						<select name="status">
							<option selected value="">Choose Shipping Option ...</option>
							<option value="2.00">Ireland(2.00)</option>
							<option value="3.00">Rest Of Europe (3.00)</option>
							<option value="7.00">Rest of world (7.00)</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><input type="button" name="button1" value="Calculate" onclick="calc()" /></td>
					<th colspan="2">Total</th>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td colspan="2">$<input class="txt" onfocus="this.blur()" type="text" name="ship1" value="0.00" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>

Basscyst

hemebond · 12-08-2004, 09:12 PM

Quote:

Originally Posted by Basscyst

Here is another one. Your's doesn't seem to be working Heme.

Only in Internet Explorer. It doesn't like the replaceChild line. That should be easy to work around.

Basscyst · 12-08-2004, 09:14 PM

I see, that would explain it. Only have IE here at work.

Basscyst