How to programmatically click on a button - maybe Angular?
Solution 1
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();
}
Solution 2
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");
.
Related videos on Youtube
dashman
Updated on June 04, 2022Comments
-
dashman over 1 year
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.
-
Jason Goemaat over 3 yearsIs the button in a form? If so you probably need to submit the form
-
Anurag Srivastava over 3 yearsCould you elaborate on the purpose of such exercise?
-
Mihail Minkov over 3 yearsHello @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?
-
Sankofa almost 2 yearsThis person, Robert Longson, solved the problem for me: stackoverflow.com/questions/39712905/…
-
-
Harry over 3 yearsalthough 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
-
Mihail Minkov over 3 years@Harry I agree but OP said "Maybe angular" and he also mentioned only JavaScript. I updated my answer to include a JavaScript only option.
-
Chris Oppedal almost 3 yearsIn Angular 8+, ViewChild takes 2 parameters: @ViewChild('search', {static: false}) search ElementRef;
-
Mattijs about 2 yearsFor some reason IOS Safari does not allow the click on the link, which is highly irritating.