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

单击submit input时，会提交表单：

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

此外，它允许implicitly submit表单，通常按输入文本输入：

form元素默认按钮是submit button中tree order的form owner form   default button元素。

如果用户代理支持让用户隐式提交表单   （例如，在某些平台上点击＆＃34;输入＆＃34;键同时显示文本   字段集中隐式提交表单），然后这样做   activation behavior已定义run synthetic click activation steps的表单   必须使用户代理default button上的link。

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

Answer 2

这是因为表单在js函数完成后被提交，因此重新加载（action =＆＃34;＆＃34;默认将表单数据发送到同一页面并重新加载页面内容）使用

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

类型为<input>的{{1}}标记为浏览器用于提交某种表单或输入。默认情况下，它会根据表单submit属性`发布它所包含的<form>。

类型为action的{{1}}只是一个可以分配行为的按钮，例如点击处理程序。

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

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

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

Answer 4

它不适用于＆＃34;提交＆＃34;类型是因为它试图提交您的表单。

默认情况下，表单会发布一个帖子，这就是为什么当您将其更改为＆＃34;提交＆＃34;输入类型，然后单击您将看到页面重新加载的按钮。

而不是创建＆＃34; onclick＆＃34;当页面加载时按钮上的事件你可以改为做出＆＃34;动作＆＃34;在您的表单上调用单击按钮时要运行的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);
    }
}

这样做你不再需要＆＃34; Init＆＃34;功能添加＆＃34; onclick＆＃34;事件发送到您的提交按钮。

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

4 个答案: