javascript onclick not working in chrome and IE8 , but works in firefox 7.0.1

I have this javascript.

<script type="text/javascript">
function HandleBrowseClick()
{
    var fileinput = document.getElementById("userFile");
    fileinput.click();
}
</script>

<script type="text/javascript">
    function callAddUsers() {
            //alert("callAddUsers");
        var fup = document.getElementById('userFile');
    var fileName = fup.value;
        document.f1.action = "addUsers.action";
        document.f1.submit();
    }
</script>

Here is my HTML..

<input type="file" class="button" id="userFile"
            name="userFile" onChange="callAddUsers();" style="display: none开发者_如何学C"/> 

<input type="button" class="button" value="Add User" id="fakeBrowse" onclick="HandleBrowseClick();"/>

I use this two step calling style because I want to use Specific Name for my file upload button, not the default one like "choose file,browse..etc."

Problem Details. In Firefox, all things are working. Calls action and do the action correctly.

In IE, it still call callAddUsers() function but not call action.

In Chrome, it is not working for fileinput.click();

Where might be the problem?

Thanks ahead.

display:none on forms and form inputs is a sure way to make them non-submittable ;) This is done by browsers for security reasons.

If you need to hide your visible input - give it opacity: 0.1 or width: 1px; overflow: hidden;.

But regarding your specific problem, you probably just want to use a label tag. It transfers all clicks received to dedicated input. And thus you will be able to make your ugly file input look any way you want.

Try this following code

<input id="dummyInput2" size="10" readonly><input type="file" id="userFile" name="userFile" value="" size="1" onchange="callAddUsers(this,\'dummyInput2\')" /><input type="button" class="button" value="Add User" id="fakeBrowse"/>

function callAddUsers(obj,target)
{
    document.getElementById(target).value = obj.value;
    var fup = document.getElementById('userFile');
    var fileName = fup.value;
        document.f1.action = "addUsers.action";
        document.f1.submit();

}
#dummyInput2
{
    z-index :1
    cursor : pointer;
}
#userFile
{
    position:absolute;
    top:xxx;//change to what you wish
    left:xxx;//change to what you wish
    z-index :2;
    opacity : 0;
    filter : alpha(opacity=0);
    cursor : pointer;
}
#fakeBrowse
{
    position :absolute;
    cursor : pointer;
    width : 30px;//change to what you wish
    height: 23px;//change to what you wish
}

Hope this helps you.