Setting an input value on page load in Angular - javascript

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

Related

How to assign the value of an input field to a button in a jinja list

I am currently building a web app with flask. In a table, I want to create buttons that get assigned the value of an input field, but in a table created with jinja. Normaly this would have been possible with this code but since it is a jinja table I can't find a way to do this. Can anybody help?
<tbody>
{% for itemname in itemnames%}
<tr>
<td class="text-start"><button class="item btn" type="submit" name="item" value="{{itemname.name}}">{{itemname.name}}</button></td>
<td class="text-start"><input autocomplete="off" autofocus class="form-control mx-auto w-auto" id="{{itemname.amount}}" name="amount" placeholder={{itemname.amount}} value="{{itemname.amount}}" type="text"></td>
<td class="text-start"><button class="btn btn-success" type="submit" name="add" onclick="getInputValue();">+</button></td>
</tr>
<script>
function getInputValue() {
// Selecting the input element and get its value
var inputVal = document.getElementById("{{itemname.amount}}").value;
// Displaying the value
alert(inputVal);
}
</script>
{% endfor %}
</tbody>
Edit, removed the first way
https://www.w3schools.com/js/js_htmldom_navigation.asp
Use dom navigation starting from the button to the input
<td class="text-start"><input autocomplete="off" autofocus class="form-control mx-auto w-auto" id="{{itemname.amount}}" name="amount" placeholder={{itemname.amount}} value="{{itemname.amount}}" type="text"></td>
<td class="text-start"><button class="btn btn-success" type="submit" name="add" onclick="getInputValue(this);">+</button></td>
function getInputValue(e) {
var input = e.previousSibling.value
alert(input)
</script>

How to calculate total of a row in a table when quantity changes

I am trying to update the total of each row with increasing quantity but only one row is updated. How can I update each row? How can I add id in these to make more dynamic? I am using jQuery version 2.2.4. Thanks in advance.
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img src="img/bg-img/b3.jpg" style="width: 72px; height: 72px;" alt=""> </a>
<div class="media-body">
<h5 class="media-heading">
<?php echo isset($carts['title']) ? $carts['title']: ''; ?>
</h5>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1 quantity" style="text-align: center">
<input type="number" class="form-control" id="fname" oninput="myFunction()" value="1" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 price"><strong><?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price']; ?></strong></td>
<input type="hidden" class="form-control" id="artprice" value="<?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price']; ?>" label="">
<td class="col-sm-1 col-md-1 text-center pr-01" id="total"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<div class="product" data-id="<?php echo $key; ?>">
<button type="button" class="btn btn-danger remove-from-cart">Remove</button>
</td>
</div>
</tr>
function myFunction() {
var x = document.getElementById("fname") value;
var str = $("#artprice").val();
$('#total').html(str * x);
}
There's several issues in your code.
There's a </div> in the wrong place. It's outside the <td> it belongs to
The #artprice input is outside the table structure. It needs to be placed within a td
There's a missing . before the value property in the JS.
However the biggest issue is because your repeat the same id attributes on multiple elements as you loop through to create these rows in the HTML. id have to be unique within the DOM.
To fix this use common class attributes on all the elements you need to find instead, then use jQuery's DOM traversal techniques to retrieve them based on the current row.
Also note in the below example that I used an unobtrusive event handler. Inline event attributes are no longer good practice and should be avoided where possible. In addition I removed the inline style attributes and used rules in an external stylesheet. Both of these approaches are preferred due to the Separation of Concerns principle.
With all that said, try this:
jQuery($ => {
$('.fname').on('input', function() {
let $row = $(this).closest('tr');
let price = $row.find(".artprice").val();
$row.find('.total strong').text('$' + (this.value * price).toFixed(2));
});
});
.media a img {
width: 72px;
height: 72px;
}
td.quantity {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
<div class="media-body">
<h5 class="media-heading">Title</h5>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1 quantity">
<input type="number" class="form-control fname" value="1" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 price">
<strong>$14.61</strong>
<input type="hidden" class="form-control artprice" value="14.61" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<div class="product" data-id="Key">
<button type="button" class="btn btn-danger remove-from-cart">Remove</button>
</div>
</td>
</tr>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
<div class="media-body">
<h5 class="media-heading">Title</h5>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1 quantity">
<input type="number" class="form-control fname" value="1" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 price">
<strong>$57.24</strong>
<input type="hidden" class="form-control artprice" value="57.24" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$57.24</strong></td>
<td class="col-sm-1 col-md-1">
<div class="product" data-id="Key">
<button type="button" class="btn btn-danger remove-from-cart">Remove</button>
</div>
</td>
</tr>
</table>
One last thing to note is that jQuery 2.2.4 is getting a little old now. You should consider upgrading to 3.x

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;">' +
.
.
.

jQuery find first element with data attribute

I am trying to find the first element with a data attribute of data-uuid inside a table row. I can see examples of finding an element that has a data attribute of a value, but I do not know the value, I just want to find the element with the attribute.
My HTML:
<tr id="row_12">
<td style="width:320px;">
<input class="form-control has-feedback table_input name changed_event" type="text" value="" data-rowid="row_new" data-msgid="name" data-orig="" placeholder="Name">
<input class="form-control has-feedback table_input email changed_event" type="email" value="" data-msgid="email" data-orig="" placeholder="Email">
</td>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td class="table_form_cell">
<table class="table-sm form_cell">
<tbody><tr>
<td style="width:25%;" class="text-center form_cell_switch">
<input class="switch switch-primary activated_at changed_event" type="checkbox" data-rowid="row_new" data-orig="">
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-primary btn-sm btn_reload_row" data-rowid="row_new">
<i class="far fa-sync"></i>
</button>
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-danger btn-sm btn_delete_row" data-uuid="NEW_USER" data-rowid="row_new">
<i class="far fa-trash-alt"></i>
</button>
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-primary btn-sm btn_save_row" data-uuid="NEW_USER" data-rowid="row_new" disabled="">
<i class="far fa-save"></i>
</button>
</td>
</tr>
<tr>
<td colspan="4">
<select class="form-control has-feedback table_input changed_event date_format_id" data-orig="1">
<option value="1" selected="">21/Jan/2018</option>
<option value="2">21-Jan-2018</option>
<option value="3">21 January 2018</option>
<option value="4">21-January-2018</option>
<option value="5">Jan 21, 2018</option>
<option value="6">January 21, 2018</option>
<option value="7">21/01/2018</option>
<option value="8">21-01-2018</option>
<option value="9">01/21/2018</option>
<option value="10">2018-01-21</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I want a generic way to find first element (rather than using this example's input element, as this is a function re-used for other forms of similar structure.
I have tried this:
var uuidElem = $(row).find('[data-uuid]');
var uuid = uuidElem.data('uuid');
also this:
var rowId = getRowId(row);
var uuid = $(row).find('[data-uuid]').data('uuid');
also this:
var rowId = getRowId(row);
var uuid = $('tr#' + rowId).find('[data-uuid]').data('uuid');
but uuid is undefined. How do I find this element.
Maybe Your html hasn't tag <table>, I add table and next code:
var uuidElem = $('#row_12 [data-uuid]');
uuidElem.each(function(index){
console.log($( this ).data('uuid') );
})
All ok.
https://codepen.io/piotrazsko/pen/RxvBNP
Also , you can try code without jquery:
let buttons = Array.from(document.querySelectorAll('#row_12 [data-uuid]'));
buttons.forEach((elem)=>{console.log(elem.getAttribute('data-uuid'))})
Finding row without tag <table> not working.

ng-form with $setPristine()

<tr ng-form="fbForm_{{$index}}">
<td><center><p ng-hide="fb.editMode">{{fb.clientId}}</p>
<input type="text" class="form-control" name="clientId" ng-show="fb.editMode" required
ng-model="fb.clientId"/></center>
<span ng-show="fbForm_{{$index}}.clientId.$dirty && fbForm_{{$index}}.clientId.$error.required">Client Id is required.</span>
</td>
<td><center><p ng-hide="fb.editMode">{{fb.clientSecret}}</p>
<input type="text" class="form-control" name="clientSecret" ng-show="fb.editMode" required
ng-model="fb.clientSecret"/></center>
<span ng-show="fbForm_{{$index}}.clientSecret.$dirty && fbForm_{{$index}}.clientSecret.$error.required">Client secret is required.</span>
</td>
<td style="width:10%">
<p ng-hide="fb.editMode"><a ng-click="toggleEdit()" href="javascript:;">Edit</a> | <a ng-click="deletefacebook()" href="javascript:;">Delete</a></p>
<p ng-show="fb.editMode"><a class="btn btn-primary simple_button" ng-disabled="fbForm_{{$index}}.$pristine || fbForm_{{$index}}.$invalid" data-ng-click="save($index); fbForm_{{$index}}.$setPristine()" href="javascript:;">Save</a> | <a class="btn btn-primary simple_button" ng-click="cancel($index,fb.fbConfigId)" href="javascript:;">Cancel</a></p>
</td>
</tr>
http://plnkr.co/edit/LnnJQj1WwQaxLjlIWXq2?p=preview
for ng-disabled I am able to use {{$index}}
Getting syntax error in pristine function form name.
ngDisabled and ngClick directives expect expressions, so it should be something like this:
ng-disabled="this['fbForm_' + $index].$pristine || this['fbForm_' + $index].$invalid"
ng-click="save($index); this['fbForm_' + $index].$setPristine()"

Categories