I can't figure out how to add event handlers to dynamically added html in the fiddle example below. Through searching I realize you have to delegate the handler to an element originally on the page. However, I am passing the newly added elements into a module (dateTimeRangeWidget) that sets everything up.
https://jsfiddle.net/burtonrhodes/u2L2epmz/
html
<h3>
Date Picker Test
<a href="#" id="do_addEvent" class="btn btn-warning pull-right">
Add Event
</a>
</h3>
<hr/>
<form>
<div class="eventsDiv">
<!-- Event[0] -->
<div class="eventDiv" data-id="0">
<div class="row">
<div class="form-group col-xs-3">
<label>Start Date</label>
<input type="text" name="event[0].startDate" class="form-control startDate">
<div class="checkbox">
<label>
<input type="checkbox" name="event[0].allDayEvent" class="allDayEvent" />
All Day Event
</label>
</div>
</div>
<div class="form-group col-xs-3 timeDiv">
<label>Start Time</label>
<input type="text" name="event[0].startTime" class="form-control startTime">
</div>
<div class="form-group col-xs-3">
<label>End Date</label>
<input type="text" name="event[0].endDate" class="form-control endDate">
</div>
<div class="form-group col-xs-3 timeDiv">
<label>End Time</label>
<input type="text" name="event[0].endTime" class="form-control endTime">
</div>
</div>
<hr/>
</div>
</div>
<!-- ./eventsDiv -->
</form>
js
$(document).ready(function() {
// Wire do_addEvent button
$("#do_addEvent").on("click", function(event) {
// Copy and add evenDiv html at the bottom
var lastEventDiv = $("div.eventDiv").last();
var newEventDiv = $(lastEventDiv).after($(lastEventDiv).html());
// TODO rename input variable names here with newId
// --- code here --
// Setup the new eventDiv
// !!! This doesn't work !!!
setUpEventDiv(newEventDiv);
event.preventDefault();
});
// Setup all eventDiv's when the page loads
$("div.eventDiv").each(function(index, eventDiv) {
// Wire the eventDiv
setUpEventDiv(eventDiv)
});
});
/**
* Finds all the div elements and calls setupDateTimePicker
*/
function setUpEventDiv(eventDiv) {
var $startDateTextBox = $(eventDiv).find('.startDate:first').datepicker();
var $endDateTextBox = $(eventDiv).find('.endDate:first');
var $startTimeTextBox = $(eventDiv).find('.startTime:first');
var $endTimeTextBox = $(eventDiv).find('.endTime:first');
var $allDayEventCheckBox = $(eventDiv).find('.allDayEvent:first');
var $timesDiv = $(eventDiv).find('.timeDiv');
// Setup time picker
setupDateTimePicker($startDateTextBox, $startTimeTextBox,
$endDateTextBox, $endTimeTextBox,
$allDayEventCheckBox, $timesDiv);
}
/**
* Sets up the custom date/time picker widget
*/
function setupDateTimePicker($startDate, $startTime,
$endDate, $endTime,
$allDayEvent, $timesDiv) {
var mydtrw = dateTimeRangeWidget(jQuery);
mydtrw.init({
$startDateElem: $startDate,
$endDateElem: $endDate,
$startTimeElem: $startTime,
$endTimeElem: $endTime,
$allDayEventElem: $allDayEvent,
$timeElements: $timesDiv
});
}
There was some mistakes in your code.
When you did this $(lastEventDiv).html() you're actually stripping the parent html element so you always had just one .eventDiv
Here's a working fiddle.
$(document).ready(function() {
// Wire do_addEvent button
$("#do_addEvent").on("click", function(event) {
// Copy and add eventDiv html at the bottom
var lastEventDiv = $("div.eventDiv").last();
var newEventDiv = lastEventDiv.clone(); //clone the last event div. When you were adding it with .html(), you were removing the parent tags so you never had a second .eventDiv.
var newId = $("div.eventDiv").length; //lets get a unique ID. This should change in your code for something better.
newEventDiv.data('id', newId); //change id
//change the id and name atributes for it to work correctly
$.each(newEventDiv.find('input'), function(index, element) {
$(element).attr('id', 'input' + Math.round(Math.random()*100));
$(element).attr('name',$(element).attr('name').replace(/\[\d+](?!.*\[\d)/, '[' + newId + ']'));
$(element).removeClass('hasDatepicker'); //remove the hasDatepicker class for the plugin to work correctly.
})
lastEventDiv.after(newEventDiv); //append id after the last event div
// TODO rename input variable names here with newId
// --- code here --
// Wire the new eventDiv date/time picker
// !!! This doesn't work !!!
setUpEventDiv(newEventDiv);
event.preventDefault();
});
// Loop through event divs and wire actions for each section
$("div.eventDiv").each(function(index, eventDiv) {
// Wire the eventDiv
setUpEventDiv(eventDiv)
});
});
Related
I have a section of code that contains a dropdown and 3 readonly input fields. The input fields are populated using javascript, this works fine on it's own using the below code -
$(document).on('change', '.unit', function(e) {
//Getting Value
var role = $('.unit option:selected').data('role');
var power = $('.unit option:selected').data('power');
var type = $('.unit option:selected').data('type');
//Setting Value
$(".role").val(role);
$(".power").val(power);
$(".type").val(type);
});
I am wanting to clone the element using this code -
//define template
var template = $('.duplicate-sections .form-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(true, true).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('.duplicate-sections');
return false;
});
//remove section
$('.duplicate-sections').on('click', '.remove', function() {
//fade out section
$(this).closest('.form-section').fadeOut(300, function(){
$(this).closest('.form-section').empty();
});
return false;
});
The cloning process works and the dropdown and the inputs are cloned. However when populating the cloned input fields it uses the values from the parent not the clone.
My html is -
<div class="duplicate-sections">
<div class="form-section">
<div class="form-group row">
<label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right">Unit Type</label>
<div class="col-sm-3">
<select name="unit" id="unit" class="form-control unit"><option value="">Select</option><option
data-role="HQ" data-power="4" data-type="Company Commander" value="1">Ehrwig Arellano</option>
<option data-role="HQ" data-power="6" data-type="Company Commander" value="2">Ehrwig
Arellano</option>
<option data-role="HQ" data-power="2" data-type="Tempestor Prime" value="3">Tempestor Prime</option>
</select></div>
<div class="col-sm-2 increment_controls">
<input type="text" id="role" name="role" class="form-control role" readonly placeholder="Role">
</div>
<div class="col-sm-1 increment_controls">
<input type="text" id="power" name="power" class="form-control power" readonly placeholder="PL">
</div>
<div class="col-sm-3 increment_controls">
<input type="text" id="type" name="type" class="form-control type" readonly placeholder="Type">
</div>
</div>
<label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right">
</label><input class="remove col-sm-9" type="button" value="Remove Unit"></input>
</div>
</div>
<label for="inputFirstName" class="col-form-label col-sm-3 text-left text-sm-right"></label>
<input class="addsection col-sm-9" type="button" value="Add Unit"></input>
The whole thing can be found here - JSFiddle
You need to update change event handler script for Unit as here you need to update input fields from the relevant form section only and not for all input fields.
see below code
$(document).on('change', '.unit', function(e) {
//Getting Value
var $option = $(this).find('option:selected');
var role = $option.data('role');
var power = $option.data('power');
var type = $option.data('type');
//Setting Value
var $parent = $(this).closest('.form-section');
$parent.find(".role").val(role);
$parent.find(".power").val(power);
$parent.find(".type").val(type);
});
Demo JSFiddle
I have a html form, where user need to enter the name and address of their office. The number of offices are dynamic.
I want to add an Add More button, so that users can enter the details of any number of offices.
My question is, how can I create an array of inputs where new elements can be added and removed using JavaScript. Currently, I'm doing it using js clone method, but I want an array, so that input data can easily be validated and stored to database using Laravel.
What I'm currently doing..
This is my HTML form where users have to enter the address of their clinic or office. I've taken a hidden input field and increasing the value of that field whenever a new clinic is added, so that I can use loop for storing data.
<div class="inputs">
<label><strong>Address</strong></label>
<input type="text" class="hidden" value="1" id="clinicCount" />
<div id="addresscontainer">
<div id="address">
<div class="row" style="margin-top:15px">
<div class="col-md-6">
<label><strong>Clinic 1</strong></label>
</div>
<div class="col-md-6">
<button id="deleteclinic" type="button" class="close deleteclinic"
onclick="removeClinic(this)">×</button>
</div>
</div>
<textarea name="address1" placeholder="Enter Clinic Address" class="form-control"></textarea>
<label class="text-muted" style="margin-top:10px">Coordinates (Click on map to get coordinates)</label>
<div class="row">
<div class="col-md-6">
<input class="form-control" id="latitude" type="text" name="latitude1" placeholder="Latitude" />
</div>
<div class="col-md-6">
<input class="form-control" id="longitude" type="text" name="longitude1" placeholder="Longitude" />
</div>
</div>
</div>
</div>
</div>
<div class="text-right">
<button class="btn btn-success" id="addclinic">Add More</button>
</div>
And my js code..
function numberClinic(){
//alert('test');
var i=0;
$('#addresscontainer > #address').each(function () {
i++;
$(this).find("strong").html("Clinic " + i);
$(this).find("textarea").attr('name','name'+i);
$(this).find("#latitude").attr('name','latitude'+i);
$(this).find("#longitude").attr('name','longitude'+i);
});
}
$("#addclinic").click(function(e){
e.preventDefault();
$("#addresscontainer").append($("#address").clone());
numberClinic();
$("#addresscontainer").find("div#address:last").find("input[name=latitude]").val('');
$("#addresscontainer").find("div#address:last").find("input[name=longitude]").val('');
$("#clinicCount").val(parseInt($("#clinicCount").val())+1);
});
function removeClinic(address){
if($("#clinicCount").val()>1){
$(address).parent('div').parent('div').parent('div').remove();
$("#clinicCount").val(parseInt($("#clinicCount").val())-1);
}
numberClinic();
}
This way, I think I can store the data to the database but can't validate the data. I'm using the laravel framework.
One way you could do this is by using the position of the input in the parent as the index in the array, then saving the value in the array every time each input is changed. Then you can just add and remove inputs.
Sample code:
var offices = document.getElementById('offices');
var output = document.getElementById('output');
var data = [];
var i = 0;
document.getElementById('add').addEventListener('click', function() {
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'Office');
var button = document.createElement('button');
var index = i++;
input.addEventListener('keyup', function() {
for (var i = 0; i < offices.children.length; i++) {
var child = offices.children[i];
if (child === input) {
break;
}
}
// i is now the index in the array
data[i] = input.value;
renderText();
});
offices.appendChild(input);
});
document.getElementById('remove').addEventListener('click', function() {
var children = offices.children;
if (children.length === data.length) {
data = data.splice(0, data.length - 1);
}
offices.removeChild(children[children.length - 1]);
renderText();
});
function renderText() {
output.innerHTML = data.join(', ');
}
JSFiddle: https://jsfiddle.net/94sns39b/2/
I wrote the below jQuery code, in this code when I click on #addbtn 2 text-box with this code below is created
var i = 2;
/* button #add_btn */
$(document).on("click", "#add_btn", function(evt) {
$('.add_checkbox').append("<input type='checkbox' id=foodcheckbox_" + i + " style='margin-bottom:20px;'><br/>");
$(".add_food").append("<input class='wide-control form-control default input-sm foodha' type='text' placeholder='Food' id=food_input" + i + " style='margin-bottom:5px;'>");
$(".add_price").append("<input class='wide-control form-control default input-sm priceha' type='text' placeholder='Price' id='price_input" + i + "' style='margin-bottom:5px;'>");
i++;
});
This code works fine, but when I want to select text-boxes that are added with the above code to get the content of them the selector by id isn't working, below is the code that I use to get value of these text-boxes:
/* button Submit */
$(document).on("click", ".uib_w_60", function(evt) {
var foodid = [];
var priceid = [];
/* your code goes here */
/* first I get id of .foodha class */
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
/* second I get id of .priceha class */
$(".priceha").each(function() {
var pID = $(this).prop("id");
priceid.push(pID);
});
var newfoodpriceid = [];
/* here I dont know why the Id that gotten save
twice in array, for example save with this pattern
[food_input2, food_input3, food_input2, food_input3]
and to prevent this I use a trick and save it in another
array with the code below: */
for (var c = 0; c < priceid.length / 2; c++) {
newfoodpriceid.push({
'foodid': foodid[c],
'priceid': priceid[c]
});
}
/* then I want to get value of text box with exact
id that I select with jQuery selector but the
selector isn't working and the returned value
is nothing but I enter a value in text box that
have below id: */
var pr = $("#" + newfoodpriceid[0].priceid).val();
$("p").text(pr);
});
I explain anything that I think you need to know about what I want to do.
HTML code before I click on addbtn to add text-boxes:
<div class="grid grid-pad urow uib_row_42 row-height-42" data-uib="layout/row" data-ver="0">
<div class="col uib_col_46 col-0_1-12_1-7" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col center">
<div class="add_checkbox" style="margin-top:5px"></div>
<span class="uib_shim"></span>
</div>
</div>
<div class="col uib_col_48 col-0_6-12_6-7" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="add_food"></div>
<span class="uib_shim"></span>
</div>
</div>
<div class="col uib_col_47 col-0_5-12_5-5" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="add_price"></div>
<span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
And that HTML code after click on "add btn" twice
<div class="add_food">
<input class="wide-control form-control default input-sm foodha" type="text" placeholder="Food" id="food_input2" style="margin-bottom:5px;">
<input class="wide-control form-control default input-sm foodha" type="text" placeholder="Food" id="food_input3" style="margin-bottom:5px;">
</div>
<div class="add_price">
<input class="wide-control form-control default input-sm priceha" type="text" placeholder="Price" id="price_input2" style="margin-bottom:5px;">
<input class="wide-control form-control default input-sm priceha" type="text" placeholder="Price" id="price_input3" style="margin-bottom:5px;">
</div>
As you can see the text-box with the id that I want is generated fine, but I can't select it with using its id.
The only problem I see in your code is that once the page has run you must re-call the "each" function from jquery. When this "loop" is performed there are no "foodha" or "priceha" class cointaining elements. You could put the
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
in a sleep loop or in a js function which you would call later.Like this:
setTimeout(function(){
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
},1000); //for a second delay
or
function call_after_creating(){
$(".foodha").each(function() {
var IDss = $(this).prop("id");
foodid.push(IDss);
});
}
I have several line of div with same id, i would like to multiply two input value of each div and display result in third input after changing value of val1 input or val2 input
html
<div class="uk-width-medium-9-10" id="commandligne">
<div class="uk-grid uk-grid-small" data-uk-grid-margin>
<div class="uk-width-medium-2-10">
<label for="inv1">P.U. (€)</label>
<input type="text" name="prix-item[]" class="md-input val1" id="inv1"/>
</div>
<div class="uk-width-medium-2-10">
<label for="inv2">Qté (H)</label>
<input type="text" name="qte-item[]" class="md-input val2" id="inv2" />
</div>
<div class="uk-width-medium-2-10">
<label for="inv3">Total(€)</label>
<input type="text" name="total-item[]" class="md-input val3" value="0" id="inv3" readonly/>
</div>
</div>
</div>
My JS that doesnt work at all
$(document).ready(function () {
$("#commandligne input").keyup(multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("div#commandligne").each(function () {
// get the values from this div:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.val3',this).val($total);
});
}
});
Nothing happen when i change value of 2 input, then i have 0 error .
Here Jsfiddle
https://jsfiddle.net/a66bgddu/1/
Consider Usage of id Attributes
You are currently appending multiple elements with the same ID, which is not valid. id attributes by definition must be unique :
The id global attribute defines a unique identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).
If you need to target multiple elements, then consider using classes or data-* attributes to select them. Alternatively, you could track the number of "rows" and append the number after each ID and use the jQuery "starts-with" selector to target them:
Ensuring Dynamic Elements Are Targeted
Currently, your event handlers do not target any elements that may be added to the DOM in the future. You may want to consider using the .on() function handle wiring up your events, which will target those that currently exist in the DOM and those that may be added in the future :
// Example using a class "command-row" as opposed to Id attributes
$(document).on('keyup',"div.command-row input",multInputs);
Parse Your Values
Since you are performing arithmetical operations on your values, you'll want to ensure that you are actually parsing the contents of your <input> elements as opposed to simply retrieving string versions of their values. You can do this using the parseInt() function :
// Parse your values
var $val1 = parseInt($('.val1', this).val());
var $val2 = parseInt($('.val2', this).val());
// Get your total
var $total = $val1 * $val2
// Set your value
$('.val3',this).val($total);
Example: Putting It All Together
document.getElementById("test").onclick = function() {
var ok = true;
if (ok === true) {
var html = [
'<br/><br/>',
'<div class="uk-grid uk-margin-bottom" data-uk-grid-margin>',
'<div class="uk-width-medium-9-10 command-row">',
'<div class="uk-grid uk-grid-small" data-uk-grid-margin>',
'<div class="uk-width-medium-2-10">',
'<label for="inv1">P.U. (€)</label>',
'<input type="text" name="prix-item[]" class="md-input val1" />',
'</div>',
'<div class="uk-width-medium-2-10">',
'<label for="inv2">Qté (H)</label>',
'<input type="text" name="qte-item[]" class="md-input val2" />',
'</div>',
'<div class="uk-width-medium-2-10">',
'<label for="inv3">Total(€)</label>',
'<input type="text" name="total-item[]" class="md-input val3" value="0" readonly/>',
'</div>',
'</div>',
'</div>',
'</div>'
].join('');
var div = document.createElement('div');
div.innerHTML = html;
document.getElementById('testa').appendChild(div);
}
};
$(document).ready(function() {
$(document).on('keyup', "div.command-row input", multInputs);
function multInputs() {
var mult = 0;
// for each row:
$("div.command-row").each(function() {
// get the values from this div:
var $val1 = $('.val1', this).val();
var $val2 = $('.val2', this).val();
var $total = ($val1 * 1) * ($val2 * 1)
$('.val3', this).val($total);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testa">
<div class="uk-grid uk-margin-bottom" data-uk-grid-margin>
<div class="uk-width-medium-9-10 command-row">
<div class="uk-grid uk-grid-small" data-uk-grid-margin>
<div class="uk-width-medium-2-10">
<label for="inv1">P.U. (€)</label>
<input type="text" name="prix-item[]" class="md-input val1" />
</div>
<div class="uk-width-medium-2-10">
<label for="inv2">Qté (H)</label>
<input type="text" name="qte-item[]" class="md-input val2" />
</div>
<div class="uk-width-medium-2-10">
<label for="inv3">Total(€)</label>
<input type="text" name="total-item[]" class="md-input val3" value="0" readonly/>
</div>
</div>
</div>
</div>
</div>
<div id="test" class="uk-grid" data-uk-grid-margin>
<div class="uk-width-1-1">
<div id="form_invoice_services"></div>
<div class="uk-text-center uk-margin-medium-top uk-margin-bottom">
Ajouter une ligne
</div>
</div>
</div>
Yeah, the fundamental issue that you are facing is that id attributes MUST be unique on a page in HTML. Browsers are flexible about this and don't really complain about it if you have duplicates, but both JavaScript and jQuery are not.
In both cases (getElementById in JavaScript and $("#aDuplicatedId") in jQuery), the logic will only capture a single DOM node/jQuery object . . . specifically the first one that it encounters in the DOM that has the specified id.
To do what you are trying to do, consider using a common class that you can select on. This will capture all instances and allow you to iterate through using your existing code.
hello i am using a form to add experience to users where i have a add more button which adds more (clones) the content and users get one more field to add experience
i am using this code to achieve this
<div id="append_palllsjjs"><div class="full_exp_9092k" id='duplicater'>
<div class="full_one_row_009so">
<div class="obe_left_dibbhsy78">
<div class="header_009sos00dd_d">
Company Name <span>*</span>
</div>
<div class="maind_TAxefst67s77s">
<input type="text" name="comp[]" required placeholder="company Name" class='cname_990s_EXp'/>
</div>
</div><div class="obe_left_dibbhsy78">
<div class="header_009sos00dd_d">
Department Name <span>*</span>
</div>
<div class="maind_TAxefst67s77s">
<input type="text" name="dept[]" required placeholder="Department Name" class='cname_990s_EXp'/>
</div>
</div>
</div><div class="full_one_row_009so">
<div class="obe_left_dibbhsy78">
<div class="header_009sos00dd_d">
From Date <span>*</span>
</div>
<div class="maind_TAxefst67s77s">
<input type="date" data-initial-day="1" data-initial-year="2011" data-initial-month="9" class='TEx_About_allihh' name="exsdate[]" required/>
</div>
</div><div class="obe_left_dibbhsy78">
<div class="header_009sos00dd_d">
To Date <span>*</span>
</div>
<div class="maind_TAxefst67s77s">
<input type="date" data-initial-day="1" data-initial-year="2012" data-initial-month="10" class='TEx_About_allihh' name="exedate[]" required/>
</div>
</div>
</div><div class="full_one_row_009so">
<div class="obe_left_dibbhsy78">
<div class="header_009sos00dd_d">
Profile <span>*</span>
</div>
<div class="maind_TAxefst67s77s">
<input type="text" name="profile[]" required placeholder="Profile" class='cname_990s_EXp'/>
</div>
</div><div class="obe_left_dibbhsy78">
<div class="header_009sos00dd_d">
</div>
<input type="button" name="addmore" value="Add More" class='button small white' onclick='duplicate();'/>
</div>
</div>
</div></div>
js
var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
here i want the new fields when added should be empty (right now it is showing the same content with pre filled values in textbox )
second issue is i want to insert the data in table for each value of the array i know this can be donr by foreach loop
PHP
$comps=$_POST['comp'];
$profile=$_POST['profile'];
$exedate=$_POST['exedate'];
$exsdate=$_POST['exsdate'];
$dept=$_POST['dept'];
if(empty($comps) || empty($profile) || empty($exedate) || empty($exsdate) || empty($dept) ){
echo 'Please Fill all the fields marked with *';die;
}
foreach($comps as $value){
// insert into tablename (field1,field2,field3,...) values ('comp1','dep1','profile1'....)
// insert as many feilds as the no of elements in the array
}
please suggest me with this php code how to use the foreach loop so that i can insert as many rows as the no of elements in the array with corrosponging values in another array
pleaes note that this question has two questions written please feel free to help for any of the question.
one is wth php and anothr with ajax
Use following code to clear Cloned form :
NOTE : Must add jquery file in document
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var i = 0;
var original = document.getElementById('duplicater');
function duplicate(){
var clone = original.cloneNode(true); // "deep" clone
i = ++i;
clone.id = "duplicetor"+ i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
clearCloneForm(clone.id);
}
function clearCloneForm(id){
var divId = '#'+id;
$(divId).find("input[type^='text'], input[type^='date']").each(function() {
$(this).val('');
});
}
</script>
Here is code with your new requirement :
To Add remove button if user want to remove form block section user
can easily :
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var i = 0;
var original = document.getElementById('duplicater');
function duplicate(){
var clone = original.cloneNode(true); // "deep" clone
i = ++i;
clone.id = "duplicetor"+ i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
addButton(clone.id,i);
clearCloneForm(clone.id);
}
function clearCloneForm(id){
var divId = '#'+id;
$(divId).find("input[type^='text'], input[type^='date']").each(function() {
$(this).val('');
});
}
function addButton(id,ii){
var divId = '#'+id;
$(divId).append('<input type="button" value="Remove" class="button small white" id="'+ii+'" onclick="rBlock('+ii+')" />');
}
function rBlock(ii){
$('#'+ii).on('click', function(e){
var parentDiv = $(this).parent();
if(parentDiv.attr('id') !== ii){
parentDiv.remove();
}
});
$('#'+ii).trigger( "click" );
}
</script>