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;
}
});

How to dynamically set HTML <input> names with Thymeleaf

I have a form that receives a 2D array from the controller and I have generated the table through thymeleaf.
<div class="col-4 offset-4">
<form id="sudokuBoard" method="post" enctype="application/x-www-form-urlencoded" class="form-group text-center">
<div class="container">
<table class="row-eq-height table-striped table-bordered text-center">
<!--/*#thymesVar id="board" type=""*/-->
<tr th:each="row: ${board}">
<td th:each="value: ${row}">
<div th:switch="${value}" class="col-xs-4">
<input name="cellValue" th:case="0" class="content form-control input" style="text-align:center" type="text" pattern="[0-9]*" maxlength="1" value="0" onkeypress="return isNumber(event)" oninput="moveMade()">
<input name="cellValue" th:case="*" class="content form-control input" style="text-align:center;background-color:lightgreen" type="text" th:value="${value}" readonly>
</div>
</td>
</tr>
</table>
<div class="gap-10"></div>
<button type="submit" class="btn btn-outline-primary btn-sm">Check Solution</button>
<button class="btn btn-outline-primary btn-sm" id="btnNewGame">New Game</button>
<button class="btn btn-outline-primary btn-sm" id="solveBoard"> Solve Puzzle</button>
</div>
</form>
</div>
All input fields have the same name and I want to dynamically assign the names through Thymeleaf so they become cellValueX in order to differentiate each cell in order to check the validity of moves entered by the user.

You use the attribute th:name. See this for a list of attributes you can use with Thymeleaf. I don't know specifically from your code what you want to use for X in cellValueX, but possibly something like this?
<tr th:each="row, y: ${board}">
<td th:each="value, x: ${row}">
<input th:name="|cellValue${x.index}_${y.index}|" ... />
</td>
</tr>

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 create html buttons with checkboxes with Jquery?

I have a table with 4 checkboxes. Lets say with Title,Adress,Postal Code and Email.
<table class="mytable">
<tbody>
<tr>
<td> <input type="checkbox" value="title"> title </td>
<td> <input type="checkbox" value="adress"> Adress </td>
<td> <input type="checkbox" value="postalcode"> Postal Code </td>
<td> <input type="checkbox" value="email"> Email </td>
</tr>
</table>
I have another div with class "myfilters" which is hidden when none of the above checkboxes are checked.
<div class="myfilters">
<button type="button" class="btn btn-default btn-sm"> Title </button>
<button type="button" class="btn btn-default btn-sm"> Adress</button>
</div>
My question is How can I implement when a user checks lets say "title" and "adress" checkboxes in the table
then inside the div "myfilters" to be created dynamically the buttons "Title" and the Button "Address" ?

Don't add the buttons dynamically. Create them in the HTML, but hide them with CSS. Then show them when you click on the corresponding checkbox.
$(":checkbox").click(function() {
$("#"+this.value).toggle(this.checked);
});
.btn {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable">
<tbody>
<tr>
<td> <input type="checkbox" value="title"> title </td>
<td> <input type="checkbox" value="adress"> Adress </td>
<td> <input type="checkbox" value="postalcode"> Postal Code </td>
<td> <input type="checkbox" value="email"> Email </td>
</tr>
</table>
<div class="myfilters">
<button type="button" id="title" class="btn btn-default btn-sm"> Title </button>
<button type="button" id="adress" class="btn btn-default btn-sm"> Adress</button>
<button type="button" id="postalcode" class="btn btn-default btn-sm"> Postal Code</button>
<button type="button" id="email" class="btn btn-default btn-sm"> Email</button>
</div>

try this :
$(function(){
$('.mytable').on("change","input[type=checkbox]",function(){
if($(this).is(':checked'))
{
var button = '<button type="button" class="btn btn-default btn-sm" id="'+$(this).val()+'">'+$(this).parent().text()+'</button>';
$('.myfilters').append(button);
}
else
{
$('.myfilters').find('button[id="'+$(this).val()+'"]').remove();
}
});
});
Demo

This is what you need (notice that I've added the IDs for checkboxes):
<table class="mytable">
<tr>
<td><input id="c1" type="checkbox" value="title">Title</td>
<td><input id="c2" type="checkbox" value="adress">Address</td>
<td><input id="c3" type="checkbox" value="postalcode">Postal Code</td>
<td><input id="c4" type="checkbox" value="email">Email</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#c1").click(function(){
$(".myfilers").append("<button>Title</button>");
});
$("#c2").click(function(){
$(".myfilers").append("<button>Address</button>");
});
$("#c3").click(function(){
$(".myfilers").append("<button>Postal Code</button>");
});
$("#c4").click(function(){
$(".myfilers").append("<button>Email</button>");
});
});
</script>

Here is a fiddle Demo, FIDDLE DEMO CLICK HERE
var myNull=null; // ignore this line

increment the value of one td in a table

I have a page with an "add item" button. When this button is clicked, an ajax call is made and a table is returned with all the information from the database based on the sku entered. (Dummy data is there now for testing.) If the button is only clicked once, there is no trouble incrementing or decrementing the qty value. If the button is clicked two, or more, times, if you click the increment button on the second table it will increase the value in the first table.
I have added a counter that gives a unique number to each table created. I think what I want to do is figure out how to determine the counter number for the specific table that is being incremented and pass it to the javascript function so it works with that specific entry.
Here is the code with the button, ajax call, and javascript:
<script type="text/javascript">
var count = 1;
$('#items').live('pageinit',function(event){
$('#additem').click(function () {
//alert("add clicked");
var request = $.ajax({
url: "http://www.furnguy.com/app-pages/additem.php",
type: "POST",
data: {COUNTER : count},
dataType: "html"
});
request.done(function(html) {
//alert("here");
if (html != '') {
$('#salesitems').append(html).trigger('create');
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
count++;
});
});
function deleteItem() {
$('table').click(function(){
$(this).parent().remove();
});
};
function increaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal + 1);
}
};
function decreaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal - 1);
}
};
</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
<div id="main_nav">
<span style="float: left; display: inline; width: 100px;">
<label>Enter SKU</label>
</span>
<span style="float: left; display: inline; width: 250px;">
<input type="text" name="initialsku" id ="initialsku" />
</span>
<br /><br /><br />
<button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>
<!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
<div id="salesitems"></div>
</div>
</div><!-- /content -->
</body>
</html>
here is the page being called by the ajax:
<?php
$counter = $_POST['COUNTER'];
?>
<body>
<div data-role="fieldcontain">
<div class="addItems">
<table id="myTable" style="border-bottom: 1px solid black;">
<tr>
<td style="width: 50px;">
<label for="qty">Qty:</label>
</td>
<td style="width: 75px;">
<input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
</td>
<td style="width: 50px;">
<label for="sku">SKU:</label>
</td>
<td style="width: 350px;">
<input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" />
</td>
<td style="width: 50px;">
<label for="retail">Retail:</label>
</td>
<td style="width: 250px;">
<input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99" />
</td>
<td id="tableNumber">
<?php echo $counter; ?>
</td>
</tr>
<tr>
<td style="width: 50px;">
<label for="desc">Desc:</label>
</td>
<td colspan="5">
<input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." />
</td>
<td>
<input type="button" value="X" onclick="deleteItem();" />
</td>
</tr>
</table>
</div>
</div>
Anyone have suggestions about this? I would really appreciate the help as I have been working on this for a couple days now.
Thanks in advance!

Every time you click the button, you are inserting a new table with a #qty input. When you later try to increase quantity, jQuery just finds the first #qty in the dom: your first table.
You should probably set a unique id on your qty input, e.g.:
<input type="button" value="+" id="increase" onclick="increaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty_<?php echo $_POST['INITIALSKU']; ?>" value="1" style="float: left; display: inline;" />
and then rewrite the increase/decrease functions to take the id of the field to modify. I don't actually speak PHP but you get the idea