I'm stuck, trying to submit my form using the submit function (formElement.submit()).

Well, actually It do send the form-input-values to the backend, but I'm trying to prevent it and adding ajax in between.

Jade/pug

form#score-form(method="POST" action="/leaderboard")
    input#submit-score(type="hidden" value="" name="submitscore")
    //value is fetched from JS

JS

scoreForm.submit();
scoreForm.addEventListener('submit', function(){
    //Nothing here will be invoked
});

However, when using a submit button, it works as intended

form#score-form(method="POST" action="/leaderboard")
    input#submit-score(type="hidden" value="" name="submitscore")
    button(type="submit")

scoreForm.submit();
scoreForm.addEventListener('submit', function(){
    console.log("works"); //logs works
});

Everything works fine except the fact that it seems that .submit() doesn't invoke onsubmit. Is there any workaround (preferably with vanilla js), to give the program a hint that the form is submitted, even with .submit()?

Thanks

I'm stuck, trying to submit my form using the submit function (formElement.submit()).

Well, actually It do send the form-input-values to the backend, but I'm trying to prevent it and adding ajax in between.

Jade/pug

form#score-form(method="POST" action="/leaderboard")
    input#submit-score(type="hidden" value="" name="submitscore")
    //value is fetched from JS

JS

scoreForm.submit();
scoreForm.addEventListener('submit', function(){
    //Nothing here will be invoked
});

However, when using a submit button, it works as intended

form#score-form(method="POST" action="/leaderboard")
    input#submit-score(type="hidden" value="" name="submitscore")
    button(type="submit")

scoreForm.submit();
scoreForm.addEventListener('submit', function(){
    console.log("works"); //logs works
});

Everything works fine except the fact that it seems that .submit() doesn't invoke onsubmit. Is there any workaround (preferably with vanilla js), to give the program a hint that the form is submitted, even with .submit()?

Thanks

• javascript
• forms
• validation
• submit
• onsubmit

Share Improve this question Follow edited Dec 25, 2023 at 12:09 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Feb 22, 2017 at 21:25 KazordomoKazordomo 5722 silver badges77 bronze badges 2

• Are you sure you're registering event listener before calling the event? – Dipen Shah Commented Feb 22, 2017 at 21:28
• Ah, actually I'm not. That and the .click() simulation works perfectly, thanks :) – Kazordomo Commented Feb 22, 2017 at 22:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You need to add the listener before you actually submit:

scoreForm.addEventListener('submit', function(){
    console.log("works"); //logs works
});
scoreForm.submit();

Otherwise the event will have fired before you have a listener set up

Edit: it seems I misread what you were asking. The answer you're looking for is that submit() will not fire the listener. you can simulate it by programatically clicking on the button with click(). Here is a good explanation of this behaviour. try:

scoreForm.querySelector('input[type="submit"]').click()