Question

165

document.getElementById('button').click() working on my pc but not working on another pc

rated 0 times [ 171] [ 6] / answers: 1 / hits: 33486 / 12 Years ago, fri, february 1, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kendellc

Add To Favorites

Follow

Total Points: 84

Total Questions: 97

Total Answers: 102

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

answered 12 Years ago sylviakaitlinj · Accepted Answer

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);

}