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.

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.

• javascript
• html
• angularjs

• Is the button in a form? If so you probably need to submit the form – Jason Goemaat Commented Apr 14, 2020 at 17:44
• Could you elaborate on the purpose of such exercise? – Anurag Srivastava Commented Apr 14, 2020 at 17:46
• 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 Commented Apr 14, 2020 at 17:47
• This person, Robert Longson, solved the problem for me: stackoverflow.com/questions/39712905/… – Sankofa Commented Jan 10, 2022 at 16:04

3 Answers 3

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();
}

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");.

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>