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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    retrieving values from options with if statement

    I an designing a website and the user need to select from option of three values. Each option selected have a numerical value. On selection the numerical value attached to the selection will be multiplied by the another value in an input box to get a final value.

    any help is appreciated

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,034
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Here you are:-

    Code:
    <form name='myform'>
    <select name = 'list1' id = 'list1'>
    <option selected value='0'> Choose A Number </option>
    <option value='1'> One </option>
    <option value='2'> Two </option>
    <option value='3'> Three </option>
    </select>
    <br><br>
    
    Another value here <input type = "text" name = "avalue" id = "avalue" onblur = "doIt()"><br><br>
    
    Final Result <input type = "text" name = "result" id = "result"><br><br>
    </form>
    
    
    <script type = "text/javascript">
    
    function doIt() {
    var a = document.myform.avalue.value;
    var s = document.myform.list1.value;
    
    if (!isNaN(a)) {
    document.myform.result.value = a * s;
    }
    
    else {
    alert ("You must enter a number");
    document.myform.avalue.value = "";
    document.myform.avalue.focus();
    return false;
    }
    
    }
    
    </script>
    If the idea is as 12PackMack suggests simply to select a quantity from the drop-down and then multiply by a pre-set price, then the following is quite sufficient unless you like big meals:-

    Code:
    <form name='myform'>
    <select name =  'list1' onchange = "doIt()">
    <option selected value='0'> Choose A Number </option>
    <option value='1'> One Single </option>
    <option value='12'> Box Of Twelve </option>
    <option value='144'> A Gross </option>
    </select>
    <br><br>
    
    Unit Price <input type = "text" name = "avalue" value = "3.75"><br><br>
    
    Total Price <input type = "text" name = "result" readonly><br><br>
    </form>
    
    <script type = "text/javascript">
    
    function doIt() {
    var a = document.myform.avalue.value;
    var s = document.myform.list1.value;
    document.myform.result.value = "$" + (s*a).toFixed(2);
    }
    
    </script>
    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Last edited by Philip M; 07-20-2009 at 08:06 PM. Reason: Different interpretation of what is wanted

  • Users who have thanked Philip M for this post:

    aizedo (07-20-2009)

  • #3
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    aizedo:

    Another approach:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    
    	function calcSubTotal(nVal,nForm){
    
    		var nSubtotal = (nVal * nForm['unitPrice'].value).toFixed(2);
    		nForm['subtotal'].value = nSubtotal;
    	}
    
    	function init(){
    
    		var nForm = document.forms[0];
    		nForm['quantity'].onchange = function()
    			{
    			 calcSubTotal(this.value,nForm);
    			}		
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	.qty_select {width: 135px;}
    	.right {text-align: right;}
    
    </style>
    </head>
    	<body>
    		<form action="" method="post">
    		  
    			<select name="quantity" class="qty_select">
    				<option value=""> Select a Quantity </option>
    				<option value="1"> Single </option>
    				<option value="12"> Box of 12 </option>
    				<option value="144"> A Gross </option>
    			</select>
    			<br><br>
    			<label>Unit Price: <input type="text" name="unitPrice" size="5" value="3.65" class="right" readonly></label>
    			<br><br>
    			<label>Subtotal: $<input type="text" name="subtotal" size="10" class="right" readonly></label>
    
    		</form>
    	</body>
    </html>

  • Users who have thanked 12 Pack Mack for this post:

    aizedo (07-20-2009)

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Quote Originally Posted by aizedo View Post
    I an designing a website and the user need to select from option of three values. Each option selected have a numerical value. On selection the numerical value attached to the selection will be multiplied by the another value in an input box to get a final value.

    any help is appreciated
    A rather vague description. Given that, there's a LOT of ways to go about it. Here's another that just deals with multiplying the selection, but not selecting from a combobox:

    Code:
    <html>
    <head>
    
    <style>
    
    .title {
    	width: 90%;
    	height: 3em;
    	vertical-align: bottom;
    	font-size: 1.2em;
    	border: 1em solid #d7d7d7;
    }
    
    .title LI {
    	display: inline-block;
    	float: left;
    	border-right: .2em solid #000;
    	border-bottom: .5em solid #000;
    	width: 11%;
    	text-align: center;
    }
    
    .title .descrip, .item .descrip {
    	width: 38%;
    }
    
    .item {
    	display: block;
    	clear: both;
    	width: 90%;
    	height: 2em;
    	border-right: 1em solid #eaefe2;
    	border-left: 1em solid #eaefe2;
    	border-bottom: .1em solid #000;
    }
    
    .item LI {
    	display: inline-block;
    	float: left;
    	width: 11%;
    	text-align: right;
    }
    
    .item INPUT {
    	width: 50%;
    	text-align: right;
    	border: none;
    	border-bottom: .2em solid #307;
    }
    
    </style>
    </head>
    
    <body bgcolor="#eaefe2">
    
    <ul class="title">
    <li>ITEMS
    <li>SKU
    <li class="descrip">DESCRIPTION
    <li>PRICE
    <li>QUANTITY
    <li>TOTAL
    </ul>
    
    <ul class="item">
    <li>Item 1
    <li>45998
    <li class="descrip">Really big hat
    <li>$65.00
    <li>x <input>
    <li> 
    </ul>
    
    <ul class="item">
    <li>Item 2
    <li>x4781
    <li class="descrip">Really big buckle
    <li>$25.00
    <li>x <input>
    <li> 
    </ul>
    
    <ul class="item">
    <li>Item 3
    <li>330789
    <li class="descrip">Dan Post, snakeskin, 1 pair
    <li>$125.99
    <li>x <input>
    <li> 
    </ul>
    
    <script>
    
    (function(){
    
    	var ctrlInput = document.getElementsByTagName("input");
    	var ctrlInputLen = ctrlInput.length;
    	for (var i=0; i<ctrlInputLen; i+=1){
    		ctrlInput[i].onchange = function(){ var el=this.parentNode; el.nextSibling.innerHTML ="$" +parseInt(el.previousSibling.innerHTML.substr(1) *this.value *100)/100; this.value=this.value+" "; }
    	}
    
    })();
    
    </script> 
    
    </body>
    </html>
    Last edited by fside; 07-20-2009 at 07:38 PM.

  • Users who have thanked fside for this post:

    aizedo (07-20-2009)

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks all that responded, i have really had sleepless nights try to figure it out
    i think the response is ok
    thanks again to all


  •  

    Posting Permissions

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