Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    forms and javascript

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

  • #2
    New Coder
    Join Date
    Dec 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please help its driving me crazy

  • #3
    New Coder
    Join Date
    Dec 2004
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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>

  • #5
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    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
    Last edited by Basscyst; 12-08-2004 at 10:13 PM.
    Helping to build a bigger box. - Adam Matthews

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #7
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    I see, that would explain it. Only have IE here at work.

    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •