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•11mo ago

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

Brightie•11mo 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•11mo ago

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

Joao•11mo ago

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

Brightie•11mo ago

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

Chris Bolson•11mo ago

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

Brightie•11mo 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•11mo 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•11mo ago

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

Brightie•11mo 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•11mo ago

Yeah, I don't blame you 😄

Brightie•11mo 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•11mo ago

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

Brightie•11mo ago

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

Joao•11mo ago

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

Brightie•11mo 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?