Add inputs to form using JS


#1

Hello,
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>
... // some 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'm using a GitHub plugin that will affect only the inputs that are inside the
form.

Is this possible?

Thanks!


#2

Solved with this:

  var myinput = document.getElementById("#name"); 
  $('#my-form').append(myinput);

Thanks.


#3

When you append, what happens to the original element with the id "name"? Are there now 2 elements having the same id value?

If so, I am interested in how you ensured expected behavior since AFAIK, there are no specifications on how any given script / layout engine must deal with that.


#4

What you are doing is identifying an existing element, then appending it to a form in which it already exists.

If you insist on using jQuery, then you should .clone() an element, or create one from scratch, give it a different id and name, THEN append it to the form.

V/r,

^ _ ^


#5

Cf. http://api.jquery.com/append/

You can also select an element on the page and insert it into another [...] If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned)

Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.


#6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.