Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Cross browsers form select element event handler

Reply
Thread Tools

Cross browsers form select element event handler

 
 
alvinwoon@gmail.com
Guest
Posts: n/a
 
      02-04-2007
Hi guys,

I find it frustrating that I need to sniff out IE to make event
handler for the form's select element work across different browsers.
Here's a summary of what I have right now:

var select = /*get the form select element*/
var option = /*get all the option elements*/

if(document.all){

addEvent(select,"change",executeFunction);

}

else{

addEvent(option[i],"click",executeFunction);

}

FYI, I am using John Resig's addevent.

Any advises would be much helpful. Thanks

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      02-05-2007
http://www.velocityreviews.com/forums/(E-Mail Removed) said the following on 2/4/2007 12:10 PM:
> Hi guys,
>
> I find it frustrating that I need to sniff out IE to make event
> handler for the form's select element work across different browsers.


Your code doesn't "sniff out IE", it sniffs out document.all support.
The difference is huge when it comes to Opera and others.

And, the form's select element event handlers work fine, it is the event
handler for OPTION elements you are having problems with.

> FYI, I am using John Resig's addevent.


Never heard of it.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
 
alvinwoon@gmail.com
Guest
Posts: n/a
 
      02-05-2007
On Feb 5, 12:08 pm, Randy Webb <(E-Mail Removed)> wrote:
> (E-Mail Removed) said the following on 2/4/2007 12:10 PM:
>
> > Hi guys,

>
> > I find it frustrating that I need to sniff outIEto make event
> > handler for theform'sselectelement work across different browsers.

>
> Your code doesn't "sniff outIE", it sniffs out document.all support.


> The difference is huge when it comes to Opera and others.
>
> And, theform'sselectelement event handlers work fine, it is the event
> handler for OPTION elements you are having problems with.
>
> > FYI, I am using John Resig's addevent.

>
> Never heard of it.
>
> --
> Randy
> Chance Favors The Prepared Mind
> comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
> Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/



oh i'm very well aware of the document.all object detection. Sorry for
not being clear enough. The whole point is just to show that I have to
sniff out IE to make it work, not so much as to how I do it or
anything.

Anyway, I think I have found the solution in getting the option value:

var optionValue = this.getAttribute('value') ||
this[this.selectedIndex].value;

Use the first one if you try to get the value by listening to the
onclick event of the 'option' element. The second one is when you try
to get the value by listening to the 'onchange' event of the 'select'
element.

Hope that helps. Thanks.

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      02-06-2007
On Feb 5, 3:10 am, (E-Mail Removed) wrote:
> Hi guys,
>
> I find it frustrating that I need to sniff out IE to make event
> handler for the form's select element work across different browsers.
> Here's a summary of what I have right now:


You should use feature detection.

> var select = /*get the form select element*/
> var option = /*get all the option elements*/
>
> if(document.all){
> addEvent(select,"change",executeFunction);
> }
> else{
> addEvent(option[i],"click",executeFunction);
> }


I don't understand why you are using a different event in different
browsers. Can't you just get the value of the selected option
onchange of the select?


> FYI, I am using John Resig's addevent.


I have no idea what that is. Try the following (be careful of IE's
memory leak) which uses a pretty standard addEvent function and makes
IE's this keyword work the same as the W3C event model:

<script type="text/javascript">
function addEvent(el, evType, fn, useCapture) {
if (el.addEventListener) {
el.addEventListener(evType, fn, useCapture);
} else if (el.attachEvent) {
var r = el.attachEvent('on'+evType, function(){fn.call(el);});
} else {
el['on' + evType] = fn;
}
}
function showValue(el){
document.getElementById('d0').innerHTML =
el.options[el.selectedIndex].value;
}
window.onload = function(){
var el = document.forms['f0'].elements['sel0'];
addEvent(el, 'change', function(){showValue(this);}, false);
}
</script>

<form action="" id="f0">
<select name="sel0">
<option value="opt1">opt1
<option value="opt2">opt2
<option value="opt3">opt3
</select>
</form>
<div id="d0"></div>


Incidentally, if you are only adding one handler, it is much simpler
to write

select.onchange = showValue;

And then in the showValue function, 'this' will be a reference to the
select element in both IE and W3C event models.

--
Rob

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Event Handler that creates adds another event handler kaczmar2@gmail.com ASP .Net 1 02-22-2007 07:37 AM
Seeking robust cross-browser keyboard event handler Matt Kruse Javascript 0 08-15-2006 04:58 PM
2.0 Cross Page Post Event Handler garethdjames@gmail.com ASP .Net 1 11-29-2005 04:27 PM
Cross browser mouse wheel event handler cjl Javascript 1 10-08-2005 11:03 AM
Passing event from dynamically created element and event handler? Adi Javascript 2 02-23-2004 02:44 PM



Advertisments