Forum Moderators: open

Message Too Old, No Replies

Using a form SELECT option in Javascript

Trouble getting at the string....

         

trillianjedi

8:29 pm on Mar 25, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi all,

I have here a small function:-

function doStuff(){
var myapplet = document.getElementById('appletthing');
var keyselection = document.getElementById('myselect');
var keyvalue = keyselection.options[keyselection.selectedIndex];
alert("Doing thing ("+keyvalue.value+")");

myapplet.doYourThing(keyvalue.value);
return false;
}

The idea is that I take a value from an HTML form select box and send it off as a string to this applets doYourThing function.

The select looks like:-


<select id="myselect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

I put the "alert" dialogue in the JS function to assist debugging, but it doesn't actually get that far.

Am I doing something silly ?

Fotiman

8:49 pm on Mar 25, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Are you sure your doStuff function is getting called? I just put together a quick test case and it works fine for me:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test SELECT Element Value</title>
</head>
<body>
<form action="">
<div>
<select id="myselect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="button" id="test" value="Test">
</div>
</form>
<script type="text/javascript">
function doStuff(){
var myapplet = document.getElementById('appletthing');
var keyselection = document.getElementById('myselect');
var keyvalue = keyselection.options[keyselection.selectedIndex];
alert("Doing thing ("+keyvalue.value+")");
return false;
}
var elTest = document.getElementById('test');
elTest.onclick = doStuff;
</script>
</body>
</html>

lavazza

9:01 pm on Mar 25, 2009 (gmt 0)

10+ Year Member



Maybe, instead of
var keyvalue = keyselection.options[keyselection.selectedIndex];
try
var keyvalue = keyselection.options[keyselection.selectedIndex].value;


and then, instead of
alert("Doing thing ("+keyvalue.value+")");
try
alert('Doing thing: ' + keyvalue );

trillianjedi

9:35 am on Mar 31, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks for the help guys.

Strange thing is, Fotimans version works fine, mine doesn't.

Only difference appears to be that I'm setting the onClick in the element itself, Fotiman is setting it with JS.

Haven't got time at the moment to get an understanding of the difference but will try to get around at looking at that later.

trillianjedi

11:25 am on Mar 31, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Worked it out - I had two elements both with the same ID.

Thanks for the help - all up and running now.

MichaelBluejay

9:39 pm on Mar 31, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I can't tell you how many times that same thing has tripped me up (multiple elements with the same ID). In some browsers I also can't use variable names that are the same as element ID's, I think.