CODEWITHSUNDEEP
javascripthtml
Abhishek Rawal
Abhishek Rawal

Reputation: 158

how to append element in datalist in form using javascript

when I am removing form tag then it is working but after adding form tag from HTML it is not working. following is the code on which I am trying and what is the reason it is not working

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>

Upvotes: 2

Views: 7112

Answers (4)

kosar
kosar

Reputation: 1

this works for me : html ->

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

js and 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);

Upvotes: 0

davidxxx
davidxxx

Reputation: 131346

Valuing the attribute type of the input element with the submit value means submit the form.

The button documentation states indeed :

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

You don't have any form, so the current page is considered as the actual form.
As you click on the button, the function associated to onclick() is first invoked.
It adds the option in the dataList but you will never see it because the form is submitted and so you come back to the initial state of the html page.

You don't want submit a form but having a button to bind a click event to a function.

So don't use the submit type but the button type for your input :

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

that matches to your requirement :

button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

As a side note, your function is more complex as required and introduces too many variables that may create side effects. This is enough : 

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>

Upvotes: 1

Niladri
Niladri

Reputation: 5962

change the html to type=button 

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

Upvotes: 0

Pragnesh Khalas
Pragnesh Khalas

Reputation: 2898

Because you used button as submit type. If you need client side manipulation then it should not be maintain the page state (means not submit). In your case if you will use 

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

in place 

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

so it will be solve your problem.

Upvotes: 0

Related Questions