Question

我正在创建一个篮球计分应用程序，我希望自定义球队名称，所以我创建了一个表格，以便您可以提交新名称。但是，当我单击“提交”按钮时，除了页面上出现白色闪烁外，什么都没有发生。我只是从文件管理器中打开chrome中的文件。

这是我需要重命名的内容：

<span class="teamname" id="1">Team 1</span>

这是我的表格：

 <form id="myForm">
<input id="name1" maxlength="6" type="text">
<button type="submit" onclick="updateFunction()">Update Team Names</button>
</form>

最后，这是我的JavaScript：

function updateFunction() {
var newname1 = document.getElementById("myForm").elements.namedItem("name1").value;
document.getElementById('1').innerHTML = newname1;
}

Answer 1

HTML表单需要一个action属性，该属性表示应将表单数据发送到何处，例如

<form action="/login"></form>

HTML5不需要您指定action，但无需指定它默认为您所在的同一页面。因此，在您的情况下，提交表单基本上会重新加载页面。要阻止该行为，您可以使用falsy javascript value。

在表单元素（而不是提交按钮）中设置提交逻辑也是一种更好的形式。

因此，这是更改代码的方法：

<form id="myForm" action="javascript:void(0)" onsubmit="updateFunction()">
    <input id="name1" maxlength="6" type="text">
    <button type="submit">Update Team Names</button>
</form>

Answer 2

button标记应位于HTML表单之外。因此，表单应如下所示：

 <form id="myForm">
 <input id="name1" maxlength="6" type="text">
 </form>
 <button type="submit" onclick="updateFunction()">Update Team Names</button>

如何将HTML元素的文本设置为表单文本提交？

2 个答案: