输入类型之间的差异=按钮和；输入类型=在JavaScript函数中提交

我有一个简单的JavaScript代码，可以将字符串添加到ul列表中：

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:

---

问题是：当我将输入元素设置为

type=“button”

时，这个JavaScript可以工作，但当我将其设置为

type=“submit”

时，它运行良好，直到出现第一个条件或出现第二个条件的警报，但它不会将歌曲添加到列表中。为什么会出现这种情况？

这是因为表单在完成js功能后被提交，因此被重新加载（操作=“默认将表单数据发送到同一页面并重新加载页面内容） 使用

单击时，提交一个表单：

元素是一个按钮，激活后提交表单

此外，通常通过在文本输入中按enter键，它还允许输入表单：

元素的默认按钮是其中的第一个 元素

如果用户代理支持让用户隐式提交表单 （例如，在某些平台上，当文本 字段（隐式提交表单），然后为 具有已定义 必须使用户代理在此基础上运行

按钮输入不能做到这一点。默认情况下，单击它不会生成任何操作，但您可以向它添加事件侦听器，以便运行JS功能。

A

，键入

submit

将其标记为用于提交某种表单或输入的浏览器。默认情况下，它将根据表单

操作

属性发布它所包含的

类型为

按钮的
只是一个按钮，您可以将行为分配给它，例如单击处理程序

您可以使用上述两种操作提交表单，但是使用
type=“submit”
更自然。这是因为使用
type=“button”
必须手动调用DOM中表单的
submit
方法

当您在提交表单之前需要进行一些表单验证时，您可能会发现键入
按钮的输入更可取，因为您不需要覆盖使用
type=“submit”
时出现的默认表单提交行为

关于上面的示例，我假设它不适用于
type=“submit”
，因为在
handleButtonClick
函数运行后，由于表单提交发生，页面被重新加载-这将重新加载/重置DOM，意味着在
handleButtonClick
中应用的更改将不可见。如果表单的
操作
属性已设置为另一个页面/脚本，则它实际上会重定向页面。
它不适用于“提交”类型的原因是因为它正在尝试提交您的表单

默认情况下，表单将执行post，这就是为什么当您将其更改为“提交”输入类型并单击按钮时，您将看到页面重新加载

在加载页面时，您可以在表单上调用要在单击按钮时运行的javascript函数，而不是在按钮上创建“onclick”事件

<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>

通过这种方式，您将不再需要“Init”函数将“onclick”事件添加到提交按钮。
默认的表单方法是
GET
，而不是
POST
。这是真的。我的错误。谢谢你的更正。
<form onsubmit="return init();">
    <input type="text" id="songTextInput" size="40" placeholder="Song name">
    <input type="button" id="addButton" value="Add Song">
</form>

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;
}

<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>

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);
    }
}