如何在形式上使用javascript在數據列表中追加元素

當我刪除表單標籤，然後它正在工作，但從HTML添加表單標記後，它不起作用。以下是對這些我想，什麼代碼是因爲你用按鈕提交類型它不工作如何在形式上使用javascript在數據列表中追加元素

function abc() { 
 
    var i, ele, node, parent; 
 
    var num = document.getElementById("name").value; 
 
    //num=parseInt(num); 
 
    var parent = document.getElementById("listName"); 
 
    var node = document.createTextNode(num); 
 
    var ele = document.createElement("option"); 
 
    ele.append(node); 
 
    parent.appendChild(ele); 
 
    //alert(num); 
 
    //num++; 
 
    document.getElementById("name").value = ""; 
 
}

<form> 
 
    <input type="input" id="name" list="listName" /> 
 
    <datalist id="listName"></datalist> 
 
    <input type="submit" onclick="abc()" /> 
 
</form>

來源

2017-08-25 Abhishek Rawal

使用'類型= 「按鈕」'，而不是'類型= 「提交」' – Satpal

價值評估與submit值input元素的屬性type裝置提交表單。

The button documentation狀態確實：

提交：該按鈕的表單數據提交到服務器。如果未指定屬性，或者將屬性動態更改爲空值或無效值，則這是默認值。

您沒有任何表單，因此當前頁面被視爲實際表單。
當你點擊按鈕時，首先調用與onclick()相關的功能。
它增加了dataList中的選項，但您永遠不會看到它，因爲表單已提交，因此您將返回到html頁面的初始狀態。

你不想提交一個表單，但有一個按鈕來將點擊事件綁定到一個函數。

所以不要使用submittype但buttontype您input：

<input type="button" value="add option" onclick="abc()" />

符合您的要求：

按鈕：按鈕沒有缺省行爲。它可以具有與元素的事件相關聯的客戶端腳本，當事件發生時觸發這些腳本事件。

作爲一個方面說明，您的函數根據需要更加複雜，並且引入了太多可能會產生副作用的變量。這是不夠的：

function abc() { 
 
    var nameElement = document.getElementById("name"); 
 
    var newOptionElement = document.createElement("option"); 
 
    newOptionElement.textContent = nameElement.value; 
 

 
    var listNameElement = document.getElementById("listName"); 
 
    listNameElement.appendChild(newOptionElement); 
 
    nameElement.value = ""; 
 
}

<form> 
 
    <input type="input" id="name" list="listName" /> 
 
    <datalist id="listName"></datalist> 
 
    <input type="button" onclick="abc()" /> 
 
</form>

來源

2017-08-25 11:06:58 davidxxx

但是如果我想使用輸入類型'submit'，那麼我必須做什麼改變那。 –

您應該堅持提交的數據。你應該用這些持久數據填充數據列表。 – davidxxx

的原因。如果你需要客戶端操作，那麼它不應該保持頁面狀態（意味着不提交）。在你的情況，如果你將在地方

<input type="submit" onclick="abc()" />

使用

<input type="button" onclick="abc()" />

所以這將是解決你的問題。

來源

2017-08-25 10:24:03

改變HTML到type=button

<input type="button" onclick="abc()"/>

來源

2017-08-25 10:24:55 Niladri

對不起！它不與onsubmit一起工作，它的原因是什麼？ –

你不需要onsubmit你只能改變爲'' – Niladri

如何在形式上使用javascript在數據列表中追加元素

回答

相關問題