i am working on one registration form. in that there is a one main form and another are child forms.child form are not required.its an optional.it will opens on click add more
. Following image illustrate the process of adding child form
On click addData following form would be opens
in that i am using age field
. which is auto calculated on selecting date.and following is my code for main form to cal
$(document).on('change', '.dateholder1', function(e){
var dob = new Date($(this).val());
//var dob = e.date;
var today = new Date();
var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
$(".ageclass1").val(age);
});
its work fine in main form. but how can i display age on child form?
Please Check My Fiddle http://jsfiddle.net/5h1rpjqs/
The problem is here:
$(".ageclass1").val(age);
'cause we have many ".ageclass1" and browser doesn't understand which one to change and then change them all (^_^;). So we have to change that line with something like this:
$(this).next().val(age);
This is the new code
$(document).on('change', '.dateholder1', function(e){
var dob = new Date($(this).val());
//var dob = e.date;
var today = new Date();
var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
$(this).next().val(age);
});
$(".addDate").click(function(){
$("#appenddiv").append($("#appendContent").html() + "<div class='clearfix'></div>");
});
And this is new jsfiddle: http://jsfiddle.net/5h1rpjqs/5/
$(document).on('change', '.dateholder1', function(e){
var dob = new Date($(this).val());
//var dob = e.date;
var today = new Date();
var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
$(this).next().val(age);
});
$(".addDate").click(function(){
$("#appenddiv").append($("#appendContent").html() + "<div class='clearfix'></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>This is working demo</h3><br>
<input type="text" name="date" class="dateholder1" placeholder="yyyy/mm/dd">
<input type="text" name="age" class="ageclass1" placeholder="age">
<span class='addDate'>Add</span>
<br><br>
<div id="appenddiv">
</div>
<div style="display:none" id='appendContent'>
<input type="text" name="date" class="dateholder1" placeholder="yyyy/mm/dd">
<input type="text" name="age" class="ageclass1" placeholder="age"><br>
<span>How Can i Calculate age here On Change dateHolder</span>
</div>
</div>