calling a function from a select box?

Discussion in 'JavaScript' started by pHrEaK, Mar 28, 2011.

0
  1. #1
    Having some issues here. What I'm trying to do is call a function whenever an option is selected from a select box. This is the code that I've come up with:
    

<script type="text/javascript">
/* <![CDATA[ */

function firstSelect() {
var selectedItem = document.firstSelect.boxOne.selectedIndex;
	if (selectedItem == 0){
		document.write("<p>you have selected coke</p>");
		}
	}

/* ]]> */
</script>
</head>

<body>
<form name="firstSelect">
	<select name="boxOne">
		<option>Coke</option>
		<option>Pepsi</option>
		<option>Dr.Pepper</option>
		<option>Mt. Dew</option>
		<option>Sprite</option>
	</select>
</form>

</body>
</html>
    Code (markup):
    I've tried using onclick="firstSelect()" and I've tried using onchange="firstSelect()" in the select tag...In internet explorer this yields the error: "Object does not support this property or method"

    Any ideas? I'm sure there's probably something simple I'm overlooking :confused:
     
    pHrEaK, Mar 28, 2011 IP
  2. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #2
    This error occurs, when you have the same attribute name and name of the function. Try this:

    
<html>
<head>
<script type="text/javascript">
/* <![CDATA[ */

function firstSelectFunction() {
var selectedItem = document.getElementById("boxOne").selectedIndex;
	if (selectedItem == 0){
		document.write("<p>you have selected coke</p>");
		}
	}

/* ]]> */
</script>
</head>

<body>
<form name="firstSelect">
	<select name="boxOne" id="boxOne" onchange="firstSelectFunction()">
		<option>Coke</option>
		<option>Pepsi</option>
		<option>Dr.Pepper</option>
		<option>Mt. Dew</option>
		<option>Sprite</option>
	</select>
</form>

</body>
</html>
    Code (markup):
     
    Jan Novak, Mar 28, 2011 IP
  3. pHrEaK

    pHrEaK Active Member

    Messages:
    147
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Beautiful! That's what it was. Thanks friend :)
     
    pHrEaK, Mar 28, 2011 IP
  4. job0107

    job0107 Peon

    Messages:
    23
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    When you use document.write() in the context that you are using it, the current HTML form and it's elements get written over.
    So in essence it would be the same as saying:
    
<html>
<head>
<script type="text/javascript">
function displayValue(v) {
    document.getElementById("results").innerHTML = "<p>You have selected "+v+"</p>";
    document.getElementById("firstSelect").style.display = "none";
}
</script>
</head>
<body>
<form name="firstSelect" id="firstSelect">
	<select name="boxOne" onchange="displayValue(this.value);">
	   <option value="">......</option>
		<option value="Coke">Coke</option>
		<option value="Pepsi">Pepsi</option>
		<option value="Dr.Pepper">Dr.Pepper</option>
		<option value="Mt. Dew">Mt. Dew</option>
		<option value="Sprite">Sprite</option>
	</select>
</form>
<div id="results"></div>
</body>
</html>
    HTML:
    Wouldn't it be better to use the JavaScript to manipulate the HTML rather than over-write it?
    
<html>
<head>
<script type="text/javascript">
function displayValue(v) {document.getElementById("results").innerHTML = v ? "<p>You have selected "+v+"</p>" : "";}
</script>
</head>
<body>
<form name="firstSelect">
	<select name="boxOne" onchange="displayValue(this.value);">
	   <option value="">......</option>
		<option value="Coke">Coke</option>
		<option value="Pepsi">Pepsi</option>
		<option value="Dr.Pepper">Dr.Pepper</option>
		<option value="Mt. Dew">Mt. Dew</option>
		<option value="Sprite">Sprite</option>
	</select>
</form>
<div id="results"></div>
</body>
</html>
    HTML:
     
    Last edited: Mar 28, 2011
    job0107, Mar 28, 2011 IP