...

View Full Version : retrieving values from options with if statement



aizedo
07-20-2009, 07:20 PM
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

Philip M
07-20-2009, 08:01 PM
Here you are:-



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


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

12 Pack Mack
07-20-2009, 08:32 PM
aizedo:

Another approach:


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

fside
07-20-2009, 08:36 PM
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:



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

aizedo
07-20-2009, 11:01 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum