If..else..if..else Statements using Form Values as conditions

nico_icecold · 02-15-2010, 04:28 PM

Hey all,

Okay, Here is what i would like to do.
I have a calculator here:
http://www.nico-online.co.uk/calculator/calc1.html

which after some help from Dormilich - got working!

Now, I would like to set up some conditions, so if the use selected 'Mountainbike' then, the script will perform a different calculation to if they select the 'Rennrad' option.

Okay, so I was thinking an If..else..if..else statement would probably be best after reading up

This is what I have come up with:

Code:

<script language="JavaScript">
function Framesize()
{
var a = parseFloat(BikeSizer.Insleg.value);
if(BikeSizer.Biketype.value = "Mountainbike")
{
b = (a * 0.572);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}


else if (BikeSizer.Biketype.value = "Trekking-, Reise- oder Cityrad")
{
b = (a * 5);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 5);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}
	
else{
	
	b = (a * 10);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 10);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}

}
</script>

So, I'm not too sure if I can set the Menu values as recongnisable values!

Here are the values I have:

<select name="Biketype" style="font-size:11px;">
<option>Mountainbike</option>
<option>Trekking-, Reise- oder Cityrad</option>
<option>Rennrad</option>
</select>

Anyone out there offer any insight? Am I going horribly wrong somewhere?

Apologies for the stupidness , I am quite new to JS!

Thanks in advance

Philip M · 02-15-2010, 05:11 PM

This should move you forward. You can assign multiple attributes (such as price or framesize) to each option, thus:-

Code:

<form name = "myform">
<select name = "Biketype" style="font-size:11px;" onchange = "getDetails()">
<option value = "" price = "0">Select a bike type</option>
<option value = "Mountainbike" price = "199">Mountainbike</option>
<option value = "Trekking" price = "299">Trekking-, Reise- oder Cityrad</option>
<option value = "Rennrad" price = "149">Rennrad</option>
</select>
</form>

<script type = "text/javascript">
function getDetails() {

var a = document.myform.Biketype.options[document.myform.Biketype.selectedIndex].value;
var b = document.myform.Biketype.options[document.myform.Biketype.selectedIndex].price;
if (a !="") {
alert (a + " " + b);
// then carry out whatever further calculations needed based on price or whatever
}
}
</script>

Note the syntax - document.formname.elementname.value
so e.g.
var a = parseFloat(document.BikeSizer.Insleg.value);

<script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.

BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.

A historian and a psychologist are sitting outside at a nudist colony. Historian: "Have you read Marx?" Psychologist: "Yes, I think they're from the wicker chairs."

jmrker · 02-15-2010, 05:32 PM

Alternative code since 'Philip M' beat me AGAIN!

Code:

<html>
<head>
<title>Switch Calcs</title>
<script type="text/javascript">
function CalcStuff(act) {
  var a = parseFloat(BikeSizer.Insleg.value); 
  switch (act) {
   case '1' :	// Mountainbike
     b = Math.round(a * 0.572);
     c = Math.round(a * 0.226);
     break;
   case '2' :	// Trekking-, Reise- oder Cityrad
     b = Math.round(a * 5);
     c = Math.round(a * 5);
     break;
   case '3' :	// Rennrad
     b = Math.round(a * 10);
     c = Math.round(a * 10);
     break;
   default : alert('Invalid selection');  break;
  }
  document.BikeSizer.FramesizeCM.value = b; 
  document.BikeSizer.FramesizeInch.value = c;
}
</script>

</script>
</head>
<body>
<form name="BikeSizer" onsubmit="return false">
<select name="Biketype" onchange="CalcStuff(this.value)" style="font-size:11px;">
<option value="0">Select</option>
<option value="1">Mountainbike</option>
<option value="2">Trekking-, Reise- oder Cityrad</option>
<option value="3">Rennrad</option>
</select>
<input type="text" name="FramesizeCM">
<br>
<input type="text" name="FramesizeInch">
</form>
</body>

</htm>

Untested, but should be close.
Good Luck!

Philip M · 02-15-2010, 06:50 PM

Something wrong here - the framesize in centimeters cannot be the same as the framesize in inches! But I agree that a switch statement is more elegant than a series of if.....elses.

Dormilich · 02-15-2010, 07:22 PM

I’d calculate the value only once and calculate the inches from the centimeters just before output (last line, so-to-speak)

nico_icecold · 02-16-2010, 11:22 AM

Thanks Guys - I have used the switch statement as it is a little more simple, but only issue I am having is calling the function on the the button press

Here is what I have

Code:

<script type="text/javascript">

function CalcStuff(act) {
  var a = parseFloat(BikeSizer.Insleg.value); 
  switch (act) {
   case '1' :	// Mountainbike
     b = Math.round(a * 0.572);
     c = Math.round(a * 0.226);
     break;
   case '2' :	// Trekking-, Reise- oder Cityrad
     b = Math.round(a * 5);
     c = Math.round(a * 10);
     break;
   case '3' :	// Rennrad
     b = Math.round(a * 10);
     c = Math.round(a * 20);
     break;
   default : alert('Invalid selection');  break;
  }
  document.BikeSizer.FramesizeCM.value = b; 
  document.BikeSizer.FramesizeInch.value = c;
}
</script>

The button is like this:

Code:

<button type="button" style="background:none; border:none;" onClick="CalcStuff(this.value)">
    <img src="images/berechnen_btn.gif" alt="berechnen" width="92" height="22">
</button>

Any ideas where I am going wrong?

Here is a live link to where I am:

http://www.nico-online.co.uk/calculator/calc1.html

Dormilich · 02-16-2010, 11:31 AM

Quote:

Originally Posted by nico_icecold

Any ideas where I am going wrong?

yes.

Code:

<button type="button" style="background:none; border:none;" onClick="CalcStuff(this.value)">

in your script there is no need to pass anything. change act to document.BikeSizer.BikeType.value.

Philip M · 02-16-2010, 11:32 AM

<button type="button" style="background:none; border:none;" onClick="CalcStuff(this.value)">

this.value refers to the value of "this", in this case the button.

Code:

function CalcStuff() {
var act = document.Bikesizer.Biketype.options[document.myform.Biketype.selectedIndex].value;

Donnerwetter! Dormilich me to it has beaten!

nico_icecold · 02-16-2010, 11:46 AM

Great .. Thanks guys

All works nicely :
http://www.nico-online.co.uk/calculator/calc1.html

Dormilich · 02-16-2010, 12:06 PM

Quote:

Originally Posted by Philip M

Code:

function CalcStuff() {
var act = document.Bikesizer.Biketype.options[document.myform.Biketype.selectedIndex].value;

just a question … the value of the select is really easy to get (select.value), but I oh so often see the access via selectedIndex (select.options[select.selectedIndex].value). then I ask myself, why so complicated for a non-multiple select …

Philip M · 02-16-2010, 12:27 PM

Quote:

Originally Posted by Dormilich

just a question … the value of the select is really easy to get (select.value), but I oh so often see the access via selectedIndex (select.options[select.selectedIndex].value). then I ask myself, why so complicated for a non-multiple select …

This issue was raised here some time ago, and there was a feeling that select.value might not work in certain (unspecified) browsers, while selectedIndex (select.options[select.selectedIndex].value) was thought to be sure to work in all browsers. How valid that is I do not know.

Dormilich · 02-16-2010, 12:30 PM

that unspecified browser?

Philip M · 02-16-2010, 12:46 PM

Quote:

Originally Posted by Dormilich

that unspecified browser?

No, not IE! Possibly Konquerer, dildo (?) or something.