OnChange Event not fireing in FireFox but works in IE

I'm trying to change an image on the form whenever a value is selected from the dropdownlist box.  It works fine in Internet Explorer but the event doesn't seem to fire at all in FireFox.  I put the Alert message in the script to see and it never pops up in FireFox but does with IE.
function ChangeEdgeImage(this) {  
        var strColor = source.options.value;
        var strColorx = strColor.replace(/ /g, "_");
        document.getElementById('color_EdgePreview').src = "images/colors/" + strColorx  + ".jpg"; 
        document.getElementById('color_EdgeZoom').href = "images/colors/zoom/" + strColorx  + ".jpg";   
        document.getElementById('color_EdgeZoom').title = "Edge Color : " + strColorx;
        alert("Edge change");
    }

<asp:DropDownList class="product-attr-inside-color" ID="DropDownList1" 
    	runat="server" DataSourceID="dsColors" 
    	DataTextField="Color" DataValueField="Color" onchange="ChangeInsideImage(this);"> 
</asp:DropDownList

Open in new window

LVL 6
Ada CountyAsked:
Who is Participating?
 
Ada CountyConnect With a Mentor Author Commented:
Removed the Source parameter and fully qualified the field on the form in the script.
function ChangeEdgeImage() {  
        var strColor = document.form1.DropDownList2.value;
        var strColorx = strColor.replace(/ /g, "_");
        document.getElementById('color_EdgePreview').src = "images/colors/" + strColorx  + ".jpg"; 
        document.getElementById('color_EdgeZoom').href = "images/colors/zoom/" + strColorx  + ".jpg";   
        document.getElementById('color_EdgeZoom').title = "Edge Color : " + strColorx;
        alert("Edge change");
    }

<asp:DropDownList class="product-attr-edge-color" 
    ID="DropDownList2" runat="server" DataSourceID="dsColors" 
    DataTextField="Color" DataValueField="Color" onchange="ChangeEdgeImage();">
</asp:DropDownList>

Open in new window

0
 
Vikram Singh SainiSoftware Engineer cum AD DeveloperCommented:
Seems function names are not matching.

function ChangeEdgeImage(this) // Line 1

onchange="ChangeInsideImage(this);" // Line 12
0
 
Ada CountyAuthor Commented:
I have two functions ChangeInsideImage and ChangeEdgeImage they are exact duplicates but change different images on the screen.  I just copied the wrong field in my first post my bad.  This is the field

<asp:DropDownList class="product-attr-edge-color" 
    ID="DropDownList2" runat="server" DataSourceID="dsColors" 
    DataTextField="Color" DataValueField="Color" onchange="ChangeEdgeImage(this);">
</asp:DropDownList>

Open in new window

0
 
Vikram Singh SainiSoftware Engineer cum AD DeveloperCommented:
Make sure if JavaScript is enabled in Firefox or not. This could be the reason for odd behavior of your application.
0
 
Ada CountyAuthor Commented:
Found Solution internally
0
All Courses

From novice to tech pro — start learning today.