How to programmatically click on a button - maybe Angular?

11,171

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

Share:
11,171

Related videos on Youtube

dashman
Author by

dashman

Updated on June 04, 2022

Comments

  • dashman
    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
      Jason Goemaat over 3 years
      Is the button in a form? If so you probably need to submit the form
    • Anurag Srivastava
      Anurag Srivastava over 3 years
      Could you elaborate on the purpose of such exercise?
    • Mihail Minkov
      Mihail Minkov over 3 years
      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?
    • Sankofa
      Sankofa almost 2 years
      This person, Robert Longson, solved the problem for me: stackoverflow.com/questions/39712905/…
  • Harry
    Harry over 3 years
    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
  • Mihail Minkov
    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
    Chris Oppedal almost 3 years
    In Angular 8+, ViewChild takes 2 parameters: @ViewChild('search', {static: false}) search ElementRef;
  • Mattijs
    Mattijs about 2 years
    For some reason IOS Safari does not allow the click on the link, which is highly irritating.