如何將HTML元素的文本設置為表單文本提交？

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 ，但不指定它默認為您所在的同一頁面。 因此，在您的情況下，提交表單基本上會重新加載頁面。 要阻止該行為，您可以使用虛假的javascript值 。

在表單元素中設置提交邏輯也是更好的表單，而不是提交按鈕。

所以這是你應該如何改變你的代碼：

<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

按鈕標記應位於HTML表單之外。 因此，表單應如下所示：

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