JavaScript 函数中 input type=button 和 input type=submit 的区别

Question

我有一个简单的 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：

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

问题是：当我将输入元素设置为 type="button" 时，这个 JavaScript 可以工作，但是当我将它设置为 type="submit" 时，它运行良好，直到第一个条件或第二个条件的警报，但它没有不要将歌曲添加到列表中。为什么会出现这种情况？

Answer 1

这是因为表单在js函数完成后才被提交，因此reloaded(action=""默认将表单数据发送到同一页面并重新加载页面内容) 使用

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

Answer 2

submit input，点击后提交表单：

input 元素 represents 是一个按钮，激活后会提交表单。

此外，它允许implicitly submit 表单，通常通过在文本输入中按回车：

form 元素的 默认按钮 是 tree order 中的第一个 submit button，其 form owner 是 form 元素。

如果用户代理支持让用户隐式提交表单 （例如，在某些平台上，在输入文本时按“回车”键 字段集中隐式提交表单），然后这样做 其default button 定义了activation behavior 的表单 必须使用户代理在该default button 上发送run synthetic click activation steps。

按钮输入不会这样做。默认情况下单击它不会产生任何操作，但您可以向其添加事件侦听器以运行您的 JS 函数。

Answer 3

类型为submit 的<input> 向浏览器表明它用于提交某种形式或输入。默认情况下，它将根据action 属性的形式发布包含在其中的<form>。

<input> 类型为 button 只是一个按钮，您可以将行为分配给它，例如点击处理程序。

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

当您需要进行一些表单验证在提交表单之前时，您可能会发现类型为 button 的输入更可取，因为您不需要覆盖默认的表单提交行为，该行为与type="submit" 一起发生。

关于您上面的示例，我假设它不适用于 type="submit"，因为在 handleButtonClick 函数运行后，由于发生表单提交，页面被重新加载 - 这将重新加载/重置 DOM，这意味着您所做的更改在handleButtonClick 中应用的将不可见。如果表单的action 属性已设置为另一个页面/脚本，那么它实际上会重定向该页面。

Answer 4

它不适用于“提交”类型的原因是它正在尝试提交您的表单。

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

与其在页面加载时在按钮上创建“onclick”事件，不如让表单上的“动作”调用您希望在单击按钮时运行的 javascript 函数。

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

与 javascript 相同：

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

这样做，您将不再需要“Init”函数将“onclick”事件添加到您的提交按钮。