Question

当我删除表单标签然后它正在工作但是从HTML添加表单标签后它无法正常工作。以下是我正在尝试的代码以及它无法正常工作的原因

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>

Answer 1

因为您使用了按钮作为提交类型。如果您需要客户端操作，那么它不应该维护页面状态（意味着不提交）。在您的情况下，如果您将使用

Views

到位

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

所以它将解决你的问题。

Answer 2

将html更改为type=button

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

Answer 3

使用IHttpActionResult值对type元素的属性input进行评估意味着提交表单。

确实

The button documentation个州：

提交：按钮将表单数据提交给服务器。这是如果未指定属性，或者属性为，则为default 动态更改为空值或无效值。

您没有任何表格，因此当前页面被视为实际表格当您单击按钮时，首先会调用与submit关联的功能它在onclick()中添加了选项，但您永远不会看到它，因为表单已提交，因此您将返回到html页面的初始状态。

您不希望提交表单，但需要一个按钮才能将点击事件绑定到某个功能。

所以不要使用dataList submit，而type button用于type：

input

符合您的要求：

按钮：该按钮没有默认行为。它可以有客户端与元素事件关联的脚本，在触发时触发事件发生了。

作为旁注，您的功能根据需要更复杂，并且引入了太多可能产生副作用的变量。这就够了：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

这对我有用： html->

<input type="text"  class='form-control' list="city" >
<datalist  id="city">
</datalist>

js和jq->

$("#city").empty(); // first empty datalist 
var options=[];
options[0] = new Option('landan');
options[1] = new Option('york');
options[2] = new Option('liverPool');
$("#city").append(options);

如何使用javascript在表单中追加元素

4 个答案: