What are the differences between "type=button" and "type=Submit" in an input?

Asked

Viewed 1,321 times

5

I have a simple Javascript code to add a string to a list ul:

JS:

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

function handleButtonClick() {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;
    if (songName == "") {
        alert("Por favor, adicione um pergunta");
    } else {
       //alert("Adicionando a música " + 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="Nome da música">
    <input type="button" id="addButton" value="Adicionar música">
</form>
<ul id="playlist">
</ul>

The problem is: When I set my input with type=button, this javascript works, but when I define how type=submit, it runs legal until the first condition or with the second condition alert, but does not add the string in the list.

Does anyone know why this happens?

javascript html form

  • Give any error on the console?

  • 1

    It looks like it’s reloading the page, doesn’t it? Submit submits the form (i.e., navigates to the specified URL as action form, or to the page itself).

2 answers

4

The type='submit' has a special behavior, when pressed the form will be sent - unless you prevent this with Javascript. Already the type='button', as type suggests is only a button that by default has no functionality - which you can add with some script.

The problem with your code is that the function init - responsible for assigning the click event to the button - it is never executed, so when the button is pressed it retains its default functionality: Do nothing.

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

function handleButtonClick() {
  var textInput = document.getElementById("songTextInput");
  var songName = textInput.value;
  if (songName == "") {
    alert("Por favor, adicione um pergunta");
  } else {
    //alert("Adicionando a música " + SongName);
    var li = document.createElement("li");
    li.innerHTML = songName;
    var ul = document.getElementById("playlist");
    ul.appendChild(li);
  }
}


// chamando init :)
init();
<form>
  <input type="text" id="songTextInput" size="40" placeholder="Nome da música">
  <input type="button" id="addButton" value="Adicionar música">
</form>
<ul id="playlist">
</ul>

1

In your form this is missing to run Submit

<form onSubmit="return false;">

</form>

In the form tag there is a built-in Systener onsubmit, when you put the Ubmit button, auto implements the Ubmit on that button, then it is necessary to enter with a false Return to lock the Ubmit and do the checks.

Browser other questions tagged javascript html form

You are not signed in. Login or sign up in order to post.