Cross browsers form select element event handler

Discussion in 'Javascript' started by alvinwoon@gmail.com, Feb 4, 2007.

  1. Guest

    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,"click",executeFunction);

    }

    FYI, I am using John Resig's addevent.

    Any advises would be much helpful. Thanks :)
     
    , Feb 4, 2007
    #1
    1. Advertisements

  2. Randy Webb Guest

    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/
     
    Randy Webb, Feb 5, 2007
    #2
    1. Advertisements

  3. Guest

    On Feb 5, 12:08 pm, Randy Webb <> wrote:
    > 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.
     
    , Feb 5, 2007
    #3
  4. RobG Guest

    On Feb 5, 3:10 am, 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,"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
     
    RobG, Feb 6, 2007
    #4
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rod  Snyder

    moving from form element to form element

    Rod Snyder, May 29, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    535
    Vidar Petursson
    May 29, 2004
  2. Replies:
    1
    Views:
    555
    S. Justin Gengo
    Nov 29, 2005
  3. Replies:
    1
    Views:
    944
    Damien
    Feb 22, 2007
  4. Adi
    Replies:
    2
    Views:
    323
  5. cjl
    Replies:
    1
    Views:
    242
  6. Csaba  Gabor

    cross browser FF style SELECT element

    Csaba Gabor, Mar 25, 2006, in forum: Javascript
    Replies:
    0
    Views:
    583
    Csaba Gabor
    Mar 25, 2006
  7. Matt Kruse
    Replies:
    0
    Views:
    202
    Matt Kruse
    Aug 15, 2006
  8. yawnmoth

    onchange event handler and select tags

    yawnmoth, Dec 11, 2007, in forum: Javascript
    Replies:
    5
    Views:
    341
    Thomas 'PointedEars' Lahn
    Dec 12, 2007
Loading...