We Keep Coding

Setting an input value on page load in Angular

I want to set the value of my input value to 1 when the the page is loaded. But the box is empty when I execute the code.
<tr *ngFor="let item of cartItems; let i=index">
<td class="cart_product"><img class="img-fluid" [src]="item.image" alt=""></td>
<td class="cart_description">
<h3 class="product-name">{{item.title}} </h3>
<h6><strong><span class="mdi mdi-approval"></span> Available in</strong> - 500 gm</h6>
</td>
<td class="availability in-stock"><span class="badge badge-success">Checkers</span></td>
<td class="price"><span>${{item.price}}</span></td>
<td class="qty">
<div class="input-group">
<span class="input-group-btn"><button [disabled]="cartItems[i].quantity == 0" class="btn btn-theme-round btn-number" type="button" (click)="reduceQuantity(i)">-</button></span>
<input type="text" max="10" min="1" value="1" class="form-control border-form-control form-control-sm input-number" name="quantity" [(ngModel)]="cartItems[i].quantity">
<span class="input-group-btn"><button class="btn btn-theme-round btn-number" type="button" (click)="addQuantity(i)">+</button>
</span>
</div>
</td>
<td class="price"><span>{{getQuantity(i)}}</span></td>
<td class="action">
<a class="btn btn-sm btn-danger" data-original-title="Remove" href="#" title="" data-placement="top" data-toggle="tooltip"><i class="mdi mdi-close-circle-outline"></i></a>
</td>
</tr>

Even though you've set the value property of the input to 1, you are seeing an empty box because cartItems[i].quantity is undefined. Therefore the ngModel quickly changes that box to empty.

You used bi-directional binding on your input:
[(ngModel)]="cartItems[i].quantity"
Ideally it should set default value as 0 in your backend else you can set it's value to 0 in your component.ts file like setting values in cartItem:
cartItems.map(function(cartItem) {
if(!cartItem.quantity) {
cartItem.quantity = 0;
}
});

serializeArray is not picking up dynamically created form

I have reviewed many Stack overflow threads on this topic most especially this one
jQuery serializeArray not picking up dynamically created form elements, but none was able to solve the problem
I am searching through firebase database for a match. if there is a match form A is presented but if there is no match, form B is presented.
return CatalogueDB.ref('/FSC/Misc/' + splitinput[index]).once('value').then(function(snapshot) {
console.log(snapshot.val())
var key = snapshot.val().NSN
var Name = snapshot.val().Nomenclature
var resultcard = `
<form id="myform">
<tr class="tr-shadow">
<td style="width: 90px;">
<div>${key}
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#mediumModal">
Add Photos
</button>
</div>
</td><td>
<span class="block ">
${Name}
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;" />
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</span>
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(this);">Submit</button>
</td>
</tr>
</form>
<tr class="spacer"></tr>
`
container.innerHTML += resultcard;
})
.catch(function(error) {
container.innerHTML += "";
var errorcard = `
<form id="myform">
<tr class="tr-shadow">
<td style="width: 90px;">
<div>${splitinput[index]}
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</span>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(this)">Submit</button>
</td>
</tr>
</form>
`
container.innerHTML += errorcard;
})
});
I want to get the input value from the form when submit button is clicked, hence this function
function postitem() {
var data = $('#myform').serializeArray();
console.log(data)
}
the problem is that it only shows empty array [] in console log.
The input values are not retrieved and displayed. How do I capture the input value onclick of the submit button

I'm wondering if one of these things might be causing the problem? I could be wrong but might be worth checking:
1.
Isn't the correct syntax this?
document.getElementById('container').innerHTML += resultcard;
.....instead of this?
container.innerHTML += resultcard;
2.
When including html in a JavaScript file, should the quotes around your html be implemented like this? (Also note the use of the 'standard quote' marks as opposed to using `back quote` marks.)
var resultcard =
'<form id="myform">' +
'<tr class="tr-shadow">' +
'<td style="width: 90px;">' +
.
.
.

How to get list of the dynamic dropdown/selectbox field in javascript and laravel?

I am using laravel 5.2 and I have an update form modal/popup which has a dynamic dropdown field that can add more or remove it. My problem is the dropdown list in only worked in the first row, after I added more dropdown, it does not show the list in it, because I do not know how to put foreach in the javascript.
This below is a code in the blade view. The second one is the code in the javascript to add more row / dropdown. Do you know how?
<table class="table table-bordered" id="dynamic_field">
<tbody id="tbodpengikut">
<tr>
<td>
<select class="selectpicker form-control" id="id_add_pengikut" name="id_add_pengikut[]" data-live-search="true" style="width:100%">
<option value=""> --Silahkan Pilih-- </option>
#foreach($getPengikut as $getPngkt)
<option value="{{ $getPngkt->KODE }}"> {{ $getPngkt->DESKRIPSI }} </option>
#endforeach
</select>
</td>
<td>
<button type="button" name="add" id="add" class="btn btn-success"><b>+</b></button>
</td>
</tr>
</tbody>
</table>
This is the javascript:
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append(
'<tr id="row'+i+'" class="dynamic-added">
<td>
<select class="form-control" id="add_pengikut_id" name="add_pengikut_id" data-live-search="true" style="width:100%">
<option value=""> --Silahkan Pilih-- </option>
</select>
</td>
<td>
<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button>
</td>
</tr>'
);
});

first make add class of buttons not id
<button type="button" name="add" class="add btn btn-success"><b>+</b></button>
Then your javascript would be like
$('table#dynamic_field').on('click','button.add', function (e) {
var newRow = $(this).parent().parent().clone();
$('table#dynamic_field tbody').append(newRow);
});

Trouble Accessing scope variable in ng-template under script

I am trying to design inline editing template using angular.I have followed this tutorial
http://blog.shubhamsaxena.com/creating-simple-inline-editing-with-angularjs/
My Code is
<table class="table">
<tbody>
<tr class="table-row" ng-repeat="admin in admins" ng-include="getTemplate(admin)">
<script type="text/ng-template" id="display">
<td class="table-img">
<img src="images/in.jpg" alt="" />
</td>
<td class="table-text">
<h6>{{admin.firstname}} {{admin.lastname}}</h6>
<p>{{admin.email}}</p>
<p>{{admin.phone}}</p>
</td>
<td>
<span class="fam">{{admin.dept_name}}</span>
</td>
<td class="march">
<button class="btn-transparent btn" ng-click="editAdmin(admin)"><i class="fa fa-edit fa-2x"></i></button>
</td>
<td>
<button class="btn-transparent btn"><i class="fa fa-remove fa-2x"></i></button>
</td>
</script>
<script type="text/ng-template" id="edit">
</script>
</tr>
</tbody>
</table>
angular js code
$scope.getTemplate = function (admin) {
if (admin.id === $scope.selected.id){
$scope.template = 'edit';
}
else{
$scope.template = 'display';
}
return $scope.template;
};
$scope.editAdmin = function (admin) {
$scope.selected = angular.copy(admin);
};
But when I run this it gives me 404 error in console
www.ip-address/dashboard/principal/display
"display" is my script id you can verify in the 1st snippet.
My question is why it is searching "display" id in the url.
scope variable admins has data but it do not accessed when I write under script.
Please help.

404 means not found
$scope.getTemplate = function (employee) {
if (employee.empID === $scope.selected.empID){
return 'edit';
}
else return 'display';
};
getTemplate if the the Id already exist then it will open in Edit script or else will show in display script
HTMl
<tbody>
<tr ng-repeat="employee in employees" ng-include="getTemplate(employee)">
<script type="text/ng-template" id="display">
<td>{{employee.empName}}</td>
<td>{{employee.empEmail}}</td>
<td>{{employee.empSalary | currency:"₹"}}</td>
<td>{{employee.active | active}}</td>
<td>
<button type="button" class="btn btn-primary" ng-click="editEmployee(employee)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="deleteEmployee(employee)">Delete</button>
</td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model=employee.empName class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empEmail class="form-control input-sm"/></td>
<td><input type="text" ng-model=employee.empSalary class="form-control input-sm"/></td>
<td>
<select class="form-control input-sm" ng-model=employee.active>
<option value='1'>Yes</option>
<option value='0'>No</option>
</select>
</td>
<td>
<button type="button" class="btn btn-primary" ng-click="updateEmployee(employee)">Save</button>
<button type="button" class="btn btn-danger" ng-click="reset()">Cancel</button>
</td>
</script>
</tr>
</tbody>

after using clone function in a row how can create different id for each row

after using clone function in a row, how can create different id for each row
i using add more button add new rows i like to create different id for each row
function cloneRow() {
var row = document.getElementById("clone");
var table = document.getElementById("data");
var selectIndex = 1;
var clone = row.cloneNode(true);
table.appendChild(clone);
clone.setAttribute("style", "");
var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id", "select-" + selectIndex++);
alert(newSelectBox.getAttribute("id"));
}
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7"></div>
<div class="col-sm-2">
<button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
</div>
</div>
</div><br>
<div class="row" id ="close">
<div class="col-sm-4"></div>
<div class='col-sm-4'>
<Form id="NAME_VALUE" method="POST" >
<table class="table-striped" >
<tbody id="data">
<tr id ="clone" style="display:none;">
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
<tr>
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
</tbody>
</table><br>
<button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login();
return false;"> save.</button>
</Form>
</div>
</div>
its coming only select-0 to every one i like to select-0,select-1, select-2 depends on the add more button clicked

You can set a variable like this outside your function :
var i = 0;
and update it inside your function :
i = i + selectIndex
https://jsfiddle.net/gg1eyqgu/