Issue with click event

Question

I am trying to use an image as a file type button in my application, but on click of image the function is executing but button document.getElementById("myFile").click(); is not executing. Whats wrong with my code?

HTML:

  <div align="center">
      <a href="#" id="other-color" onClick='loadFile()'><img style="width:75px;height:auto" src="icons/slr-camera-2-256.png"/></a>
      <input type="file" id="myFile" style="display:none" />
    </div>

Script:

 function loadFile()
        {

            alert("test");
            document.getElementById("myFile").click();
        }

removed both `html5` and `jQuery` tags, as this question doesn't have either — Rene Pot, Jul 05 '14 at 11:17
@Precious If using jQuery is acceptable, please add the tag back. You can try selecting the element with jQuery like: `$('#myFile').click()` — Kabie, Jul 05 '14 at 11:25
@RenePot `jQuery` tag could also mean that `jQuery` answers are acceptable. — T J, Jul 05 '14 at 11:30

score 1 · Answer 1 · 2014-07-05T11:32:12.687

1

You can try like this, using JQuery:

 <input type="file" id="FileInput" style="display: none"/>
 <img src="abc.png" id="UploadPic" style="cursor: pointer;" />

And JQuery:

<script type="text/javascript">
  $(document).ready(function(){
      $("#FileInput").change(function() {
      $("#UploadPic").click();
     });
  });
</script>

edited Jul 05 '14 at 11:32

answered Jul 05 '14 at 11:26

score 0 · Answer 2 · answered Jul 05 '14 at 11:27

To stay on the safe side, separate your JS from your HTML. You're not the first to have problems with JS events imbedded in HTML. I find that this issue is best solved when both are separated.

Here is a version when they are seperate.

DEMO

HTML

<div align="center"> <a href="#" id="other-color"><img style="width:75px;height:auto" src="icons/slr-camera-2-256.png"/></a>

    <input type="file" id="myFile" style="display:none" />
</div>

JS

var a = document.getElementById('other-color');
a.onclick = loadFile;

function loadFile() {
    alert("test");
}

score 0 · Accepted Answer · edited May 23 '17 at 12:16

0

Check this solution by (SpYk3HH) JsFiddle Or You can use the following:

$('#myFile').show();
$('#myFile').focus();
$('#myFile').click();
$('#myFile').hide();

The idea of Florin Mogos is to make them visible and focused before click event.

edited May 23 '17 at 12:16

Community

1
1

answered Jul 05 '14 at 11:28

MTM

919
10
22

score 0 · Answer 4 · answered Jul 05 '14 at 11:30

You can use trigger

HTML

<div align="center">
   <a href="javascript:void(0);" id="other-color"><img style="width:75px;height:auto" src="icons/slr-camera-2-256.png"/></a>
   <input type="file" id="myFile" style="display:none" />
</div>

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#other-color').click(function(){
        $('#myFile').trigger('click');
    });
});
</script>

Issue with click event

4 Answers4