JQUERY: identify submit button from

Question

How can I determine which submit button was clicked?

I do not want to use <form>, because the page refreshes. By clicking the submit button, a PHP-file gives back a response that is shown on the current page.

HTML in index.html:

    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
        [...]
          <div class="form-inline" id="form">
            <div class="container">
              <div class="form-group">
                <div class="input-group input-group-sm">
                  <div class="input-group-text regwidth">
                    First name
                  </div>
                  <input type="text" class="form-control" name="registerFirstname" id="firstname">
                </div>
                <div class="input-group input-group-sm">
                  <div class="input-group-text regwidth">
                    Last name
                  </div>
                  <input type="text" class="form-control" name="registerLastname" id="lastname">
                </div>
                <div class="d-grid gap-2 col-8 mx-auto">
                  <button type="submit" class="btn btn-primary" id="sublogreg"><i class="fa-solid fa-address-card"></i>&nbsp;&nbsp;Register</button>
                  <button type="submit" class="btn btn-primary" id="subloginfo"><i class="fa-solid fa-circle-info"></i>&nbsp;&nbsp;Request information</button>
                  <p id="returnmessage"></p>
                </div>
             [...]

jQuery script in index.html:

    <script>
      $("#form").ready(function() {
        $("#sublogreg,#subloginfo").click(function() {
           var firstname = $("#firstname").val();
           var lastname = $("#lastname").val();
           var sublogreg = $("#sublogreg").val();
           var subloginfo = $("#subloginfo").val();
   [...]

I tried to add

value="sublogreg"

in the <button>. The value is set, but then both submit button has their value.

I am an autodidact searching for solutions if I need something. I am not a specialist.

_"I do not want to use
, because the page refreshes."_ -> [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Andreas, Jan 09 '23 at 16:05
Given your existing code, simplest solution would be `var btn = this.id` inside the click handler. — freedomn-m, Jan 09 '23 at 16:06
[jQuery Learning Center](https://learn.jquery.com/events/inside-event-handling-function/): _"In addition to the `event` object, the event handling function also has **access to the DOM element that the handler was bound to via the keyword `this`**."_ — Andreas, Jan 09 '23 at 16:07

score 0 · Answer 1 · edited Jan 09 '23 at 17:13

You can detect the button you click in several ways, but one simple solution is to add data-id="whatever_choose_id" in each button. The data-id should be different for each button eg

<button type="submit" class="btn btn-primary" data-id="firstBtn" id="subloginfo">
  <i class="fa-solid fa-circle-info"></i>
  &nbsp;&nbsp;Request information
</button>
<button type="submit" class="btn btn-primary" data-id="secondBtn"  id="subloginfo">
  <i class="fa-solid fa-circle-info"></i>
  &nbsp;&nbsp;Request information
</button>

Then to access it in jQuery you use let btnID = $(this).data("id");

btnID will be the id of the button you clicked

JQUERY: identify submit button from

1 Answers1