Add input to form using JS

Question

It's possible to add inputs that are created dynamically by the user to a form?

Let's say I have this when the page loads:

<form id="my-form" xl-form>
... // here the inputs
</form>

And after that, I create an input (after the page loads)

<input type="input" class="integr_elements" placeholder="name" id="name">

How can I add it inside the form that has "my-form" as id? I need to add it inside because i want to use a GitHub plugin that will affect only the inputs that are inside the form.

Is this possible?

Thanks!

PS: Before posting this, searched on the forum but found 2013 post and seems there are some deprecated ways.

Brooke Holmes · Accepted Answer · 2022-08-24 08:48:28Z

9

You can use Node.appendChild() for a pure javascript solution (no jQuery).

const el = document.createElement("input");
el.className = "integr_elements";
el.placeholder = "name";
el.id = "name";

const form = document.getElementById("my-form");
form.appendChild(el);

<form id="my-form" xl-form></form>

edited Aug 24, 2022 at 8:48

answered Jul 15, 2018 at 23:47

Brooke Holmes

1,63215 silver badges32 bronze badges

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

2 Comments

K3ny1 Over a year ago

Thanks for your answer Sam. Something like this? document.my-form.appendChild(name); ?

Brooke Holmes Over a year ago

Sorry about that, was adding an example. I've included a snippet that demonstrates this!

D. Seah · Accepted Answer · 2018-07-15 23:49:28Z

0

$('#my-form').append('<input type="input" class="integr_elements" placeholder="name" id="name">');

answered Jul 15, 2018 at 23:49

D. Seah

4,7121 gold badge15 silver badges27 bronze badges

Comments

Luay · Accepted Answer · 2018-07-15 23:52:55Z

0

Something like this? Simply attaching or appending html content onto the form field and so on, you can change the values, names, types or even input types!

$(document).ready(function(){
  $("#myForm").append("<input name='entry1' type='text'></input>");
  $("#myForm").append("<input name='entry2' type='password'></input>");
  $("#myForm").append("<input name='entry3' type='text'></input>");
})

input {
display:block;
margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  
</form>

edited Jul 15, 2018 at 23:52

answered Jul 15, 2018 at 23:50

Luay

8145 silver badges15 bronze badges

Collectives™ on Stack Overflow

Add input to form using JS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related