Question

I have a DIV when i click on it it will trigger a javascript to click on file upload button which was display:none. It works on my pc with Chrome, Firefox, Chromium. But I wonder why it does not work on my friend pc.

Is it because the browser issue or what? Me and my friend using
different version of Ubuntu. Nothing happen when they click on the DIV

Here is my code

<div onclick='uploadphoto()' title='Click to edit Profile Picture'></div>

<form action="js/ajaxuploadprofile.php" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" style='display:none'>
    <input type="hidden" name="maxSize" value="2000000" />
    <input type="hidden" name="maxW" value="700" />
    <input type="hidden" name="fullPath" value="images/profilepic/" />
    <input type="hidden" name="relPath" value="../images/profilepic/" />
    <input type="hidden" name="colorR" value="255" />
    <input type="hidden" name="colorG" value="255" />
    <input type="hidden" name="colorB" value="255" />
    <input type="hidden" name="maxH" value="700" />
    <input type="hidden" name="filename" value="filename" />
    <input type="file" id='filename' name="filename" onchange="ajaxUpload(this.form,'js/ajaxuploadprofile.php?filename=name&amp;maxSize=2000000&amp;maxW=700&amp;fullPath=images/profilepic/&amp;relPath=../images/profilepic/&amp;colorR=255&amp;colorG=255&amp;colorB=255&amp;maxH=700','upload_area','File Uploading Please Wait...&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; Error in Upload, check settings and path info in source code.'); return false;" />
</form>

<script type='text/javascript'>
function uploadphoto()
{
    el = document.getElementById('filename');
    if (el.onclick) 
    {
       el.onclick();
    } 
    else if (el.click) 
    {
       el.click();
    }
//$('#filename').click(); // <-- this also works for me but not my friend
//document.getElementById('filename').click(); // <-- same
}
</script>

Updated Solution

Recently I found out that style='display:none' will have some issue in some browser (or maybe due to the version of the browser). For my case, the version of Chrome is different between mine and my friends and hence it works on my pc but not my friends’ pc. However, I am able to solve this problem by replacing style='display:none' with style='visibility:hidden;height:0px'. the code now is working fine in any pc.

visibility:hidden is just hide the view for the content, it will still occupy some space. Hence i added height:0px so that it will have same effect like display:none.

Answer 1

It can be a browser issue. For an example it might cause problems in IE. If you are using jQuery, you can do as below:

$('#button').trigger('click');

Or else you can try as below:

if( document.createEvent ) {
    var evt = document.createEvent("MouseEvents");  
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
    document.getElementById('button').dispatchEvent(evt);
} else if( document.createEventObject ) { // For IE 8 and below
    var evObj = document.createEventObject();
    document.getElementById('button').fireEvent('onclick', evObj);
}