How to add a text field when user click a add button?

Question

When user clicks the add button a new row appears which i did it with this code:

function generateRow() {
    var d = document.getElementById("add");
    d.innerHTML += "<p><input type='text' name='items'>";
}

However, when I type some data into the added text field and then click the add button again the data I typed in the other row disappears. Can someone tell me a better solution for the JavaScript. I don't mind jQuery if it works better. Advance thanks!

You are getting the same element each time and just replacing its contents. You need to append a new element to the DOM — , May 17 '14 at 05:40
Stephen thanks for explaining, i have got the solution from zlatin. Thanks for your time! — Firdauz, May 17 '14 at 05:59

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

Use createElement together with appendChild instead of innerHTML: Advantages of createElement over innerHTML?

Also read this comprehensive article about innerHTML disadvatages and alternatives: http://slayeroffice.com/articles/innerHTML_alternatives/ Especially the section [5a] Creating Multiple Elements

In your case it could be:

<script type="text/javascript">
function generateRow() {
   var d = document.getElementById("add");
   var p = document.createElement("p");
   var input = document.createElement("input");
   input.setAttribute('type', 'text');
   input.setAttribute('name', 'items');
   p.appendChild(input);
   d.appendChild(p);
}
</script>

Also see http://jsfiddle.net/bvLba/

edited May 23 '17 at 10:25

Community

1
1

answered May 17 '14 at 05:39

Zlatin Zlatev

3,034
1
24
32

So when i call the function it should be like this right?
– Firdauz May 17 '14 at 05:52
It could be like that, yes. It is not the problem in the way that you called the function (you could keep it the same as it was with your original function). The problem is that when you use innerHtml, the browser recreates all the input elements every time you add a new one, so this results in the behaviour you observe. – Zlatin Zlatev May 17 '14 at 05:54
AHHH okay i get what you are trying to say. Thanks, will try it out and get back. – Firdauz May 17 '14 at 05:56
Yes it works, thanks alot, i am a newbie so thanks for taking your time to explain to me :) – Firdauz May 17 '14 at 05:58
Zlatin i just wanted to ask u if u knew a way to make each new textfield a different name. For example, first text field name items1, second would be items2 etc. The reason why i am asking is because, i want to add the items into my database, but if it has the same name i cant. Is there anyway i can control the name for each text field? – Firdauz Jun 14 '14 at 07:21
Yes, just add a counter variable and merge it with 'items' string when the setAttribute method is called for the 'name' attribute – Zlatin Zlatev Jun 15 '14 at 07:04
Okay can i decided to use an array so that the name all will be same and it will still work when i call back the data. Thanks again for your help. – Firdauz Jun 19 '14 at 08:59

How to add a text field when user click a add button?

1 Answers1