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

16 Replies

Chris Bolson•16mo ago

try giving the other buttons a type="button" in some browsers the default type is "submit" so they will be submitting the form

BrightieOP•16mo ago

I'll try that, but if that works, oh, yeah that's what I was about to ask give me a moment I'll try that right away

Chris Bolson•16mo ago

you also might want to use type="reset" on your cancel button

Joao•16mo ago

When they are inside a form, buttons have a default type of "submit".

BrightieOP•16mo ago

That did the trick, I didn't know this Thanks! why's that?

Chris Bolson•16mo ago

by "some" browsers it appears that it is all browsers other than IE (just googled it)

BrightieOP•16mo ago

I was planning on just closing the modal (using the javascript to close it) on clicking cancel so by this logic, do you mean that outside of forms they do not have submit as default?

Chris Bolson•16mo ago

of course it depends on what you are doing with that button - in your case "reset" probably isn't the right one they will have the default type submit but if they are not within a form there is nothing to submit

Joao•16mo ago

Not by default, but you can associate buttons with a specific form if you have multiple.

BrightieOP•16mo ago

Oh, I didn't know I thought the default would just be, you know, button... Would make sense to me that a button is by default type="button"no matter what

Joao•16mo ago

Yeah, I don't blame you 😄

BrightieOP•16mo ago

Well thanks for the quick help and information, I thought I was going crazy Been looking online too (on for example w3schools) but I couldn't find information about it being submit by default, or I just skipped over it accidently

Joao•16mo ago

MDN to the rescue for anything related to the web: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#notes

BrightieOP•16mo ago

I should probably use that one more often, it seems everyone here sends a link to this whenever they help out

Joao•16mo ago

Honestly, if there's one thing that Mozilla does really well is writing documentation, at least for the web.

BrightieOP•16mo ago

Yeah, I clicked on it and I noticed It is more organized and more complete than what I used

Gaming

Programming

Why do both buttons call my function?