using javascript to specify an html button that only has type, name, and value

Question

I have multiple html forms similar to the one below

<div class="container">
        <div class="card">
            <div class="card-header bg-danger">
                <h3 class="card-title">Form Four</h3>
            </div>
            <div class="card-body">
                <div class="errors">
                    <!-- Error messages can go here -->
                </div>
                <form novalidate>
                    <div>
                        <label for="password">Password : </label>
                        <input type="text" name="password" id="password" class="password" />
                    </div>
                    <div>
                        <label for="requiredPassword">Required and Password : </label>
                        <input type="text" name="requiredPassword" id="requiredPassword" class="required password" />
                    </div>
                    <div>
                        <input type="submit" name="submitBtn" value="Validate" />
                    </div>
                </form>
            </div>
        </div>
    </div>

I am not allowed to change them. The issue I am having is that I can't get my event listeners to work. I am trying to have the button clicked for the specific form only validate that form and not the others.

This is what I have been trying to possibly work with based on other projects I have done with multiple buttons

document.querySelectorAll("input[name=submitBtn]").forEach(item => {
      item.addEventListener('click', isAllValid)
       //isAllValid is a function to check the inputs in the form
    });

This isn't working, and I really need help trying to find out how to make this work. Thank you!

Answer 1

To find the form that belongs to the button, inside isAllValid, you can do this:

function isAllValid(event) {
  const btn = event.target;
  const form = btn.closest('form');
  // ...
}

Answer 2

One of the attributes of form elements is form which returns a reference to the form to which each of these elements belongs.

See the following example with multiple forms.

var buttons = document.querySelectorAll("button");
buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    event.preventDefault();
    var msg = event.currentTarget.textContent;
    var form = event.currentTarget.form;
    console.log("'" + msg + "' clicked (" + form.id + ")");
    return false;
  });
});

button {
  margin: 0.5rem;
}

<section>
  <form id="firstForm" name="firstForm">
    <button id="firstFormButton1">Button 1 (Form 1)</button>
    <button id="firstFormButton2">Button 2 (Form 1)</button>
    <button id="firstFormButton3">Button 3 (Form 1)</button>
  </form>
</section>
<section>
  <form id="secondForm" name="secondForm">
    <button id="secondFormButton1">Button 1 (Form 2)</button>
    <button id="secondFormButton2">Button 2 (Form 2)</button>
    <button id="secondFormButton3">Button 2 (Form 2)</button>
  </form>
</section>
<section>
  <form id="thirdForm" name="thirdForm">
    <button id="thirdFormButton1">Button 1 (Form 3)</button>
    <button id="thirdFormButton2">Button 2 (Form 3)</button>
    <button id="thirdFormButton3">Button 3 (Form 3)</button>
  </form>
</section>