JavaScript Form Submit Bug

Question

I'm building this very simple app that changes the innerHTML of an H1 based on what you wrote in the text input.

But when I submit, the page loads and the text the person typed only stays in the page for a fraction of a second.

I'm sure this is a newbie issue, but I'd like to know what I should do different to keep the new text in the H1 even after the submit is clicked.

HTML:

<body>

<h1 id="numberOutput">Type something</h1>

<form onsubmit="changeNumber()">

    <input type="text" name="numberInput" id="numberInput" value="Digite um número">

    <input type="submit" name="">

</form>

</body>

JS

function changeNumber(){

    //Sets var "text_input" to input value
    text_input = document.getElementById("numberInput").value;

    //Sets H1's innerHTML to be whatever the user typed
    document.getElementById("numberOutput").innerHTML = text_input;
}

var text_input;

Possible duplicate of [How to prevent form from being submitted?](https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted) — Lennholm, Jun 14 '18 at 16:11
Possible duplicate of [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Metalik, Jun 14 '18 at 16:11
You're submitting the form and reloading the page. What were you expecting to happen? — j08691, Jun 14 '18 at 16:13

Scott Marcus · Answer 1 · 2018-06-14T16:24:09.487

0

The reason is because a form is meant for one of two things:

Gathering up name/value pairs and submitting them to some remote source.
Creating an interactive UI.

In your case, you are using it for #2, which means that you shouldn't be using a <form> element with a submit button with a submit event in the first place.

Remove the <form> wrapper and just use a regular button and its click event to avoid the form's submission, which is what is causing the effect that you don't want.

Also, don't use inline HTML event attributes, which is a 25+ year old technique we used before we had standards. Instead, follow modern best-practices for event configuration.

Lastly, instead of setting the input element's value here, it may be preferable to use the placeholder attribute, which is used to give a user guidance on what the input should be, but disappears as soon as the user begins providing input.

// Get your DOM element references
let btn = document.getElementById("go");
let input = document.getElementById("numberInput");
let output = document.getElementById("numberOutput");

// Set up your event handlers in JavaScript, not with HTML event attributes
// ... and here, use the click event of the button, instead of the submit event
// of the form

btn.addEventListener("click", changeNumber);

function changeNumber(){
    // Sets H1's innerHTML to be whatever the user typed
    output.textContent = input.value;
}

<h1 id="numberOutput">Type something</h1>
<input type="text" name="numberInput" id="numberInput" placeholder="Digite um número">
<input type="button" id="go">

edited Jun 14 '18 at 16:24

answered Jun 14 '18 at 16:17

Scott Marcus

64,069
6
49
71

That's bad UI. If you hit Enter in the form field, it'll still submit. Using an `onsubmit` handler is much better. – melpomene Jun 14 '18 at 16:18
@melpomene Updated answer. It's actually better to not use the `form` element at all in cases like this. Then there is no event to worry about cancelling. – Scott Marcus Jun 14 '18 at 16:22
But now the field doesn't behave like a real form. For example, you can't just hit Enter on it. – melpomene Jun 14 '18 at 16:23
@melpomene Hitting ENTER would cause a submit and we don't want that here. If we want ENTER to act like a "commit", we can add that behavior. I believe this approach is preferable to wiring an event that you never actually want to handle. – Scott Marcus Jun 14 '18 at 16:24
From a user perspective hitting Enter while the focus is on a text field means "process my input". Users don't care about how forms or submission are implemented. Whether your form is processed on the server side or on the client side, user interaction should work the same way. – melpomene Jun 14 '18 at 16:27
"*If we want ENTER to act like a "commit", we can add that behavior.*" Now you're trying to re-implement browser specific behavior through scripting. What if the user uses a browser that does *not* submit on enter? What if there's a different key combination or even an audio command for form submission? Your "fake form" will still behave differently. – melpomene Jun 14 '18 at 16:30
@melpomene As I said, if we want that behavior, we can add it, but let's not create scaffolding for an event that we never plan to handle. I subscribe to the "let's add what we need/want" model, rather than "let's disable/remove what we don't want" model. – Scott Marcus Jun 14 '18 at 16:30
*What if the user uses a browser that does not submit on enter?* Then, there is no issue because we're not dealing with `submit` at all in my approach. – Scott Marcus Jun 14 '18 at 16:32
*What if there's a different key combination or even an audio command for form submission?* Then, that would have to have been coded anyway. – Scott Marcus Jun 14 '18 at 16:32
I subscribe to idea that forms / fields / submission are an abstract concept that any given user agent can render however it wants. Web pages should use standard components as much as possible, for accessibility reasons if nothing else. If you use a standard form and handle the *submit* event, you'll get the correct behavior no matter what the user is used to. – melpomene Jun 14 '18 at 16:33
I don't disagree with your sentiment at all. I just disagree on implementation. As I said, I'd rather build-up (progressive enhancement) than fall back (graceful degradation). – Scott Marcus Jun 14 '18 at 16:36

score 0 · Answer 2 · answered Jun 14 '18 at 16:42

You should use preventDefault() Event Method. This method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when Clicking on a "Submit" button, prevent it from submitting a form.

function changeNumber( e ){
  e.preventDefault();
  document.getElementById( 'numberOutput' ).innerHTML = document.getElementById( 'numberInput' ).value
}

<h1 id="numberOutput">Type something</h1>
<form onsubmit="changeNumber( event )">
  <input type="text" name="numberInput" id="numberInput" value="Digite um número">
  <input type="submit" name="">
</form>

JavaScript Form Submit Bug

2 Answers2