I have a listbox:
<select name="drop1" id="test" onclick="showme()"> </select>
which I populate onload. When user clicks an item in the listbox
function showme() fires up. How do I get the listbox object and which
item (index) was clicked? I don't want to use getElementsById.
function showme()
{
var i;
i=this; //this won't work
..
}
I looked up google but just could not find a solution. The question may
be to elementary! I am learning JavaScript!
1) Why don't you want to use document.getElementById?
2) Why use the onclick handler? This will trigger when someone clicks on
the select field, possibly before they have chosen their option. It might
be better to use "onchange" which will trigger after they change the
field, or even onblur, which will trigger when they leave the field,
whether they changed it or not.
User clicks on a field. onclick event triggers.
User clicks on or tabs to a field. onfocus event triggers.
User tabs or clicks away from a field. onblur event triggers.
User clicks on or tabs to a field, changes the field, clicks or tabs away
from the field. onchange and onblur events occur.
3) I think you can use this in the event attribute of the html tag. Try
the following:
<!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=us-ascii">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title>event tests</title>
<script type='text/javascript'>
function clicked(obj) {sendOutput('Clicked: ' +
obj.name + '/' + obj.id);}
function changed(obj) {sendOutput('Changed: ' +
obj.name + '/' + obj.id);}
function focused(obj) {sendOutput('Focused: ' +
obj.name + '/' + obj.id);}
function blurred(obj) {sendOutput('Blurred: ' +
obj.name + '/' + obj.id);}
function sendOutput(msg) {
var theField = document.getElementById('output1');
var txt = theField.value.split('\n');
var l = txt.push(msg);
if (l > theField.rows) txt.shift();
theField.value = txt.join('\n');
}
function init() {document.getElementById('output1').value='';}
</script>
</head>
<body onload='init()'>
<form action='events.htm' method='get'>
<p>
Text:
<input type='text' name='field1' id='field1'
onclick='clicked(this)' onfocus='focused(this)'
onchange='changed(this)' onblur='blurred(this)'>
Select:
<select name='field2' id='field2'
onclick='clicked(this)' onfocus='focused(this)'
onchange='changed(this)' onblur='blurred(this)'>
<option value='0'>Choose ...</option>
<option value='1'>Andrew</option>
<option value='2'>Brian</option>
<option value='3'>Colin</option>
<option value='4'>David</option>
<option value='5'>Edward</option>
</select>
Checkbox:
<input type='checkbox' name='field3' id='field3'
onclick='clicked(this)' onfocus='focused(this)'
onchange='changed(this)' onblur='blurred(this)'>
Radio: [
1:
<input type='radio' name='field4' id='field4[0]' value='0'
onclick='clicked(this)' onfocus='focused(this)'
onchange='changed(this)' onblur='blurred(this)'>
2:
<input type='radio' name='field4' id='field4[1]' value='1'
onclick='clicked(this)' onfocus='focused(this)'
onchange='changed(this)' onblur='blurred(this)'>
3:
<input type='radio' name='field4' id='field4[2]' value='2'
onclick='clicked(this)' onfocus='focused(this)'
onchange='changed(this)' onblur='blurred(this)'>
4:
<input type='radio' name='field4' id='field4[3]' value='3'
onclick='clicked(this)' onfocus='focused(this)'
onchange='changed(this)' onblur='blurred(this)'> ]
<br>
<textarea cols='30' rows='30' name='output1' id='output1'>
</textarea>
</p>
</form>
</body>
</html>
As you navigate between (using mouse or k/b) and change the form fields,
it will display the sequences of events that are triggered in the
textarea. This might help you determine which events are best to use for
your purpose.
Rgds
Denis McMahon
