Question

I’m having a problem with the click() functon. It does not work in Opera.

I am trying to make a input type=file clicked on onclick event of another element. I need to style my input type=file element so I made it invisible and replaced it with simple styled button. Now I want file element to be clicked when button is clicked.

I can’t use jQuery because I am using the MooTools library for a calendar in my page and it makes conflict when I try to use jQuery. I also tried to avoid the conflict using jQuery.noConflict(); but I could not do it because I am new to jQuery. Here is my html code:

<input name="myfile" id="uploadme" type="file" style="visibility:hidden; width:1px;" onchange="this.form.submit()"/>
<input type="button" id="clickme" onclick="show_upload()"/>

And here is my JavaScript code:

function show_upload()
{
    document.getElementById('uploadme').click();
}

I also tried this jQuery code but I could not make it work without conflict with the MooTools library:

jQuery.noConflict();
(function($){
    $('#clickme').click(function($){
        $('#uploadme').click();
    })(jQuery);
});

Answer 1

I’m not sure for the input click (it might just be impossible due to security reasons), but your jQuery code is not completely correct.

jQuery.noConflict();

(function($){
    $('#clickme').click(function(){ // The $ is not necessary - you already have it
        $('#uploadme').click();
    }); // You should remove (jQuery) because you don't want to call the function here
})(jQuery); // you need (jQuery) to actually call the function - you only defined the function

Anyway, this answer says you cannot do what you want in Opera: In JavaScript can I make a "click" event fire programmatically for a file input element?