Edit input value before submitting a form without using submit event on the form but somehow on the input

Issue

I have made a JavaScript input element which I want to use as a normal HTML input inside a form. When the form is submitted I want the input's value to be manipulated by the already written JavaScript code before submitting.

I am aware of using the submit event, but it is used on the form not the individual elements inside the form. I want something like using submit event listener on the input without needing to touch other elements such as form.

Is this possible?

Solution

No.

With one exception, no user event that triggers form submission will trigger any event on an input.

That exception is if the input is the submit button which was clicked / field that triggered submission via the Enter key.

That said, there's nothing stopping you manipulating the value of an input in the form as part of the submit event.

form.addEventListener('submit', event => {
    const input = event.target.querySelector("[name='myInput']");
    input.value = `Manipulated: ${input.value}`;
});

Answered By - Quentin