CODEWITHSUNDEEP
javascript
ig4
ig4

Reputation: 501

window.event.srcElement.options NOT Work on FF

window.event.srcElement.options(window.event.srcElement.selectedIndex).value works in Internet Explorer (and Chrome) but not in FireFox. How to make this work in FireFox as well?

Upvotes: 1

Views: 5755

Answers (6)

Gerard
Gerard

Reputation: 1

Firefox uses e.htmlEvent.target.nodeName

you can use try/catch to handle both browsers.

Upvotes: 0

ig4
ig4

Reputation: 501

There are two approaches: Assume there is markup

<SELECT name="ddlQuery" id="ddlQuery" style="width:273px;"
        onchange="GetDropDownValue(event)">
...

on HTML.

One using js function:

function GetDropDownValue(e)
{
    var rtnVal = "";
    var sel = document.getElementById(getTargetID(e));
    for (var i = 0; i < sel.options.length; ++i) {
        if (sel.options[i].selected == true) {
            rtnVal = sel.options[i].value;
            break;
        }
    }
    alert(rtnVal);
    return rtnVal;
}

function getTargetID(e) {

    if (!e) { var e = window.event; }
    var objTarget = e.srcElement ? e.srcElement : e.target;
    return objTarget.id;
}

another using jQuery:

$('#ddlQuery').val()

Upvotes: 0

Peter Bailey
Peter Bailey

Reputation: 105878

IE uses srcElement where most other browsers (including Firefox) use target.

Also, Firefox passes around event objects, whereas IE just populates the global event object w/the current event's data.

You'll have to handle both in your code. How you handle the 2nd one will depend on how you're assigning the handler.

But here's one way.

function changeHanlder( event )
{
  var elem = event.target || event.srcElement;
  alert( elem.options[elem.selectedIndex].value );
}

It's also worth noting that all the modern javascirpt libraries handle this abstraction for you.

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186562

var addEvent = (function() {
function addEventIE(el, ev, fn) {
    return el.attachEvent('on' + ev, function(e) {
    return fn.call(el, e);
    });
}
function addEventW3C(el, ev, fn) {
    return el.addEventListener(ev, fn, false);
}
return window.addEventListener ? addEventW3C:addEventIE;
})();

var domRef = document.getElementById('foo');

addEvent( domRef, 'change', function(e) {
    e = e || window.event;
    var el = e.target ? e.target : e.srcElement,
        value = el.value;
    alert( value )
});

in IE, event is a property of window, in modern DOM supporting browsers it's passed as the first argument.

Upvotes: 0

Chetan S
Chetan S

Reputation: 23803

There is no global event object in Firefox. Events are passed to their handlers as an argument. Also, instead of srcElement, you look for target.

If you use a javascript library like jQuery, all the browser specific quirks are handled for you.

Otherwise, I suggest you to read these articles

Upvotes: 0

bobince
bobince

Reputation: 536369

event.target.options[event.target.selectedIndex].value. Though as always with events you'd have to have passed the event object into a function, so eg.:

<script>
    function selectChanged(event) {
        var target= event.target || event.srcElement;
        doSomethingWith(target.options[target.selectedIndex].value);
    };
</script>

<select onchange="selectChanged(event)">...</select>

Setting the handler directly and using this may be easier:

<select id="x">...</select>

<script>
    document.getElementById('x').onchange= function() {
        doSomethingWith(this.options[this.selectedIndex].value);
    };
</script>

Note that looking at options[selectedIndex] is for compatibility with older browsers. These days you can usually just get away with saying select.value.

Upvotes: 2

Related Questions