Diferences between input type=button & input type=submit in JavaScript functions

Question

I have a simple JavaScript code to add a string into a ul list:

function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}

function handleButtonClick() {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;
    if (songName == "") {
        alert("Please enter a song");
    } else {
        //alert("Adding song " + songName);
        var li = document.createElement("li");
        li.innerHTML = songName;
        var ul = document.getElementById("playlist");
        ul.appendChild(li);
    }
}

HTML:

<form>
    <input type="text" id="songTextInput" size="40" placeholder="Song name">
    <input type="button" id="addButton" value="Add Song">
</form>
<ul id="playlist">
</ul>

The problem is: when I set my input element as type="button", this JavaScript works, but when I set it as type="submit", it runs well until the first condition or with the alert of second condition, but it doesn't add the song to the list. Why does this occur?

score 2 · Answer 1 · answered Aug 20 '15 at 19:39

A submit input, when clicked, submits a form:

The input element represents a button that, when activated, submits the form.

Moreover, it allows to implicitly submit the form, usually by pressing enter in a text input:

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

A button input won't do that. Clicking it produces no action by default, but you can add event listeners to it in order to run your JS functions.

score 0 · Answer 2 · answered Aug 20 '15 at 19:38

This is because form is getting submitted after completion of js function ,hence reloaded( action="" default send the form data to same page and reload the page content) Use

<form onsubmit="return init();">
    <input type="text" id="songTextInput" size="40" placeholder="Song name">
    <input type="button" id="addButton" value="Add Song">
</form>

Js

function handleButtonClick() {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;
    if (songName == "") {
        alert("Please enter a song");
    } else {
        var li = document.createElement("li");
        li.innerHTML = songName;
        var ul = document.getElementById("playlist");
        ul.appendChild(li);
    }
return false;
}

score 0 · Answer 3 · edited Aug 20 '15 at 20:19

A <input> with type submit marks to the browser that it is used to submit some sort of form or input. By default it will post the <form> it is enclosed in based on the forms action attribute`.

An <input> with type button is just a button which you can assign behaviour to, e.g. a click handler.

You can submit a form with both of the above actions, however it comes out more naturally with type="submit". This is because with type="button" you will have to manually call the submit method of the form in the DOM.

When you have some form validation to do before the form should be submitted, you may find an input with type button more desirable as you will not need to override the default form submission behaviour which occurs with type="submit".

In relation to your above example I assume that it does not work with type="submit" because after the handleButtonClick function has run the page is reloaded due to the form submission occuring - this reloads/resets the DOM meaning the changes you applied in handleButtonClick would not be visible. If the action attribute of the form had been set to another page/script then it would infact redirect the page.

score 0 · Answer 4 · answered Aug 20 '15 at 19:57

The reason it's not working for the "submit" type is because it is trying to submit your form.

By default a form will do a post which is why when you change it to a "submit" input type and click the button you will see your page reload.

Rather than creating an "onclick" event on the button when the page is loaded you could instead make the "action" on your form call the javascript function you want to run when the button is clicked.

<form method='post' action='javascript:handleButtonClick()'>
    <input type="text" id="songTextInput" size="40" placeholder="Song name">
    <input type="submit" id="addButton" value="Add Song">
</form>

with the javascript being the same:

function handleButtonClick() {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;
    if (songName == "") {
        alert("Please enter a song");
    } else {
        var li = document.createElement("li");
        li.innerHTML = songName;
        var ul = document.getElementById("playlist");
        ul.appendChild(li);
    }
}

Doing it this way you would no longer need the "Init" function to add the "onclick" event to your submit button.

The default form method is `GET`, not `POST`. http://stackoverflow.com/questions/2314401/what-is-the-default-form-http-method — Barmar, Aug 20 '15 at 20:19

Diferences between input type=button & input type=submit in JavaScript functions

4 Answers4