JQuery: clone input fields when working on click but cannot change field values
I want to add a new line that consists of an input field and a selection box when you click on the "ADD PHONE" button. The problem I'm running into is that when I clone the items they seem to clone, however the select box doesn't seem to work. I cannot change it to a different value. In addition, if the values are filled in, the newly added fields will contain the same values before clicking the add button. Another problem is that if I have 2 sets of fields, when I click the ADD PHONE button, it closes both.
So here are my questions:
1) How can I get the cloned select box to work 2) How can I make sure the cloned fields are empty? 3) How can I only clone 1 at a time
I am very grateful for the help.
Html
<button id="add-phone-button">Add Phone</button>
<div class="phone-details">
<div id="phone-number" class="col-xs-8">
<label for="phone" class="invisible">Phone</label>
<input type="text" id="phone" class="phone" placeholder="Phone"/>
</div>
<div id="phone-type" class="col-xs-4">
<label for="usage" class="invisible">Usage</label>
<select id="usage" />
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
JQuery
$('#add-phone-button').click(function() {
$('.phone-details #phone-number, .phone-details #phone-type').clone().appendTo('.phone-details:last-child');
});
source to share
-
The problem comes from jQuery Mobile wrapping
<select>
additional HTML tags and adding event listeners to them. The trick is to replace the wrapped HTML with the original one<select>
and initiate its initialization after adding it to the page:clone.find('.ui-select').html(function() { return $(this).find('select')[0].outerHTML }); clone.appendTo('.phone-details'); clone.find('select').parent().enhanceWithin();
-
You can remove all values
<input>
in the clone before adding it to the page:clone.find('input[type="text"]').val('');
-
This can be achieved with
:first
:$('.phone-info:first')
or with the original HTML:
$('.phone-details #phone-number:first, .phone-details #phone-type:first')
Since using multiple elements with the same identifier is very discouraged, I changed them to classes.
HTML:
<button id="add-phone-button">Add Phone</button>
<div class="phone-details">
<div class="phone-info">
<div class="phone-number col-xs-8">
<label for="phone" class="invisible">Phone</label>
<input type="text" name="phone" class="phone" placeholder="Phone"/>
</div>
<div class="phone-type col-xs-4">
<label for="usage" class="invisible">Usage</label>
<select name="usage">
<option selected="selected">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>
JS:
$('#add-phone-button').click(function()
{
var clone = $('.phone-info:first').clone();
clone.find('.ui-select').html(function() { return $(this).find('select')[0].outerHTML });
clone.find('input[type="text"]').val('');
clone.appendTo('.phone-details');
clone.find('select').parent().enhanceWithin();
});
If you want to stay with the original HTML, a fiddle with fixed JS and original HTML.
Update . Thanks to @Omar for pointing out the error with <input>
and for .enhanceWithin()
.
source to share