JavaScript function not returning string

JavaScript
1

Hi everyone,

I have a hunch that my function is not returning the string value. Below runs some information about the code:

getvalues_2() - A function that recognizes the value of the string selected by the user from the drop down list and sends it to a variable. Variable name is ‘groom_profession’ here.

Based on the value (text) returned, it assigns a particular number to the variable ‘profession’ in this case.

But, I have been noticing that irrespective of the value chosen from the drop down list, the variable ‘profession’ is assigned a default value from the switch case statement. I know the variable (textval_2) is able to store the correct value from the drop down list with the help of an alert command. But, it fails while returning the value. I even tried initializing the string in the function body but to no avail. What could be wrong here?

Following is the code for one of the drop-down lists:



<b> Groom's current Profession </b>


<FORM NAME="Profession">
<SELECT NAME="Groomprofession" onchange = "getvalues_2()">

<OPTION VALUE="c1">Select </OPTION>
<OPTION VALUE="c2">Doctor </OPTION>
<OPTION VALUE="c3">Engineer </OPTION>
<OPTION VALUE="c4">Lawyer </OPTION>
<OPTION VALUE="c5">CA </OPTION>
<OPTION VALUE="c6">IAS </OPTION>
<OPTION VALUE="c7">Engineer + MBA </OPTION>
<OPTION VALUE="c8">Family Business </OPTION>
<OPTION VALUE="c9">None of the above </OPTION>
</SELECT>
</FORM>

Following is the code for function getvalues_2() declaration:



<script type = "text/javascript">

function getvalues_2() {
var val_2 = document.Profession.Groomprofession.value;
var si_2 = document.Profession.Groomprofession.selectedIndex;
if (si_2 != 0) {
var textval_2 = " ";
textval_2 = document.Profession.Groomprofession.options[si_2].text;

//alert (val_2);  // for testing
//alert (textval_2); // for testing
return (textval_2);
}
}
</script>

Following is the code for the switch case statement:



<script type="text/javascript">

var profession;
groom_profession = getvalues_2();

switch(groom_profession)

{

case "Engineer" : profession = 1.8;
break;

case "Doctor" : profession = 1.9;
break;

case "Lawyer" : profession = 1.65;
break;

case "CA" : profession = 1.7;
break;

case "IAS" : profession = 2.0;
break;

case "Family Business" : profession = 1.5;
break;

case "Engineer + MBA" : profession = 1.95;
break;

case "None of the above" : profession = 1.95;
break;

default: profession = 0.6;

}
</script>

The website has a total of 11 drop-down lists (so 11 functions like getvalues, and 11 switch case statements. I thought if I could get one to work, the others might follow suit too). I would be really grateful if someone could look into my problem and suggest where I am going wrong. Thanks a lot!

2

The code that assigns the variable groom_profession seems to only run when the page loads.

I presume that you want it to updat whenever the select box changes?

3

Thanks a lot for your reply, Paul. Yes, I would like the variable to be updated whenever the select box changes. What should I do to reflect that change?

4

As a test, this works (if I am understanding you correctly):


<html>
	<head>

	</head>
	<body>
		<b> Groom's current Profession </b>
		<FORM NAME="Profession">
			<SELECT NAME="Groomprofession">
				<OPTION VALUE="c1">Select </OPTION>
				<OPTION VALUE="c2">Doctor </OPTION>
				<OPTION VALUE="c3">Engineer </OPTION>
				<OPTION VALUE="c4">Lawyer </OPTION>
				<OPTION VALUE="c5">CA </OPTION>
				<OPTION VALUE="c6">IAS </OPTION>
				<OPTION VALUE="c7">Engineer + MBA </OPTION>
				<OPTION VALUE="c8">Family Business </OPTION>
				<OPTION VALUE="c9">None of the above </OPTION>
			</SELECT>
			<div id="proNum"></div>
		</FORM>

		<script>
			window.onload = function() {
				var groomFrm = document.Profession.Groomprofession;
				groomFrm.onchange = function() {
					profNum( getvalues_2(),  'proNum' );
				}
			};
		
			function getvalues_2() {
				var val_2 = document.Profession.Groomprofession.value;
				var si_2 = document.Profession.Groomprofession.selectedIndex;
				if (si_2 != 0) {
					var textval_2 = " ";
					return document.Profession.Groomprofession.options[si_2].text;
				}
			}
			
			function profNum( val, div ) {
				var profession;
				switch( val ) {
					case "Engineer" : profession = 1.8;
					break;
					case "Doctor" : profession = 1.9;
					break;
					case "Lawyer" : profession = 1.65;
					break;
					case "CA" : profession = 1.7;
					break;
					case "IAS" : profession = 2.0;
					break;
					case "Family Business" : profession = 1.5;
					break;
					case "Engineer + MBA" : profession = 1.95;
					break;
					case "None of the above" : profession = 1.95;
					break;
					default: profession = 0.6;
				}
				document.getElementById( div ).innerHTML = profession;
			}		
		</script>
	</body>
</html>
5

You should put the second script in function so that you can call that second script from the onchange event instead.

You then need to consider how you want to use the profession information.