DOM click() is not working on this button

Question

When I use method click() to click the button, the submission failed.
But, when I use the mouse to click the button on that webpage, (the submit form is same) it works.

HTML file:

<button xmlns="http://www.w3.org/1999/xhtml" class="ui-button button1"       type="submit" id="create">
    <span>
        <span>Create</span>
    </span>
</button>

My userscript file:

document.getElementById("create").click();

How do I click the button using HTML DOM click()?

http://www.randomsnippets.com/2008/03/05/simulate-a-button-click-via-javascript/ — Elior, Apr 14 '13 at 09:27

score 1 · Answer 1 · answered Apr 14 '13 at 09:36

1

maybe instead of clicking the button. You can submit the form in javascript as

document.getElementByName('form1').submit();

as it fulfills your requirement.

answered Apr 14 '13 at 09:36

Ashish Chopra

1,413
9
23

Good thinking, except that no form was indicated in the question, and the ` – Brock Adams Apr 14 '13 at 09:40

score 0 · Answer 2 · answered Apr 14 '13 at 09:25

0

Wrap the call in an anonymous self executing construct like so:

(function(){
    document.getElementById("create").click();
})();

This will simulate a click when the javascript is loaded.

answered Apr 14 '13 at 09:25

Christian-G

2,371
4
27
47

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

The click method does not always work. Try sending a click event similarly to this answer:

var targBtn     = document.querySelector ("#create");
var clickEvent  = document.createEvent ('MouseEvents');
clickEvent.initEvent ('click', true, true);
targBtn.dispatchEvent (clickEvent);

But also beware that the button may not operate on clicks at all. See "Choosing and activating the right controls on an AJAX-driven site".

The button may operate on mousedown, mouseup, or some combination of events. Use the techniques from that question to activate the control. Link to the target page if you can't get it to work.

edited May 23 '17 at 11:43

Community

1
1

answered Apr 14 '13 at 09:55

Brock Adams

90,639
22
233
295

1

thanks all the same .I solved it use settimeout. window.setTimeout(function () { document.getElementById("button-create").click(); }, 3000) Because click() is too quick to get one property in the form,so it failed – CodeCat Apr 14 '13 at 10:35
Glad you got it working. If you let us know that the content is added by javascript (AJAX), then you'll get better & faster answers next time. – Brock Adams Apr 14 '13 at 11:06

score 0 · Answer 4 · answered Apr 14 '13 at 10:04

0

if at all you are flexible about value of your button then do this:

<button xmlns="http://www.w3.org/1999/xhtml" class="ui-button button1" value="submit" type="submit" id="create">

document.getButtonByValue('submit').click();

This works just fine.

jsfiddle link

answered Apr 14 '13 at 10:04

Ashish Chopra

1,413
9
23

1

This is a ***userscript*** question. The OP normally has no control over the page's HTML in these questions. – Brock Adams Apr 14 '13 at 10:08

DOM click() is not working on this button

4 Answers4

Linked