Adding multiple items to a form via jQuery

Question

GOAL:

Dynamically add form elements—in this case a number of checkboxes—to a form.

PROBLEM:

My code produces only 1 checkbox.

ASSUMPTION:

Scope issue.
Once an html element is created and then attached to another element in the DOM or vDOM using jQuery, it cannot be reused again and I need to build another.

CODE:

$pform = $('<form/>'); // Create a form element.
$pform_checkbox = $('<input/>').attr('type','checkbox'); // Create checkbox element.
$('body').append($pform); // Add form element within the body element.

//Goal is to add 5 checkboxes to the form.
//The result is only one checkbox is added. Why?
for (var x = 0; x<5; x++){
    //creating the checkbox element here will give me the proper result. 
    //$pform_checkbox = $('<input/>').attr('type','checkbox')
    $pform.append($pform_checkbox);
}

JSFIDDLE:

http://jsfiddle.net/7ykjhdzd/

Well, you're only creating one checkbox, so no suprise there ? — adeneo
– adeneo, Commented Jul 27, 2015 at 19:54
Your second assumption is somewhat correct though, once you've created an element, appending it multiple times just moves the same element, it doesn't magically spawn new elements. — adeneo
– adeneo, Commented Jul 27, 2015 at 19:56
And you already know the solution, creating elements or cloning the one you have inside the loop. — adeneo
– adeneo, Commented Jul 27, 2015 at 19:57
I'm confused; I was under the impression that $pform_checkbox will always evaluate to an input element, so my loop keeps 'appending' an instance of that checkbox to the existing form. — brooklynsweb
– brooklynsweb, Commented Jul 27, 2015 at 19:59

BravoZulu · Accepted Answer · 2015-07-27 20:02:11Z

1

Create the checkbox inside the loop:

$pform = $('<form/>'); // Create a form element.
$('body').append($pform); // Add form element within the body element.

for (var x = 0; x<5; x++){
    $pform_checkbox = $('<input/>').attr('type','checkbox')
    $pform.append($pform_checkbox);
}

answered Jul 27, 2015 at 20:02

BravoZulu

1,14013 silver badges24 bronze badges

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

Comments

samkreter · Accepted Answer · 2015-07-27 20:10:37Z

1

This is caused because after $pform_checkbox = $('<input/>').attr('type','checkbox');

$pform_checkbox becomes a reference to the actual checkbox so without redeclaring it each time you go through the iteration its just trying to append the same checkbox to the form.

answered Jul 27, 2015 at 20:10

samkreter

1445 bronze badges

Comments

Stryner · Accepted Answer · 2015-07-27 20:12:10Z

When you write $('<input/>'), you are telling jQuery to create an input DOM element. It only creates one input.

In order to create a copy of that input, you can use .clone. If you don't clone it first, you'll simply be re-appending the same element (which just moves it to a new location).

From the .append documentation:

You can also select an element on the page and insert it into another:
$( ".container" ).append( $( "h2" ) );
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):

The following code demonstrates that .append simply changes the position of an element in the DOM tree:

$("#div2").append($("#text"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Hello <span id="text">World</span></div>
<div id="div2">Div2: </div>

Collectives™ on Stack Overflow

Adding multiple items to a form via jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related