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. Advertising

  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. Advertising

  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. Advertising

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. Replies:
    1
    Views:
    455
    S. Justin Gengo
    Nov 29, 2005
  2. Replies:
    1
    Views:
    736
    Damien
    Feb 22, 2007
  3. Adi
    Replies:
    2
    Views:
    199
  4. cjl
    Replies:
    1
    Views:
    147
  5. Matt Kruse
    Replies:
    0
    Views:
    133
    Matt Kruse
    Aug 15, 2006
Loading...

Share This Page