Develop Reference

After selecting the date of birth in the drop-down box, my age cannot be displayed in real time. Why?

Here’s my front-end page:
Here is part of my code:
<div class="col-xs-4">
<div class="form-group">
<label class="col-sm-6 control-label" style="text-align: left"><#spring.message "bornDate"/>:</label>
<label class="col-sm-6 control-label" name="input-text" id="bornDate" style ="text-align: left"><input id="bornDateTmp" style="width:90px;" data-bind="value: model.bornDate"/></label>
<script>
$("#bornDateTmp").kendoDatePicker({
format: "{0:yyyy/MM/dd}"
}).data("kendoDatePicker");
</script>
</div>
</div>
...
...
<div class="col-xs-4">
<div class="form-group">
<label class="col-sm-6 control-label" style="text-align: left">
<#spring.message "age"/>:
</label>
<label class="col-sm-6 control-label" name="" id="age" style ="text-align: left">
<span id="ageTmp" data-bind="text:model.age">
<script>//here，here，here！！！
$("#ageTmp").text(basicInformation.model.age.getFullYear-new Date().getFullYear());
</script>
</span>
</label>
</div>
</div>
In addition, I would like to make a special note that the internal framework of the company is used for data binding:
<script type="text/javascript">
var basicInformation = kendo.observable({
model: {
},
});
$.ajaxSetup({async: false});
Hap.loadViewModel({
url: '${base.contextPath}/xxentry/people/info/collection/basicInfo',
model: basicInformation.model
});
$.ajaxSetup({async: true});
</script>
The problem is, when I choose my date of birth, the age doesn’t show up in real time, but on the chrome console, it works!I've been thinking about it all day.

Try to bind the change event on the date picker. On change calculate your age and bind it to the observable variable, bind that variable to your age element.
Something like this:
<input id="bornDateTmp" style="width:90px;" data-bind="value: model.bornDate, events: {change: onDateChange}"/>
var basicInformation = kendo.observable({
model: {
},
onDateChange: function(e) {
var selectedDate = this.model.bornDate;
var age = //calculate age;
this.model.set('age', age);
}
});
<span id="ageTmp" data-bind="text:model.age">
Working example: On change show value

Replicating and differentiating portions of a form

UPDATE:
Using the code that colecmc provide(Thank you!!) I updated the codepen. I like how the date.now is added, but I would like to just do a an incremental increase. Im not sure how to apply that to this function I tried zer00ne's index incremental but am doing something wrong.
let cloneList = [],
index = 0; // index must be declared apart from function or else you will set it to the initial value every time the function is called.
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
index++;
clonedNode.id = index+1;
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
Im having an issue with my form. Initially I had two forms on the page. However on submit only the info from the first form was written. I tried combining the forms. Now if i fill out the campaign and component inputs and submit it writes to the correct tables(good!). However the component section is supposed to be replicated. A campaign can have as many components as the user wants. I am using cloneNode and before I combined the table it added more component sections. Now that they are combined the function no longer works. Im confused if this is even the right approach for what Im doing. I included a copdpen that shows a stripped down version of what Im trying to do.
Basically I want to be able to press add component, add as many new components as I'd like fill them out and have then all written as records to the db. I need a way to differentiate all the clones (new ids or names?)
codepen: https://codepen.io/anon_guy/pen/VMZWWW?editors=1010
HTML:
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
<div class="col-sm-4">
<label>name</label>
<input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
</div>
<div class="col-sm-4">
<label>address</label>
<input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
</div>
<div class="col-sm-4">
<label>phone</label>
<input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
<div class="text-danger"></div>
</div>
</div>
<div class="row">
<div class="add_component">
<button id='launch'>Add Component</button>
</div>
</div>
</div>
<div class="wrapper" id="add-components">
<div class="panel panel-default " id="addon">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="col-sm-6">
<label>component</label>
<input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
</div>
</form>
</div>
</div>
</div>
JS:
document.getElementById('launch').onclick = function() {
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
container.appendChild(clonedNode );
}

You will want to try something like this before appending to the container clonedNode.id = Date.now();
That will provide a way to differentiate all the clones by giving a unique id. You can take it a step further like this:
let cloneList = [];
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var component = clonedNode.querySelector('input');
clonedNode.id = Date.now();
cloneList.push(clonedNode.id);
component.id = `componentID_${clonedNode.id}`;
component.name = `componentName_${clonedNode.id}`;
container.appendChild(clonedNode);
}
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-body">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-event" class="form-horizontal">
<div class="col-sm-4">
<label>name</label>
<input type="text" name="name" value="name" placeholder="name" id="name" class="form-control" />
</div>
<div class="col-sm-4">
<label>address</label>
<input type="text" name="address" value="address" placeholder="address" id="address" class="form-control" />
</div>
<div class="col-sm-4">
<label>phone</label>
<input type="text" name="phone" value="phone" placeholder="phone" id="phone" class="form-control" />
<div class="text-danger"></div>
</div>
</div>
<div class="row">
<div class="add_component">
<button id='launch'>Add Component</button>
</div>
</div>
</div>
<div class="wrapper" id="add-components">
<div class="panel panel-default " id="addon">
<div class="panel-heading">
</div>
<div class="panel-body">
<div class="col-sm-6">
<label>component</label>
<input type="text" name="component" value="component" placeholder="component" id="component" class="form-control" />
</div>
</form>
</div>
</div>
</div>

This is the closest I came to what I believe is your way of thinking by looking at your code. (I also removed some unnecessary steps in your code to make it a little bit cleaner). This is for if you must have different names and ID:s on your inputs. However, if you can manage to have the same for both (i.e. component_0, other_0 etc.), you can remove the "names" array and the "names" forEach.
When you want to add an input to your addon-div, just add the ID (and name if you decide to keep it), without the "_0", to the array/s as in the example.
Change the name to "otherName_0" and ID to "otherID_0" in your html and this should work.
var i = 1;
document.getElementById('launch').onclick = function(event) {
event.preventDefault();
var addOnDiv = document.getElementById('addon');
var container = document.getElementById('add-components')
var clonedNode = addOnDiv.cloneNode(true);
var ids = ['componentID', 'otherID'];
var names = ['componentName', 'otherName'];
ids.forEach(function(id) {
var currentInput = clonedNode.querySelector(`#${id}_0`);
currentInput.id = `${id}_${i}`;
});
names.forEach(function(name) {
var currentInput = clonedNode.querySelector(`input[name=${name}_0]`);
currentInput.name = `${name}_${i}`;
});
container.appendChild(clonedNode);
i++;
}

Dropdowns not bound to ng-model in Angular

Something very basic I am missing but I am not able to figure out . I have three fields in a view , two of them are dropdowns.
<div class="form-group row">
<label for="GroupName" class="col-sm-4 form-control-label">Group Name : </label>
<div class="col-sm-8">
<input ng-model="referenceEdit.groupName" id="GroupName" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label for="GroupType" class="col-sm-4 form-control-label">Group Type : </label>
<div class="col-sm-8">
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceEdit.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceEdit.groupTypes track by groupType.id" ng-model="referenceEdit.groupType"></select>
</div>
</div>
<div class="form-group row">
<label for="GroupAssignmentMethod" class="col-sm-4 form-control-label">Group Assignment Method : </label>
<div class="col-sm-8">
<select name="selGroupAssignmentMethod" id="selGroupAssignmentMethod" class="form-control" ng-options="assignmentMethod.id for assignmentMethod in referenceEdit.assignmentMethods track by assignmentMethod.value" ng-model="referenceEdit.assignmentMethod"></select>
</div>
</div>
Now in controller , I am getting the results for these drop downs in this way :
var row_details = GroupMembershipReferenceServices.getReferenceDataRow();
referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.GROUP_TYPE).success(function (result) {
$scope.referenceEdit.groupTypes = result;
$scope.referenceEdit.groupype = row_details.grp_typ;
}).error(function (result) {
alert("Unable to retrieve dropdown values");
});
referenceDataDropDownService.getDropDown(REFERENCE_DATA_CONSTANTS.GROUP_ASSIGNMENT_METHOD).success(function (result) {
$scope.referenceEdit.assignmentMethods = result;
$scope.referenceEdit.assignmentMethod = row_details.grp_assgnmnt_mthd;
}).error(function (result) {
alert("Unable to retrieve dropdown values");
});
Problem is values are getting populated , like
and we are displaying the values accordingly. The results are like
[0] {id:"1",value:"Chapter Non-Event"}
[1] {id:"2",value:"NHQ Campaign"}
But the row_details.grp_typ is "NHQ Campaign".
Even though I assign it , the drop down option is not selected accordingly .
Have I to assign it to the value property only ? What am I missing ?

use ng-repeat instead of ng-options
eg:
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceEdit.populateGroupTypeDetails(selGroupType)" ng-model="referenceEdit.groupType">
<option value="-1">---</option>
<option ng-repeat="groupType.value for groupType in referenceEdit.groupTypes track by groupType.id" value="{[{groupType.id}]}"> {[{groupType.value}]} </option></select>

Dynamically adding form fields until a certain value is entered in the form field

I need a group of form fields to dynamically be added if a user does not enter the minimum required value.
So I need 3 years living history for a residential address. When a user enters the information on how long they have live in the house, if they have not lived in it for minimum 3 years. The same field group will be duplicated and entered below, allowing the person to enter their previous address. This will continue until minimum 3 years of history has been entered.
The html looks like this
<!-- Current address-->
<div class="form-group">
<div class="row">
<label class="col-md-4 control-label">Current Home Address</label>
<div class="col-sm-2">We need 3 years living history. Keep adding previous home addresses until you reach a minimum of 3 years history.</div>
<div class="col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default addButton1"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<!-- The hidden Current address template containing the Current address fields and a Remove button, this gets added when a user clicks "add" on the form group above -->
<div class="form-group hide" id="homeTemplate">
<div class="row">
<label class="col-md-4 control-label">Previous Address</label>
<div class=" col-SM-offset-2 col-sm-2"><input id="about_you_address-st[]" name="about_you_address-st[]" type="text" class="form-control input-md" placeholder="Street # and Name"></div>
<div class="col-sm-1"><input id="about_you_address-sub[]" name="about_you_address-sub[]" type="text" class="form-control input-md" placeholder="Suburb"></div>
<div class="col-sm-1"><input id="about_you_address-city[]" name="about_you_address-city[]" type="text" class="form-control input-md" placeholder="City"></div>
</div>
<br>
<div class="row">
<label class="col-md-4 control-label"></label>
<div class=" col-SM-offset-3 col-sm-1"><input id="about_you_address-state[]" name="about_you_address-state[]" type="text" class="form-control input-md" placeholder="State"></div>
<div class="col-sm-1"><input id="about_you_address-post[]" name="about_you_address-post[]" type="text" class="form-control input-md" placeholder="Postcode"></div>
<div class="col-sm-1">
<input type="text" class="form-control" id="about_you_address-duration[]" name="about_you_address-duration[]" placeholder="DD/MM/YYYY"
data-fv-date="true"
data-fv-date-format="DD/MM/YYYY"
data-fv-date-message="The value is not a valid date" /><div class="help">Date moved in</div>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-default removeButton1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
The javascript which currently handles dynamically adding and removing the form group manually looks like this
$(document).ready(function() {
// The maximum number of options
var MAX_OPTIONS = 20;
$('#custom')
.formValidation()
// Add button click handler
.on('click', '.addButton1', function() {
var $template = $('#homeTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.insertBefore($template),
$about_st = $clone.find('[name="about_you_address-st[]"]')
$about_sub = $clone.find('[name="about_you_address-sub[]"]')
$about_city = $clone.find('[name="about_you_address-city[]"]')
$about_state = $clone.find('[name="about_you_address-state[]"]')
$about_post = $clone.find('[name="about_you_address-post[]"]')
$about_dur = $clone.find('[name="about_you_address-duration[]"]');
// Add new field
$('#custom')
.formValidation('addField', $about_st)
.formValidation('addField', $about_sub)
.formValidation('addField', $about_city)
.formValidation('addField', $about_state)
.formValidation('addField', $about_post)
.formValidation('addField', $about_dur);
})
// Remove button click handler
.on('click', '.removeButton1', function() {
var $row = $(this).parents('.form-group'),
$about_st = $row.find('[name="about_you_address-st[]"]')
$about_sub = $row.find('[name="about_you_address-sub[]"]')
$about_city = $row.find('[name="about_you_address-city[]"]')
$about_state = $row.find('[name="about_you_address-state[]"]')
$about_post = $row.find('[name="about_you_address-post[]"]')
$about_dur = $row.find('[name="about_you_address-duration[]"]');
// Remove element containing the option
$row.remove();
// Remove field
$('#custom')
.formValidation('removeField', $about_st)
.formValidation('removeField', $about_sub)
.formValidation('removeField', $about_city)
.formValidation('removeField', $about_state)
.formValidation('removeField', $about_post)
.formValidation('removeField', $about_dur);
})
// Called after adding new field
.on('added.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.options --> The new field options
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length >= MAX_OPTIONS) {
$('#custom').find('.addButton1').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.fv', function(e, data) {
if (data.field === 'about_you_address-st[]') {
if ($('#custom').find(':visible[name="about_you_address-st[]"]').length < MAX_OPTIONS) {
$('#custom').find('.addButton1').removeAttr('disabled');
}
}
});
});
Thank you so much.

For starters you have id's with [] in them eg 'about_you_address-duration[]'. You can't do that. It's not unique
Add some javascript
function checkTimeTotal()
{
// Calculate total times
totalDays = 0;
lastDate = new Date.now();
$('[name="about_you_address-duration[]"]').each(function() {
// get days between now and last date
thisDate = $(this).val(); // Turn this into a date
totalDays += (difference between 2 dates);
lastDate = thisDate;
});
if (totalDays < (3 * 365)) {
// Add more options using your other code
}
}
// Need to call this again when you add the new form elements in the above code
$('[name="about_you_address-duration[]"]').off('change').on('change', checkTimeTotal());
Get difference between 2 dates in javascript? - this will get the days between 2 dates

onchange can't find function

I'm trying to make an input change value depending on another inputs value.
What I've come up with so far is this. But when running the onchange commmand I get an error that updateCity doesn't exist. Even thou it's there. Am I doing something wrong, is pretty new to coding with javascript.
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="zip">Indtast postnummer</label>
<input class="form-control" type="text" name="register_zip" id="zip" placeholder="Indtast postnummer" value="#city.zip" onchange="updateCity(this.value)" />
</div> <!-- class="form-group" -->
<div class="form-group">
<label class="sr-only" for="city">Indtast by</label>
<input class="form-control" type="text" name="register_city" id="city" placeholder="Indtast by" value="#city.name" />
</div> <!-- class="form-group" -->
</div>
<script>
function updateCity(city_zip) {
var city = findCity(city_zip);
if(city != null){
document.getElementById("register_city").value = city_name;
}
};
function findCity(zip){
var cities = [];
#{
foreach (var c in cities)
{
<text>
cities.push({zip: #c.zip, name: #c.name});
</text>
}
}
for(var i=0;i<cities.length;i++){
if(cities[i].zip == zip){
return cities[i]
}
}
};
</script>