i use some code to clone form elements but i dont know how it works with with datepicker.
Can someone update the code that i can use datepicker by input what can be clone? With query ui?
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
this.id = newId;
}).end()
//inject new section
.appendTo('#sections');
return false;
});
//remove section
$('#sections').on('click', '.remove', function() {
//fade out section
$(this).parent().fadeOut(300, function(){
//remove parent element (main section)
$(this).parent().parent().empty();
return false;
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sections">
<div class="section">
<fieldset>
<legend>test form - <a href="#" class='button red remove'>delete</a></legend>
<p>
<label for="number1">number1:</label>
<input type="text" name="number1[]"/>
</p>
<p>
<label for="number2">number2:</label>
<input type="text" name="number2[]"/>
</p>
<p>
<label for="selcet1">selcet1:</label>
<select name="select1[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="selcet2">selcet2:</label>
<select name="selcet2[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="date">Date:</label>
<input type="text" name="date[]" required />
</p>
<p>
<label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
</p>
</fieldset>
</div>
</div>
<a href="#" class='addsection'>add form</a>
I dont know how to add a datepicker by the // input type="text" name="date[]" required // that i can clone and use.
Please can someone help me that it works?
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id - THIS CAUSES JqueryUI Datepicker to bug, also you shouldn't use numerical only IDs
//this.id = newId;
}).end()
//inject new section
.appendTo('#sections');
//initialize datePicker on last name=date[] element in HTML DOM
$("input[name='date[]']").last().datepicker();
return false;
});
//init original datePicker in HTML DOM
$("input[name='date[]']").last().datepicker();
//remove section
$('#sections').on('click', '.remove', function() {
//fade out section
$(this).parent().fadeOut(300, function(){
//remove parent element (main section)
$(this).parent().parent().empty();
return false;
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<div id="sections">
<div class="section">
<fieldset>
<legend>test form - <a href="#" class='button red remove'>delete</a></legend>
<p>
<label for="number1">number1:</label>
<input type="text" name="number1[]"/>
</p>
<p>
<label for="number2">number2:</label>
<input type="text" name="number2[]"/>
</p>
<p>
<label for="selcet1">selcet1:</label>
<select name="select1[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="selcet2">selcet2:</label>
<select name="selcet2[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="date">Date:</label>
<input type="text" name="date[]" required />
</p>
<p>
<label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
</p>
</fieldset>
</div>
</div>
<a href="#" class='addsection'>add form</a>