We Keep Coding

how to render a javascript template in plain js

I would like to add one Item if the button is clicked.
I have the following template:
const Item = ({
i
}) => `
<div class="additional-guest mb-3">
<hr>
<div class="row">
<div class="col-12 col-md">
<div class="form-group">
<label for="name_${i}" class="control-label">Name</label>
<input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]">
</div>
</div>
<div class="col-12 col-md">
<div class="form-group">
<label for="telephone_${i}" class="control-label">Telefonnummer</label>
<input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]">
</div>
</div>
</div>
</div>
`;
var e = document.getElementsByClassName('additional-guests');
document.getElementById('new-guest-button').addEventListener('click', function(ev) {
console.log("klick");
var r = document.getElementsByClassName('additional-guest').length;
//e[0].innerHTML = [{ i: e.length}].map(Item).join(''); //works only once
e[0].append([{
i: r
}].map(Item));
}, false);
<div class="additional-guests ml-3">
</div>
<div class="form-group">
<button type="button" id="new-guest-button" class="btn btn-secondary btn-block">
Weiterer Gast
</button>
</div>
The <e[0].innerHTML>-Part works. But only once. I can add only one new Item because the further is overwritten. The append-Part is also not working. It writes the Item as text so it is not rendered. How can I add the template multiple times?

Use insertAdjacentHTML:
e[0].insertAdjacentHTML('beforeend', Item({i: r}));
const Item = ({
i
}) => `
<div class="additional-guest mb-3">
<hr>
<div class="row">
<div class="col-12 col-md">
<div class="form-group">
<label for="name_${i}" class="control-label">Name</label>
<input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]">
</div>
</div>
<div class="col-12 col-md">
<div class="form-group">
<label for="telephone_${i}" class="control-label">Telefonnummer</label>
<input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]">
</div>
</div>
</div>
</div>
`;
var e = document.getElementsByClassName('additional-guests');
document.getElementById('new-guest-button').addEventListener('click', function(ev) {
console.log("klick");
var r = document.getElementsByClassName('additional-guest').length;
console.log(r);
e[0].insertAdjacentHTML('beforeend', Item({
i: r
})); // geht aber nur einmal
}, false);
<div class="additional-guests ml-3">
</div>
<div class="form-group">
<button type="button" id="new-guest-button" class="btn btn-secondary btn-block">
Weiterer Gast
</button>
</div>

On every click I create new div, append the Item and then append the div into e[0].
const Item = i => `
<div class="additional-guest mb-3">
<hr>
<div class="row">
<div class="col-12 col-md">
<div class="form-group">
<label for="name_${i}" class="control-label">Name</label>
<input id="name_${i}" type="text" placeholder="Name" class="form-control" name="additional_guest[${i}][name]">
</div>
</div>
<div class="col-12 col-md">
<div class="form-group">
<label for="telephone_${i}" class="control-label">Telefonnummer</label>
<input id="telephone_${i}" type="text" placeholder="Telefonnummer" class="form-control" name="additional_guest[${i}][telephone]">
</div>
</div>
</div>
</div>
`;
var e = document.getElementsByClassName('additional-guests');
var fieldsFlag = 0;
document.getElementById('new-guest-button').addEventListener('click', function(ev) {
var div = document.createElement('div');
var r = document.getElementsByClassName('additional-guest').length;
div.innerHTML = Item(fieldsFlag)
fieldsFlag++;
e[0].append(div);
}, false);
<div class="additional-guests ml-3">
</div>
<div class="form-group">
<button type="button" id="new-guest-button" class="btn btn-secondary btn-block">
Weiterer Gast
</button>
</div>

jQuery only run function for element that gets clicked

I got a small problem that i have no clue how to solve. This HTML/PHP code bellow gets different values from a database and outputs them into the different input fields.
The HTML/PHP bellow is one element, and multiple of them are made with different values from the database. Then i got a small javascript that calulates some different values from the values that are inputted. The problem is that i got lets say 5 elements, and only wants to calculate for one of them, but if i press the "btn-oppdater" button it calculates for all the different elements.
How do i make it only calculate for the element where the button is?
Script
$('.btn-oppdater').click(function(){
$(".kval_spill").each(function(){
var fieldShow = $(this).next('.kval_spill_inner');
var b_value_kval_1 = fieldShow.find('.b_value_kval_1')[0].value;
var b_odds_kval_1 = fieldShow.find('.b_odds_kval_1')[0].value;
var e_odds_kval_1 = fieldShow.find('.e_odds_kval_1')[0].value;
var gebyr_kval = '0.02'
var q_value = ((b_odds_kval_1 / (e_odds_kval_1 - gebyr_kval)) * b_value_kval_1);
var q_tap = (b_odds_kval_1 - 1) * b_value_kval_1 - (e_odds_kval_1 - 1) * q_value;
var q_value_fixed = q_value.toFixed(2);
var q_tap_fixed = q_tap.toFixed(2);
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
});
});
HTML/PHP
<?php while ($row = mysqli_fetch_assoc($result2)) { echo '
<form style="margin-top: 10px;" action="" method="post" class="">
<input type="hidden" class="kval_spill">
<div class="kval_spill_inner">
<input class="" type="hidden" name="id" value="'.$row['id'].'">
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_kamp_1" name="kval_kamp_1" value ="'.$row['kval_kamp_1'].'" placeholder="Kamp">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control b_value_kval_1" name="b_value_kval_1" value ="'.$row['b_value_kval_1'].'" placeholder="Spill verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control b_odds_kval_1" name="b_odds_kval_1" value ="'.$row['b_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_marked_1" name="kval_marked_1" value ="'.$row['kval_marked_1'].'" placeholder="Type marked">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control text-info q_value_1" name="q_value_1" value ="'.$row['q_value_1'].'" placeholder="Lay verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control e_odds_kval_1" name="e_odds_kval_1" value ="'.$row['e_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">Tap</span>
</div>
<input type="text" class="form-control text-danger q_tap_1" name="q_tap_1" value ="'.$row['q_tap_1'].'" placeholder
="0.00" readonly>
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-outline-secondary btn-oppdater">Regn ut</button>
</div>
</div>
</div>
</form>
<br>
'; }?>

Replace $(".kval_spill") with $(this).closest("form").find(".kval_spill").
But it looks like there's only one kval_spill and kvall_spill_inner in each form, so there's no need to use .each(). You can get rid of the .each() loop and just use:
var fieldShow = $(this).closest("form").find('.kval_spill_inner');
And instead of
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
you can write:
fieldShow.find('.q_value_1').val(q_value_fixed);
fieldShow.find('.q_tap_1').val(q_tap_fixed);

how to get a textbox value from dynamically created div

I am creating dynamic div with html elements and i need to get value that textbox
This is my dynamic created content now i need to get the
<div id="TextBoxContainer">
<div id="newtextbox1"> // this id is dynamic id
<div class="row cells2">
<div class="cell">
<label>Patient Name</label>
<div class="input-control text full-size">
<input type="text" id="PatientName1" placeholder="Patient Name"/> // this id is dynamic id
</div>
</div>
<div class="cell">
<label>Patient ICNo</label>
<div class="input-control text full-size" >
<input type="text" id="PatientICNo" placeholder="Patient ICNo"/>
</div>
</div>
</div>
</div>
</div>
here i am trying to get value in jquery
if ($("#TextBoxContainer") != null && $("#TextBoxContainer").length > 0) {
var count = 1;
$("#TextBoxContainer").each(function () {
debugger;
var Pid = "input#PatientName" + count;
var childdiv = "div#newtextbox" + count;
count++;
var patientname = $(this).closest(childdiv).children(Pid).val();
});
}

Here you go with a solution https://jsfiddle.net/p9ywL4pm/1/
if ($("#TextBoxContainer") != null && $("#TextBoxContainer").length > 0) {
var count = 1;
$("#TextBoxContainer").children().each(function () {
var Pid = "input#PatientName" + count;
var patientname = $(this).find(Pid).val();
console.log(Pid, patientname);
count++;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="TextBoxContainer">
<div id="newtextbox1">
<div class="row cells2">
<div class="cell">
<label>Patient Name</label>
<div class="input-control text full-size">
<input type="text" id="PatientName1" placeholder="Patient Name" />
</div>
</div>
<div class="cell">
<label>Patient ICNo</label>
<div class="input-control text full-size" >
<input type="text" id="PatientICNo" placeholder="Patient ICNo"/>
</div>
</div>
</div>
</div>
<div id="newtextbox2">
<div class="row cells2">
<div class="cell">
<label>Patient Name</label>
<div class="input-control text full-size">
<input type="text" id="PatientName2" placeholder="Patient Name"/>
</div>
</div>
<div class="cell">
<label>Patient ICNo</label>
<div class="input-control text full-size" >
<input type="text" id="PatientICNo" placeholder="Patient ICNo"/>
</div>
</div>
</div>
</div>
</div>
I considered two child elements inside #TextBoxContainer container.
Change the #PatientICNo input to
<input type="text" class="PatientICNo" placeholder="Patient ICNo"/>
Use class instead of ID because ID need to unique.
Hope this will help you.

var arrOfValue =[];
$('.input-control text full-size [type="text"]').each(function() { arrOfValue .push($(this).val())})
The arrOfValue will have all the text, use index to get the value.

Sum of all textboxes using jquery

Im adding all textboxes values on blur call. I give some number in one textbox. When it tries to add value of the other textbox value, it throws NaN.
Here is my code
function sumOfIncome() {
var sum = 0;
$('.add').each(function() {
sum += parseInt(this.value);
console.log(sum)
});
$('#netPay').val(sum);
}
$('.add').blur(function() {
sumOfIncome();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
<div class="col-md-3">
<label for="DA" class="col-form-label">DA</label>
</div>
<div class="col-sm-2">
<input type="number" class="form-control add" id="da" placeholder="DA">
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<label for="HRA" class="col-form-label">HRA</label>
</div>
<div class="col-sm-2">
<input type="number" class="form-control add" id="hra" placeholder="HRA">
</div>
</div>
Where am I doing wrong?

The easiest solution is to change your sum line to sum += parseInt(this.value) || 0;. This way, if the field is empty and returns a falsey value like NaN, it will instead use 0.
function sumOfIncome() {
var sum = 0;
$('.add').each(function() {
sum += parseInt(this.value) || 0;
console.log(sum)
});
$('#netPay').val(sum);
}
$('.add').blur(function() {
sumOfIncome();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group row">
<div class="col-md-3">
<label for="DA" class="col-form-label">DA</label>
</div>
<div class="col-sm-2">
<input type="number" class="form-control add" id="da" placeholder="DA">
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<label for="HRA" class="col-form-label">HRA</label>
</div>
<div class="col-sm-2">
<input type="number" class="form-control add" id="hra" placeholder="HRA">
</div>
</div>

Use this $.isNumeric() jsfiddle:
Html:
<div class="form-group row">
<div class="col-md-3"><label for="DA" class="col-form-label">DA</label></div>
<div class="col-sm-2"> <input type="number" class="form-control add" id="da" placeholder="DA">
</div>
</div>
<div class="form-group row">
<div class="col-md-3"><label for="HRA" class="col-form-label">HRA</label></div>
<div class="col-sm-2"> <input type="number" class="form-control add" id="hra" placeholder="HRA">
</div>
</div>
<div id="netPay">
</div>
Jquery:
function sumOfIncome() {
var sum = 0;
$('.add').each(function(){
var val = $(this).val();
if($.isNumeric(val))
{
sum += parseInt(val);
console.log(sum)
}
});
$('#netPay').text(sum);
}
$('.add').blur(function(){
sumOfIncome();
});

Dynamic ng-model with ng-repeat

I would like to create dynamically some input fields, that I used ng-repeat with ng-model. I meet some problems. ng-model without ng-repeat works correctly (transitPointStart). transits should work exactly the same, but they don't. What am I missing?
(link to plunker on the bottom)
transitPointStart:
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start">Start Point</label>
<input type="text" class="form-control" name="field_start" id="field_start"
ng-model="transitPointStart.city" placeholder="e.g. London"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start_date">Date</label>
<div class="input-group">
<input id="field_start_date" type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM"
name="field_start_date"
datetime-picker="{{dateformat}}" ng-model="transitPointStart.date"
is-open="datePickerOpenStatus.field_start_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalendar('field_start_date')"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
transits:
<div class="row" ng-repeat="transit in transits">
<!--TEST-->
<!--<div> Model: {{transit.modelName}} </div>-->
<!--<div> dateModel: {{transit.dateModelName}} </div>-->
<!--<div> datePicker: {{transit.datePickerName}} </div>-->
<!--<div> fieldName: {{transit.fieldName}} </div>-->
<!--<div> fieldDateName: {{transit.fieldDateName}} </div>-->
<!--<div> button: {{transit.buttonDateName}} </div>-->
<!--/TEST-->
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldName">Transit {{$index+1}}</label>
<input type="text" class="form-control" name="transit.fieldName" id="transit.fieldName"
ng-model="transit.modelName" placeholder="transit"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldDateName">Date {{$index+1}}</label>
<div class="input-group">
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g"
name="transit.fieldDateName"
datetime-picker="{{dateformat}}" ng-model="transit.dateModelName"
is-open="transit.datePickerName"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="transit.buttonDateName"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-2">
<span class="btn btn-primary" ng-click="addTransit()" ng-if="transits.length < 3">Add transit</span>
</div>
<div class="col-lg-2"></div>
</div>
controller:
$scope.transits = [];
$scope.addTransit = function () {
var tempId = $scope.transits.length + 1;
var tempName = "transitPoint_" + tempId;
var tempModelName = tempName + ".city"; // Here I would like to have access to transitPoint.city
var tempDateName = tempName + ".date"; // as above (transitPoint.date)
var tempDate = "datePickerOpenStatus.field_transit_date_" + tempId;
var tempFieldName = "field_transit_" + tempId;
var tempFieldDateName = "field_transit_date_" + tempId;
var tempButton = "openCalendar('" + tempFieldDateName + "')";
$scope.transits.push({
modelName: tempModelName,
dateModelName: tempDateName,
datePickerName: tempDate,
fieldName: tempFieldName,
fieldDateName: tempFieldDateName,
buttonDateName: tempButton
});
}
/*
{...} - rest of code, sending queries (vm.save() ect.)
*/
$scope.datePickerOpenStatus = {};
$scope.datePickerOpenStatus.field_start_date = false;
$scope.datePickerOpenStatus.field_end_date = false;
// I should've used loop here
$scope.datePickerOpenStatus.field_transit_date_1 = false;
$scope.datePickerOpenStatus.field_transit_date_2 = false;
$scope.datePickerOpenStatus.field_transit_date_3 = false;
$scope.openCalendar = function (date) {
$scope.datePickerOpenStatus[date] = true;
};
Demo: Plunker

Some of the bindings in your HTML are not correct. You need to use interpolation (the {{ }} format) whenever you need to emit data from the model into the HTML.
For example, when assigning IDs, you have:
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ...
This should be:
<input id="{{transit.fieldDateName}}" type="text" class="form-control" placeholder="e.g" name="{{transit.fieldDateName}}" ...
Second, your ng-click syntax is not correct. You should not create the openCalendar expression in JavaScript, but in your HTML, like so:
<button type="button" class="btn btn-default" ng-click="openCalendar(transit.fieldDateName)">
I think your Plnkr is missing some scripts and/or steps to make the calendar work, but these changes will at least cause your openCalendar function to get called.