Javascript e.preventDefault(); not working on submit()

Question

i have a problem when submitting form with javascript submit()

LIVE ACTION : https://jsfiddle.net/98sm3f3t/

HTML :

<form id="myForm" action="">
    First name: <input type="text" name="fname"><br>
    <button id="myButton" type="button">Submit form</button>
</form>

JS :

document.getElementById("myButton").addEventListener("click", function() {

    document.getElementById("myForm").submit();

});

document.getElementById("myForm").addEventListener("submit", function(e) {

    e.preventDefault();

    alert("cancel submitting");

});

it supossed to be showing alert() and cancel submitting.

what's wrong with my code?

thanks in advance...

If your intent is to manually submit the form, then you don't need a handler on the form. Just make a function with the necessary code, and invoke it when you're ready in the handler on your button. — user1106925
– user1106925, Commented Jun 8, 2016 at 14:32

Lionel Rowe · Accepted Answer · 2023-05-07 04:06:58Z

14

Per MDN (emphasis added):

[The HTMLFormElement: submit() method] is similar, but not identical to, activating a form's submit . When invoking this method directly, however:

No submit event is raised. In particular, the form's onsubmit event handler is not run.

Constraint validation is not triggered.

Instead, you can use the requestSubmit() method, which submits a form as if the submit button had been clicked (i.e. it will run the onsubmit handler).

edited May 7, 2023 at 4:06

Lionel Rowe

6,2581 gold badge19 silver badges35 bronze badges

answered Oct 11, 2021 at 20:15

ajw

6098 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2016-06-08 14:21:04Z

9

Submitting a form programmatically, using JavaScript, does not trigger a submit event.

If you want your code to show an alert and not submit the form, then write it so it just shows an alert.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Your message");
});

Alternatively, use a submit button to submit the form (instead of JavaScript).

answered Jun 8, 2016 at 14:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Jose Hermosilla Rodrigo · Accepted Answer · 2016-06-08 14:31:35Z

5

Fix to your problem is to use input of type submit:

<button id="myButton" type="submit">

https://jsfiddle.net/joherro3/98sm3f3t/4/

For this to work you have to remove the click event listener which is submiting your form. Listen to form submit and call preventDefault() is enought to prevent form to be submit.

edited Jun 8, 2016 at 14:31

answered Jun 8, 2016 at 14:21

Jose Hermosilla Rodrigo

3,7136 gold badges25 silver badges38 bronze badges

1 Comment

Jose Hermosilla Rodrigo Over a year ago

Yes! Sorry @Quentin I added information to the answer.

Emsal · Accepted Answer · 2022-06-07 15:31:50Z

1

I just came over this and found the correct answer.

To trigger an event programatically in JavaScript you can do something like this.

create a submit event that bubbles up and cannot be canceled

const form = document.getElementById('pform');

const evt = new Event("submit", {"bubbles":true, "cancelable":false});
// event can be dispatched from any element, not only the document
form.dispatchEvent(evt);

https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

answered Jun 7, 2022 at 15:31

Emsal

1079 bronze badges

Comments

Jax Teller · Accepted Answer · 2016-06-08 14:21:15Z

0

change

<button id="myButton" type="button">Submit form</button>

to

<button id="myButton" type="submit">Submit form</button>

answered Jun 8, 2016 at 14:21

Jax Teller

1,4772 gold badges15 silver badges25 bronze badges

1 Comment

Quentin Over a year ago

This doesn't work. Clicking the submit button triggers the click event and submits the form normally. The normal submission gets cancelled and triggers the alert. The programmatic submission still submits the form.

brk · Accepted Answer · 2016-06-08 14:21:33Z

0

You are using button type ="button".

Use button type="submit".

It will alert

jsfiddle

answered Jun 8, 2016 at 14:21

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Quentin Over a year ago

This doesn't work (even in your live demo). Clicking the submit button triggers the click event and submits the form normally. The normal submission gets cancelled and triggers the alert. The programmatic submission still submits the form.

Lucky Amos · Accepted Answer · 2024-08-25 10:59:13Z

0

solution to trigger event programatically

`const form = document.getElementById('myform');

const evt = new Event("submit", {"bubbles":true, "cancelable":false});

form.dispatchEvent(evt);`

answered Aug 25, 2024 at 10:59

Lucky Amos

2162 silver badges5 bronze badges

Collectives™ on Stack Overflow

Javascript e.preventDefault(); not working on submit()

7 Answers 7

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related