Simulating Button click in javascript

Question

So what i want to do is when i click on a button, it will pass this click event to another element in webpage, or you can say it will create a new click event in another element. Below is my code, it does not work, please let me know what is wrong with it, it looks make sense...

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});



</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onClick=alert("error") /></p>
<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>
</body>
</html>

Looks like what you are after: http://jqueryui.com/datepicker/#icon-trigger — Webapper, Jan 28 '13 at 19:20

score 56 · Accepted Answer · edited May 23 '17 at 12:02

56

Since you are using jQuery you can use this onClick handler which calls click:

$("#datepicker").click()

This is the same as $("#datepicker").trigger("click").

For a jQuery-free version check out this answer on SO.

edited May 23 '17 at 12:02

Community

1
1

answered Jan 28 '13 at 19:11

Matt Zeunert

16,075
6
52
78

weir · Answer 2 · 2017-06-22T11:54:01.540

12

The smallest change to fix this would be to change

onClick="document.getElementById("datepicker").click()">

to

onClick="$('#datepicker').click()">

click() is a jQuery method. Also, you had a collision between the double-quotes used for the HTML element attribute and those use for the JavaScript function argument.

edited Jun 22 '17 at 11:54

answered Jan 28 '13 at 19:12

weir

4,521
2
29
42

score 10 · Answer 3 · answered Jan 28 '13 at 19:11

10

To simulate an event, you could to use trigger JQuery functionnality.

$('#foo').on('click', function() {
      alert($(this).text());
    });
$('#foo').trigger('click');

answered Jan 28 '13 at 19:11

sdespont

13,915
9
56
97

So something looks like this?
Date:
– ouyadi Jan 28 '13 at 19:35
Yes, but you should avoid inline javascript. – sdespont Jan 28 '13 at 19:41

Chase · Answer 4 · 2013-01-28T19:37:32.643

The reason your code isn't working the way you would expect is because this line:

<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>

should be changed to:

<button type="button" value="submit" onClick="document.getElementById('datepicker').focus()">submit </button>

There are two things to notice here:

1: The "s around datepicker have been changed to 's so that they do not interfere with the quotes surrounding the onclick event.

2: The click() has been changed to focus() to activate the datepicker calendar. When the button is pressed.

Now, this fixes your issue...but I do agree with the other posts that using jQuery to access the DOM element and trigger the event is the better way to go. Since you're already doing this for the jQuery datapicker plugin via <script src="http://code.jquery.com/jquery-1.8.3.js"></script>, this should not be a problem.

Inline events are not recommended.

score 1 · Answer 5 · answered Jan 28 '13 at 19:19

1

Or you can use what JQuery alreay made for you:

http://jqueryui.com/datepicker/#icon-trigger

It's what you are trying to achieve isn't it?

answered Jan 28 '13 at 19:19

Webapper

305
2
8

score 0 · Answer 6 · answered Jan 28 '13 at 19:22

0

try this

document.getElementById("datapicker").addEventListener("submit", function())

answered Jan 28 '13 at 19:22

Z3r0n3

37
4

score 0 · Answer 7 · answered May 30 '17 at 11:07

0

Use this

jQuery("input.second").trigger("click");

answered May 30 '17 at 11:07

subindas pm

2,668
25
18

Simulating Button click in javascript

7 Answers7

Linked

Related