How do I append input node to form with JavaScript while keeping existing form data?

Question

I would like to add another input field into the form each time I click the button in the code below. Using appendChild(), it seems as though I can only do this one time. I tried adding the field using innerHTML, but this removes what has already been typed in the existing form fields. What would be the best way to achieve this with vanilla JavaScript while keeping what has already been typed into the form? Thank you in advance for your help.

let getArticleForm = document.getElementById("articleForm");
let cloneInputNode = document.getElementById("textInput").cloneNode(true);
cloneInputNode.setAttribute("id", "newId");

function addInput() {
  getArticleForm.appendChild(cloneInputNode);
}

<form id ='articleForm'>
  <input id="textInput" type="textarea"></input>
</form>
<button onClick="addInput()">add input</button>

Codepen

CertainPerformance · Accepted Answer · 2021-02-02 16:32:09Z

1

Clone it inside the listener, else you've only created one clone (which gets removed from its prior location when appended again).

let getArticleForm = document.getElementById("articleForm");

function addInput() {
  getArticleForm.appendChild(document.getElementById("textInput").cloneNode(true));
}

<form id ='articleForm'>
  <input id="textInput" type="textarea"></input>
</form>
<button onClick="addInput()">add input</button>

But there are some other fixes to make too:

The cloned nodes will all have the same ID, which is invalid HTML. While you could set a new ID for each input, dynamic IDs are an antipattern anyway - better to leave it off entirely IMO.
type="textarea" doesn't make sense as an attribute on an <input>. If you want a textarea, use a <textarea>.
Instead of cloning the existing input, consider just appending a new input.

const getArticleForm = document.getElementById("articleForm");

function addInput() {
  getArticleForm.appendChild(document.createElement('input'));
}

<form id ='articleForm'>
  <input id="textInput" type="textarea"></input>
</form>
<button onClick="addInput()">add input</button>

edited Feb 2, 2021 at 16:32

answered Feb 1, 2021 at 22:48

CertainPerformance

374k55 gold badges354 silver badges359 bronze badges

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

2 Comments

Jesse Over a year ago

Thank you, this helped me tremendously. Is there a way to accomplish this without copying the text that has already been typed in the original input field? So that the cloned node has no text input even if the original node already has text input.

CertainPerformance Over a year ago

Instead of cloning, I'd create an entirely new <input> instead, see snippet

Collectives™ on Stack Overflow

How do I append input node to form with JavaScript while keeping existing form data?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related