Having trouble with e.preventDefault() not working on submit() in Javascript?

Question

Having trouble with e.preventDefault() not working on submit() in Javascript?

I'm facing an issue with submitting a form using 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");

});

The code should display an alert() and cancel submitting.

Can anyone identify what's causing the issue in my code?

Thank you in advance...

javascript

Answer 1

Answer №1

According to information from MDN (emphasis added):

[The HTMLFormElement: submit() method] is similar to activating a form's submit, but there are differences when invoking this method directly:

There is no submit event triggered, meaning the form's onsubmit event handler does not execute.

Constraint validation does not occur.

Instead, you can utilize the requestSubmit() method, which submits a form as if the submit button had been clicked (thus allowing the onsubmit handler to run).

Answer 2

According to information from MDN (emphasis added):

[The HTMLFormElement: submit() method] is similar to activating a form's submit, but there are differences when invoking this method directly:

There is no submit event triggered, meaning the form's onsubmit event handler does not execute.

Constraint validation does not occur.

Instead, you can utilize the requestSubmit() method, which submits a form as if the submit button had been clicked (thus allowing the onsubmit handler to run).

Answer 3

Answer №2

When submitting a form programmatically with JavaScript, keep in mind that it won't trigger a submit event.

If you would like your code to display an alert but not submit the form, simply write the code to show the alert without submitting.

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

Alternatively, consider using a submit button to properly submit the form without relying on JavaScript.

Answer 4

When submitting a form programmatically with JavaScript, keep in mind that it won't trigger a submit event.

If you would like your code to display an alert but not submit the form, simply write the code to show the alert without submitting.

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

Alternatively, consider using a submit button to properly submit the form without relying on JavaScript.

Answer 5

Answer №3

Solution to your issue is to utilize an input of type submit:

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

https://jsfiddle.net/johndoe/85rt7h62/9/

To make this work, you need to eliminate the click event listener that is submitting your form. Instead, listen for the form submit event and call preventDefault() to prevent the form from being submitted.

Answer 6

Solution to your issue is to utilize an input of type submit:

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

https://jsfiddle.net/johndoe/85rt7h62/9/

To make this work, you need to eliminate the click event listener that is submitting your form. Instead, listen for the form submit event and call preventDefault() to prevent the form from being submitted.

Answer 7

Answer №4

I stumbled upon this information and discovered the solution.

If you want to simulate an event using JavaScript, you can achieve it like this.

generate a submit event that bubbles up and cannot be cancelled

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

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

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

Answer 8

I stumbled upon this information and discovered the solution.

If you want to simulate an event using JavaScript, you can achieve it like this.

generate a submit event that bubbles up and cannot be cancelled

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

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

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

Answer 9

Answer №5

modify

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

into

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

Answer 10

modify

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

into

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

Answer 11

Answer №6

You have selected the button type ="button" option.

Consider switching to button type="submit".

By doing so, it will trigger an alert message.

Visit this jsfiddle link

Answer 12

You have selected the button type ="button" option.

Consider switching to button type="submit".

By doing so, it will trigger an alert message.

Visit this jsfiddle link

Answer 13

Answer №7

method to programmatically invoke event

`const form = document.querySelector('#myform');

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

form.dispatchEvent(customEvent);`

Answer 14

method to programmatically invoke event

`const form = document.querySelector('#myform');

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

form.dispatchEvent(customEvent);`

Having trouble with e.preventDefault() not working on submit() in Javascript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Exploring and cycling through numerous links using Selenium WebDriver in a node.js environment

Having difficulty creating JSON data following retrieval of rows by alias in MySQL

Transferring data from ng-init to <script> in AngularJS

Issue with Electron dialog.showOpenDialog() Filters malfunctioning

Ways to add a substantial quantity of HTML to the DOM without relying on AJAX or excessive strings

How can I use JavaScript fetch to retrieve data from a JSON file based on a specific value?

Issue encountered: ENOENT - There is no file or directory located at the specified path for ... .steampath

Apologies, but Discord.js is unable to access the property "user" of a null object

I'm looking for a way to connect to my X-UI database using node.js - can anyone

.submit fails to function when the bound object has been updated via an ajax call

Passing slots to child components within a VueJS application - A helpful guide

Looking for an instance of a node.js ftp server?

Accessing Parent and Child Values in AngularJS Selections

Res.render() is failing to display content

Disable the button until all input fields contain text in ASP

Submitting a PDF document to the server with PHP Laravel through AJAX

What is the best way to transfer an integer from my main application to a separate JavaScript file?

Creating a Login Form with Node.js and MongoDB

Why is the Google Map missing from the Bootstrap modal dialog?

Create a roster of individuals who responded to a particular message