PDA

View Full Version : Accessing Inner Elements

revolver_ocelot
07-06-2009, 06:22 AM
Hey All

I've been doing web dev for a good while but I've just started into Javascript and am having trouble retrieving values.


<html>

<head>
<title>New Page 10</title>
<script Language="JavaScript"><!--
function checkData()
{

var myTest = myForm.mySelectField.options[myForm.mySelect.selectedIndex].value;
alert(myTest);
}
</script>

</head>

<body>
<div id="1">
<div id="2">
<form method="POST" name="myForm">
<select size="1" name="mySelectField" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</div>
<div>
</body>

</html>

What I just want to know is what is the proper way of referencing the select list so i can retrieve the values in it? At the moment I cannot retrieve the values from the form, is it because it is nested in the divs?

Any help you can bring is much appreciated
revolver_ocelot
07-06-2009, 06:50 AM
Hey All

I answered my own question so if anyone else ever has this problem all you need to do is add

var myTest = document.myForm.mySelectField.options[document.myForm.mySelect.selectedIndex].value;


If there is a problem I could be causing myself please let me know
coothead
07-06-2009, 06:52 AM
Hi there revolver_ocelot,

here is your page corrected and validated...

<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>New Page 10</title>

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

var myTest = document.myForm.mySelectField.options[document.myForm.mySelectField.selectedIndex].value;
alert(myTest);
}
</script>

</head>
<body>

<div id="n1">
<div id="n2">

<form action="#" method="POST" name="myForm">
<p>
<select size="1" name="mySelectField" onChange="checkData()">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">
</p>
</form>

</div>
</div>

</body>
</html>
coothead
07-06-2009, 07:05 AM
Hi there revolver_ocelot,

you may also be interested in a rather more modern method of doing this...


<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>New Page 10</title>

<style type="text/css">
fieldset {
border:0;
}
</style>

<script type="text/javascript">

function checkData() {

document.forms[0][1].onchange=function() {
myTest=this.value;
alert(myTest);
}
}

if(window.addEventListener){
window.addEventListener('load',checkData,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',checkData);
}
}
</script>

</head>
<body>

<form action="#" method="post">

<fieldset>

<select size="1" name="mySelectField">
<option value="99">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<input type="submit" value="Submit">
<input type="reset" value="Reset">

</fieldset>

</form>

</body>
</html>