Simulating click event on input - JavaScript

Question

I'm trying to simulate a click on an input tag, through the click on an anchor tag, this way I can hide the input and wrap an image inside the anchor tag.

This works using the jQuery trigger function, but I can't make it work with just "plain" Javascript:

jQuery version:

let fake = $('.fake')
fake.click(function(e) {
  e.preventDefault();
  $('#user_avatar').trigger('click');
})

#user_avatar { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

The JavaScript version using new Event and dispatchEvent:

let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('testing');
  let clickEvent = new Event('click');
document.getElementById('user_avatar').dispatchEvent(clickEvent)
})

#user_avatar { display: none; }

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

The console.log is rendered, but the event isn't being dispatched, what am I doing wrong?

What about document.getElementById('user_avatar').click() ? — DontVoteMeDown
– DontVoteMeDown, Commented Oct 18, 2017 at 17:40
Shameless plug: generic synthetic event dispatching function that works on all HTML elements ... (not just on input/links like the click()) method — Ruan Mendes
– Ruan Mendes, Commented Oct 18, 2017 at 17:46

Nisse Engström · Accepted Answer · 2017-10-18 17:59:33Z

12

Use:

document.getElementById('user_avatar').click();

Tested and it works.

edited Oct 18, 2017 at 17:59

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered Oct 18, 2017 at 17:42

Sam

6364 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stdugnd4ikbd Over a year ago

Doesn’t work on mobile browser(safari ios13, chrome android 5)

brk · Accepted Answer · 2017-10-18 17:43:04Z

5

document.getElementById('user_avatar').click() will work

let fake = document.querySelector('.fake');
fake.addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('user_avatar').click()
})

#user_avatar {
  display: none;
}

<input type="file" name="file_field" id="user_avatar">
<a href="#" class="fake">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</a>

answered Oct 18, 2017 at 17:43

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Scott Marcus · Accepted Answer · 2017-10-18 18:03:50Z

2

You don't need JavaScript at all to solve this problem.

Just make the input invisible by setting its opacity:0 and position both elements absolutely within a common parent element, then make sure the input is on the top layer and is the same size as the image behind it.

#user_avatar { opacity:0; position:absolute; z-index:9; width:320px; height:240px; }
img { position:absolute; z-index:-1; }

<div>
  <input type="file" name="file_field" id="user_avatar">
  <img src="https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg" width="320" height="240">
</div>

edited Oct 18, 2017 at 18:03

answered Oct 18, 2017 at 17:54

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

1 Comment

Raymond Peterfellow Over a year ago

I appreciate your help, but this'd take more time to dig in CSS rules as is an existing project. Thanks!.

Collectives™ on Stack Overflow

Simulating click event on input - JavaScript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related