21 replies

Why do both buttons call my function?

I have a form:

<modal>
  <form id="bingo-settings-list">
  [...]
    <button class="addGamePickerSelector-Button">Add game</button>

    <div>
      <button class="bingo-settings-submit-button" type="submit">Use settings</button>
      <button>Cancel</button>
    </div>
  </form>
</modal>

<modal>
  <form id="bingo-settings-list">
  [...]
    <button class="addGamePickerSelector-Button">Add game</button>

    <div>
      <button class="bingo-settings-submit-button" type="submit">Use settings</button>
      <button>Cancel</button>
    </div>
  </form>
</modal>

and Javascript:

document.querySelector("#bingo-settings-list").addEventListener("submit", function(){
        event.preventDefault();
        //createBingoTable();
        console.log("im submitted")
    })

document.querySelector("#bingo-settings-list").addEventListener("submit", function(){
        event.preventDefault();
        //createBingoTable();
        console.log("im submitted")
    })

My issue is that all the buttons for some reason call and activate the event that should only run on submit
Only the submit button has 'type="submit"', I also tried adding "submitter" as an attribute altho I don't think that's an actual thing

KP-C

Kevin Powell - Community•3y ago•

21 replies

Brightie

Why do both buttons call my function?

I have a form:

<modal>
  <form id="bingo-settings-list">
  [...]
    <button class="addGamePickerSelector-Button">Add game</button>

    <div>
      <button class="bingo-settings-submit-button" type="submit">Use settings</button>
      <button>Cancel</button>
    </div>
  </form>
</modal>

<modal>
  <form id="bingo-settings-list">
  [...]
    <button class="addGamePickerSelector-Button">Add game</button>

    <div>
      <button class="bingo-settings-submit-button" type="submit">Use settings</button>
      <button>Cancel</button>
    </div>
  </form>
</modal>

and Javascript:

document.querySelector("#bingo-settings-list").addEventListener("submit", function(){
        event.preventDefault();
        //createBingoTable();
        console.log("im submitted")
    })

document.querySelector("#bingo-settings-list").addEventListener("submit", function(){
        event.preventDefault();
        //createBingoTable();
        console.log("im submitted")
    })

Why do both buttons call my function?

Similar Threads

Why do both buttons call my function?

Similar Threads

Similar Threads

Similar Threads