...

View Full Version : 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
<!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.



<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
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum