通过javascript提交HTML表单并防止默认

Question

i am using a virtual keyboard built with javascript for a user interface running on an embedded system.

Source code for the virtual keyboard can be found here : https://codepen.io/dcode-software/pen/KYYKxP

I only changed a single part in the source code. Keyboard.js file line 141-151:

case "enter":
          keyElement.classList.add("keyboard__key--wide");
          keyElement.innerHTML = createIconHTML("Enter");

          keyElement.addEventListener("click", () => {
            this.properties.value += "\n";
            this._triggerEvent("oninput");
            /**
             * The part that i modified
             */
            document.querySelector("form").submit();
          });

          break;

Basically, what I'm trying to do here is to submit the form on the current page when the "enter" key is pressed on the virtual keyboard. (Which works fine)

But i also want to prevent default on this submit event. ( e.preventDefault() ) So how can i achieve that? Thanks for your help.

Edit : I already added e.preventDefault() to the submit function. Here is the code which i handle the login form submit:

//Login
const loginForm = document.querySelector("#login-form");
loginForm.addEventListener("submit", async (e) => {
  e.preventDefault();

  const errorContainer = document.querySelector("#login-form-message");

  errorContainer.innerHTML = "";

  try {
    //Submitting form
  } catch (error) {
    //Handle error
  }
});

Answer 1

I found it after reading the MDN documentation.

This is the HTMLFormElement.submit() documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

This document explains quite well why I have this problem.

To summarize, I need to use the requestSubmit () function instead of the submit () function since the submit() function does not trigger a submit event.

HTMLFormElement.requestSubmit() documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit