How can I make a JQuery click event for all the buttons on my page?

Question

I'm making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)

I have a form (shown below) that when clicked, executes AJAX and 'posts' the update content page.

I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.

Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?

I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.

My e.js file:

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/admin.css">
    <title>Manage the website</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            $("#submitButton").click(function(){
                $.ajax({
                    url: 'update',
                    type: 'POST',
                    data: {
                        toUpdate: 'homepage',
                        text: document.getElementById('textField').value // Select a text field based on the button
                    },
                });
            });
        });
    </script>
</head>


<header>
    <!-- Put partial includes here -->
</header>

<div class="topPage">


  <h1>Hello, <%= firstName %>!</h1>
<p1>
    Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>

<div class="homepage">
    <div class="information">
        <h1>
            Homepage variables
        </h1>
        <p1>
            Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
        </p1>
        <hr>
    </div>
    <div class="form">
        <label>
            Change the 'body' of 'homepage'
        </label>

        <form action="nothing" method="post">
            <input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
            <button type="button" class="submit" id="submitButton">Submit Changes</button>
        </form>


    </div>

</div>

<script>

</script>


</html>

Thanks in advance!

Does this answer your question? [How to add one event listener for all buttons](https://stackoverflow.com/questions/49680484/how-to-add-one-event-listener-for-all-buttons) — Heretic Monkey, May 18 '20 at 15:42
For the other question in the question, [Getting the ID of the element that fired an event](https://stackoverflow.com/q/48239/215552) — Heretic Monkey, May 18 '20 at 15:44

Ashish Kumar · Answer 1 · 2020-05-21T13:46:05.963

0

select the input tags in the form and track the change event:

$("form :input").on("change", function(){ 
    var $elm = $(this); // the button which is clicked
    // do your ajax here
 });

edited May 21 '20 at 13:46

answered May 18 '20 at 15:28

Ashish Kumar

2,991
3
18
27

How could I tell which the name of the button that was pressed? Specifically get the id of the button that was pressed? – thetechguy61705 May 18 '20 at 15:35
`$(this)` is the current element on which even happened. I have updated the code above. – Ashish Kumar May 21 '20 at 13:46

score 0 · Accepted Answer · answered May 18 '20 at 15:38

You can do it like this:

$("button").on("click", function() {
  console.log($(this).attr("id"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>

How can I make a JQuery click event for all the buttons on my page?

2 Answers2