# Capture button-push with Javascript

**URL:** <https://forums.knack.com/t/capture-button-push-with-javascript/16064>\
**Category:** API & Custom Code\
**Created:** [April 23, 2024, 5:58pm UTC](https://forums.knack.com/t/capture-button-push-with-javascript/16064 "2024-04-23T17:58:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ronny](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/ronny/32/3796_2.png) [@Ronny](https://forums.knack.com/u/Ronny)\
**Post date:** [April 23, 2024, 5:58pm UTC](https://forums.knack.com/t/capture-button-push-with-javascript/16064/1 "2024-04-23T17:58:39Z")

</div>

I want to, in a Javascript, capture a click on a menu button to send a Webhook to [make.com](http://make.com). I can’t see the class/id of the button, so the event can be handled. They seem similar for the two buttons in the screenshot?

![knack_2](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/f/f1bf167640084cbed42d56ae6ded61f69dfffcb9.png)

 ![knack_1](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/e/e87529c85629fe2f16da131afe9f9e7c1f03c654.png)

Code so far (this shoots the code for both buttons):

```auto
/ ******************************************************************************** */
/* Code to implement print pdf for prosjektlogg, make -> documint */
/ ******************************************************************************** */
$(document).on('knack-view-render.any', function(event, view) {
  $(".menu-links__list-item a").click(function(e) {
    console.log("knaypp trykket");
    e.preventDefault(); // Forhindrer standard handlingen for lenken
    // Hente prosjekt-ID fra detaljvisningen. Dette kan kreve tilpasning basert på hvordan dataene dine er strukturert.
    var prosjektId = $('#view_16 .some-class-for-project-id').text();

    // Sjekker om prosjekt-ID er hentet
    if (prosjektId) {
      // Din webhook URL med prosjekt-ID inkludert i spørringsstrengen
      var webhookUrl = `https://hook.eu2.make.com/2rxnxq9bd6sjsybrxckzrni2w6o2tbhb?prosjektId=${prosjektId}`;

      // Sender en GET-forespørsel til webhooken
      $.ajax({
        url: webhookUrl,
        type: 'GET',
        success: function(response) {
          // Behandler suksessrespons
          console.log('Webhook suksess', response);
          alert('Webhook ble utløst med prosjekt-id: ' + prosjektId);
        },
        error: function(xhr, status, error) {
          // Behandler feilrespons
          console.error('Webhook feil', status, error);
          alert('Noe gikk galt med å utløse webhook.');
        }
      });
    } else {
      alert('Prosjekt-id ikke funnet, kan ikke utløse webhook.');
    }
  });
});

```

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [April 23, 2024, 6:36pm UTC](https://forums.knack.com/t/capture-button-push-with-javascript/16064/2 "2024-04-23T18:36:50Z")

</div>

In your example, the code is firing for both buttons because they share the same selector:  
`.menu-links__list-item a`

Instead of selecting the links by class or id, try selecting by the value of its `data-kn-id` attribute.

So for example, instead of `'.menu-links__list-item a'` try using `'a[data-kn-id="123"]'` replacing 123 with the unique value in your screenshot. Make sure you’re using single quotes, not double quotes.

To be even more specific, you can try `'.menu-links__list-item a[data-kn-id="123"]'` and it should work too.

---

<div class="post-metadata">

**Author:** ![Ronny](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/ronny/32/3796_2.png) [@Ronny](https://forums.knack.com/u/Ronny)\
**Post date:** [April 23, 2024, 7:46pm UTC](https://forums.knack.com/t/capture-button-push-with-javascript/16064/3 "2024-04-23T19:46:03Z")

</div>

The _data\_kn\_id_ is changing for each load of the page. I was using this id in the beginning, but discovered it changes.

---

<div class="post-metadata">

**Author:** ![Bbabel](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bbabel/32/3829_2.png) [@Bbabel](https://forums.knack.com/u/Bbabel)\
**Post date:** [April 23, 2024, 9:01pm UTC](https://forums.knack.com/t/capture-button-push-with-javascript/16064/4 "2024-04-23T21:01:30Z")

</div>

@Ronny I experienced a similar issue with adding an event handler to action link in a table. The link Id changes for each record and the action link index number couldn’t be used.

The solution is to target the menu button by its position in the menu. See below:

-right click on the button you want to use as the trigger when viewing from the web and inspect the element to find the position number. The the first menu button would look something like this data-menu-link-count=“1” .

$(document).on(‘knack-view-render.view\_16’, function(event, view, data) {  
// Target the menu link with data-menu-link-count attribute equal to ‘1’  
$(‘a[data-menu-link-count=“1”]’).on(‘click’, function(event) {  
event.preventDefault(); // Prevent default button action

```
    // Log success in the console
    console.log('Menu button with link count 1 clicked successfully');
});

```

});

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [April 23, 2024, 9:31pm UTC](https://forums.knack.com/t/capture-button-push-with-javascript/16064/5 "2024-04-23T21:31:20Z")

</div>

In that case, if the `data-kn-id` is changing for each load of the page, then you can target the button by its position in the menu, as Brandon said. You can also target the button by its text (e.g. “Create Invoice”) since the button position may change in the future.