How to programmatically click on a button - maybe Angular?

Question

I'm trying to click on a html button programmatically.

Looking at the page source - I see

<div class="submitBtns">
    <button class="btn btn-primary primaryBtn" type="button">Search</button>
</div>

I don't think this is standard html - maybe an extension.

I can get to the button object - but calling obj.click() on it doesn't work.

The document also has this header - maybe that'll identify the document type - also has a lot of class names starting with ng- prefix.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

More info...this is a third party web-page and I'm injecting javascript into it.

I entered something into an INPUT field and then would like to simulate a button press.

Pure javascript.

Is the button in a form? If so you probably need to [submit the form](https://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript) — Jason Goemaat, Apr 14 '20 at 17:44
Hello @dashman, could you provide a little bit more details on what libraries you're using, what you want to achieve and what's not happening as it should? — Mihail Minkov, Apr 14 '20 at 17:47
This person, Robert Longson, solved the problem for me: https://stackoverflow.com/questions/39712905/svg-click-is-not-a-function — Sankofa, Jan 10 '22 at 16:04

score 12 · Answer 1 · answered Apr 14 '20 at 18:36

12

Created a Sample Demo in Stackblitz for Reference

In Angular, we can get access to any HTML elements using @ViewChild &ElementRef. We also have to add an unique identifier by prefixing # in the HTML element that you want to access programmatically.

In HTML:

<button class="btn btn-primary primaryBtn" #search type="button">Search</button>

In TS:

import { Component, ViewChild, ElementRef } from '@angular/core';
.
.
export class YourComponent{
.
.
    @ViewChild('search') search: ElementRef;
.
.
.
.   // In your function
    this.subContent.nativeElement.click();
}

answered Apr 14 '20 at 18:36

Guhan S

146
3

In Angular 8+, ViewChild takes 2 parameters: @ViewChild('search', {static: false}) search ElementRef; – Chris Oppedal Jan 08 '21 at 17:39
For some reason IOS Safari does not allow the click on the link, which is highly irritating. – Mattijs Oct 25 '21 at 06:10

Mihail Minkov · Answer 2 · 2020-04-14T18:49:00.183

3

JavaScript Option

If you want to do this with pure JavaScript you could add an ID to the button and do this:

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

jQuery Option

If I were to do this with jQuery I would write this piece of code:

<script>
$(document).ready(function() {
   $('.submitBtns button').click();
});
</script>

Now the problem with this is that if you have several forms on your page it would click all of the buttons that are identified using the $('.submitBtns button').click(); selector. You could probably add an ID to this button if you have access to the code. And just change it to:

<script>
$(document).ready(function() {
   $('#myButton').click();
});
</script>

If you require to simulate a click to trigger events related to the click, but not actually click the button, you could use $("#myButton").trigger("click");.

edited Apr 14 '20 at 18:49

answered Apr 14 '20 at 17:50

Mihail Minkov

2,463
2
24
41

although this is one way to do it, its widely noted a) we shouldn't mix JQuery with Angular for few reasons and b) do it when necessary but always look for ways to revert out from using it – Harry Apr 14 '20 at 18:40
1

@Harry I agree but OP said "Maybe angular" and he also mentioned only JavaScript. I updated my answer to include a JavaScript only option. – Mihail Minkov Apr 14 '20 at 18:49
some times you just gotta go pure javascript....even when you are using Angular/Ionic. Thanks! – Jul 08 '22 at 18:49

zer00ne · Answer 3 · 2020-04-14T19:09:39.853

I am assuming that the only JavaScript you are familiar with is what you've read from a browser extension source. There are a few fundamental steps you neglected to mention. Moreover the possibilities you had mentioned were scattered to say the least:

I don't think this is standard html...

It's very standard and valid, flawless HTML.

I can get to the button object - but calling obj.click() on it doesn't work...

It isn't very clear as how obj was obtained from obj.click().

There are other scattered snippets of info... ng-* classes are Angular -- you are correct. The <meta> has no relevance to the issue at hand.

More info...this is a third party web-page and I'm injecting JavaScript into it. I entered something into an INPUT field and then would like to simulate a button press.

This is normally not possible unless you have editing privileges to said third-party site. I believe browser extensions can do so but it doesn't actually edit the site itself it's just what the browser is rendering just for the user.

Demo

Note: details are commented in demo -- also, I loaded a Bootstrap 4 because I was bored. Bootstrap of course is not required and is purely optional.

// Reference the button
const btn = document.querySelector('.searchButton');

/*
- Register the click event to button
- When clicked the handler function flipStatus() is called
*/
btn.onclick = flipStatus;

/*
- Event handler function passes the event object
- event.target always references the elements that the user
  clicked.
- .classList.toggle('active') will add class .active if the
  button doesn't have it and remove class .active if the
  button has the class .active
*/
function flipStatus(event) {
  event.target.classList.toggle('active');
}

/*
- Programatically click the button -- if successful, the 
  button text should be: "Searching..."
- If clicked by user afterwards the button text should be:  
  "Search"
*/
btn.click();

.input-group.input-group {
  width: 85vw;
  margin: 15px auto;
}

.active.active::after {
  content: 'ing...';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet" crossorigin="anonymous">

<section class="input-group input-group-lg">
  <input class="searchTerms form-control" type="search" placeholder="Enter search terms...">
  <section class="input-group-append">
    <button class="searchButton btn btn-lg btn-primary" type="submit">Search</button>
  </section>
</section>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

How to programmatically click on a button - maybe Angular?

3 Answers3

Demo