how to append element in datalist in form using javascript

Question

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>

Use type="button" instead of type="submit"

Satpal
– Satpal

2017-08-25 10:24:11 +00:00
Commented Aug 25, 2017 at 10:24 — Satpal
– Satpal, Commented Aug 25, 2017 at 10:24

davidxxx · Accepted Answer · 2017-08-25 11:06:58Z

1

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>

answered Aug 25, 2017 at 11:06

davidxxx

132k23 gold badges231 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Rawal Over a year ago

But what if I want to use input type 'submit', then what changes I have to do for that.

davidxxx Over a year ago

You should persist the submitted data. And you should populate the datalist with these persisted data.

Pragnesh Khalas · Accepted Answer · 2017-08-25 10:24:03Z

0

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.

answered Aug 25, 2017 at 10:24

Pragnesh Khalas

2,8982 gold badges15 silver badges26 bronze badges

Comments

Niladri · Accepted Answer · 2017-08-25 10:39:05Z

0

change the html to type=button

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

edited Aug 25, 2017 at 10:39

answered Aug 25, 2017 at 10:24

Niladri

5,9822 gold badges27 silver badges45 bronze badges

2 Comments

Abhishek Rawal Over a year ago

sorry! It is not working with onsubmit and what is the reason for it?

Niladri Over a year ago

you dont need onsubmit you can only change to <input type="button" onclick="abc()"/>

kosar · Accepted Answer · 2019-10-13 11:27:49Z

0

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

edited Oct 13, 2019 at 11:27

answered Oct 13, 2019 at 10:50

kosar

11 bronze badge

Collectives™ on Stack Overflow

how to append element in datalist in form using javascript

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related