How to add multiple models together in angular - javascript

I have some number inputs as so:
<input class="title form-control" id="quantity1" min="0" name="quantity1" ng-model="option1" type="number" value="0">
<input class="title form-control" id="quantity2" min="0" name="quantity2" ng-model="option2" type="number" value="0">
<input class="title form-control" id="quantity3" min="0" name="quantity3" ng-model="option3" type="number" value="0">
<input class="title form-control" id="quantity4" min="0" name="quantity4" ng-model="option4" type="number" value="0">
And in other number input I want to display the total quantity.
<input class="title form-control" id="quantity" min="0" name="quantity" ng-model="quantityTotal" type="number" value="0">
How would I go about adding multiple bindings together.

UPDATE: You can make use of value attribute of the control over here. So it would be like:
<input class="title form-control" id="quantity" min="0" name="quantity" value="{{option1+option2+option3+option4}}" type="number" />
Working Fiddle

There are two methods that readily jump to mind.
First you could use ng-change to call a function to update the total:
HTML:
<input class="title form-control" id="quantity1" min="0" name="quantity1" ng-change="onQuantityChange()" ng-model="option1" type="number">
<input class="title form-control" id="quantity2" min="0" name="quantity2" ng-change="onQuantityChange()" ng-model="option2" type="number">
<input class="title form-control" id="quantity3" min="0" name="quantity3" ng-change="onQuantityChange()" ng-model="option3" type="number">
<input class="title form-control" id="quantity4" min="0" name="quantity4" ng-change="onQuantityChange()" ng-model="option4" type="number">
<input class="title form-control" id="quantity" min="0" name="quantity" type="number" ng-model="quantityTotal">
Function:
$scope.onQuantityChange = function() {
$scope.quantityTotal = $scope.option1 + $scope.option2 + $scope.option3 + $scope.option4;
};
You could also just add an expression to the value of the total input like so:
<input class="title form-control" id="quantity" min="0" name="quantity" type="number" value="{{opt1+opt2+opt3+opt4}}">
Here are both solutions working on plnkr.
Side note the first approach would probably be the preferred as it is generally good practice to avoid putting your business logic into your markup.
Hope this helps. Cheers!

Related

html force english lang in input number step

<input type="number" step="0.01" min="0" name="weight" id="weight" value="" class="form-control" placeholder="weight ( kg )">
show image here
is there any way to force english in input number?
always showing as arabic format
you can use lang="en" or dir="ltr"
<input type="number" step="0.01" min="0" name="weight" id="weight" value="" class="form-control" placeholder="weight ( kg )" lang="en">
<input type="number" step="0.01" min="0" name="weight" id="weight" value="" class="form-control" placeholder="weight ( kg )" dir="ltr">

How do I get total addition of three group?

Here I three groups with range slider and input. I want to apply two things.
Multiplication of range slider and the input.
And at the end Addition of all multiplication.
I have a different ID for all input types.
$(document).ready(function(){
var t_sum=0;
var rs=document.getElementById("range").value;
var am=document.getElementById("amount").value;
var k=0;
$('.mul').each(function(){
i++;
var newID='multiplication-'+k;
$(this).attr('id',newID);
document.getElementById("multiplication").innerHTML = rs * am;
})
document.getElementById("addition").innerHTML= multiplication+k;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<input type="text" id="amount1" value="10" disabled ><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" id="amount2" value="20" disabled ><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" id="amount3" value="30" disabled ><br>
<input type="hidden" id="multiplication" class="mul">
Addition of all multiplication <input type="text" id="addition" value="" disabled >
I know the code is wrong.
You can give common class to your amt input as well then use index value of each loop to get value of amt inputs and add total to your addition input.
Demo Code :
$(document).ready(function() {
$(".range").on("change", function() {
var mult = 0;
$('.range').each(function(i) {
var selector_next = parseInt($(".amt:eq(" + i + ")").val()) //get input value
mult += parseInt($(this).val()) * selector_next //multply..
console.log($(".amt:eq(" + i + ")").val(), $(this).val())
})
$("#multiplication").val(mult)
$("#addition").val(mult)
})
$(".range:first").trigger("change")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1">
<!--added class-->
<input type="text" class="amt" id="amount1" value="10" disabled><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount2" value="20" disabled><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1">
<input type="text" class="amt" id="amount3" value="30" disabled><br>
<input type="hidden" id="multiplication" class="mul"> Addition of all multiplication <input type="text" id="addition" value="addition" disabled>

What is the easiest way to calculate total price and quantities for multiple items in javascript?

I have a number of inputs such as:
<input type="number" name="qty[]" data-price="123.99" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="222.11" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="25.68" value="0" class="qtyfield" min="0">
if someone selects a quantity from the first one of 6 and the second example of quantity of 8 I need a running total to be calculated as any changes occur.
If the point here is to get running total of your quantities, weighted by data-price value, you may simply listen for changes and update result value with reduce()'ed sum of input field multiplied by data-price:
$('.qtyfield').on('change', () => {
const total = [...$('.qtyfield')]
.map(input => $(input).val()*$(input).attr('data-price'))
.reduce((t,q) => t+q,0)
$('#result').text(total)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="qty[]" data-price="1" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="2" value="0" class="qtyfield" min="0">
<input type="number" name="qty[]" data-price="3" value="0" class="qtyfield" min="0">
<div id="result"></div>
Note: I have changed data-price values for simplicity sake

On click function not working with bootsrap modal

Here is my on click function
$(".addPizza").on("click", function(event) {
event.preventDefault();
console.log("hello")
let userId = $("#userId").attr("data-id");
let pizzaRecipe = $('#pizza-recipe').val().trim();
let ingredients = JSON.stringify(obj);
let title = $("#pizza-title").val().trim();
let newPizza = {
userid: userId,
recipe: pizzaRecipe,
ingredients: ingredients,
totalCal: calTotal,
title: title
};
$.ajax('/api/pizza', {
type: 'POST',
data: newPizza
}).then(() => {
console.log('Created new pizza recipe');
location.reload();
});
$.ajax('/', newPizza).then(() => {
console.log('Created new pizza recipe');
// location.reload();
});
});
and here is my html modal
<button id="button" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Add a recipe</button>
<!-- end of button -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Recipe</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<form class="recipe-form" action="/pizza" method="POST">
<a id="userId" data-id=<%=user.id %></a>
<input type="text" id="pizza-title" name="pizza-title" placeholder="title"><br>
<input type="text" id="pizza-recipe" name="pizza-recipe" placeholder="recipe"><br>
<label for="vegy1">Cucumber</label>
<input type="number" class="quant" name="vegy1" data-name="cucumber" min="0" max="3" value="0">
<label for="vegy2">Tomato</label>
<input type="number" class="quant" name="vegy2" data-name="tomato" min="0" max="3" value="0">
<label for="vegy3">Pineapple</label>
<input type="number" class="quant" name="vegy3" data-name="pineapple" min="0" max="3" value="0">
<label for="vegy4">Avocado</label>
<input type="number" class="quant" name="vegy4" data-name="avocado" min="0" max="3" value="0"><br>
<label for="vegy5">Eggplant</label>
<input type="number" class="quant" name="vegy5" data-name="eggplant" min="0" max="3" value="0">
<label for="vegy6">Olive</label>
<input type="number" class="quant" name="vegy6" data-name="olive" min="0" max="3" value="0">
<label for="vegy7">Onion</label>
<input type="number" class="quant" name="vegy7" data-name="onion" min="0" max="3" value="0">
<label for="vegy8">Mushroom</label>
<input type="number" class="quant" name="vegy8" data-name="mushroom" min="0" max="3" value="0"><br>
<label for="vegy9">Garlic</label>
<input type="number" class="quant" name="vegy9" data-name="garlic" min="0" max="3" value="0">
<label for="vegy10">Spinach</label>
<input type="number" class="quant" name="vegy10" data-name="spinach" min="0" max="3" value="0">
<label for="vegy11">Cilantro</label>
<input type="number" class="quant" name="vegy11" data-name="cilantro" min="0" max="3" value="0">
<label for="vegy12">Chicken</label>
<input type="number" class="quant" name="vegy12" data-name="chicken" min="0" max="3" value="0"><br>
<label for="vegy13">Anchovy</label>
<input type="number" class="quant" name="vegy13" data-name="anchovy" min="0" max="3" value="0">
<label for="vegy14">Bacon</label>
<input type="number" class="quant" name="vegy14" data-name="bacon" min="0" max="3" value="0">
<label for="vegy15">Sausage</label>
<input type="number" class="quant" name="vegy15" data-name="sausage" min="0" max="3" value="0">
<label for="vegy16">Beef</label>
<input type="number" class="quant" name="vegy16" data-name="beef" min="0" max="3" value="0"><br>
<label for="vegy17">Ham</label>
<input type="number" class="quant" name="vegy17" data-name="ham" min="0" max="3" value="0">
<label for="vegy18">Pepperoni</label>
<input type="number" class="quant" name="vegy18" data-name="pepperoni" min="0" max="3" value="0">
<label for="vegy19">Salami</label>
<input type="number" class="quant" name="vegy19" data-name="salami" min="0" max="3" value="0">
<label for="vegy20">Banana</label>
<input type="number" class="quant" name="vegy20" data-name="banana" min="0" max="3" value="0"><br>
<p id="totalCal"></p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary addPizza">Add Recipe</button>
</div>
</form>
</div>
</div>
</div>
</div>
let mysql = require("mysql");
let connection;
if (process.env.JAWSDB_URL)
// DB is JawsDB on Heroku
connection = mysql.createConnection(process.env.JAWSDB_URL);
else
// DB is local on localhost
connection = mysql.createConnection({
port: 3306,
host: 'localhost',
user: 'root',
password: 'pass',
database: 'pizza_recipe_db'
});
// Establish connection to MySQL
connection.connect((err) => {
if (err) {
console.error(`error connecting MySQL: ${err.stack} \n`);
return;
}
console.log(`Connected to MySQL as id ${connection.threadId} \n`);
});
// Export connection
module.exports = connection;
It is also giving me this error when I click on the add recipe button
GET http://localhost:3000/ net::ERR_EMPTY_RESPONSTPOST http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED
POST http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED
I was told I should use "event delegation" I am not sure how to do that though.
Thanks for your help. If you need any more code just let me know. thank you!
You have not closed anchor tag properly in HTML and that's why the user id is not getting right.
Check Following line
<a id="userId" data-id=<%=user.id %></a>
It should be
<a id="userId" data-id=<%=user.id %>></a>
As it was not closed correctly, JS was sending userid = 3 </a and at Mysql your column is user_id is not a text, It is unsigned integer. That's why your insertion code was failing to insert the Text value into integer column and throwing sql exception and server operation was exited. That's why you have got a error
http://localhost:3000/ net::ERR_EMPTY_RESPONSTPOST
http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED
As the server is exited and it is not running.
Change the anchor tag given above and your code will be working perfectly.

Form calculations, only first field works

I need to sum all prices and multiply them with quantity. Problem is that only first field calculates good, others take price value of first. Help please
This is were I came for now:
$('.orderForm__item').on('input', function() {
var totalSum = 0;
$('.quantity, .price').each(function() {
var quantity = $(this).val();
var price = $('.price').attr('value');
if ($.isNumeric(quantity)) {
totalSum += parseFloat(quantity) * parseFloat(price);
}
});
$('#total').text(totalSum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" class="orderForm">
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.70">(1.70 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="3">(3.0 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="15">(15 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.7">(1.70 KM)</span><br>
</div>
</form>
Total: <output id="total"></output>
You should each for orderForm__item and find quantity, price per item:
$('.orderForm__item').on('input', function() {
var totalSum = 0;
$('.orderForm__item').each(function() {
var quantity = $(this).find('.quantity').val();
var price = $(this).find('.price').attr('value');
if ($.isNumeric(quantity)) {
totalSum += parseFloat(quantity) * parseFloat(price);
}
});
$('#total').text(totalSum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" class="orderForm">
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.70">(1.70 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="3">(3.0 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="15">(15 KM)</span><br>
</div>
<div class="orderForm__item">
<label>Item</label>
<input min="0" max="99" type="number" class="quantity" name="quantity" /><br>
<span class="price" value="1.7">(1.70 KM)</span><br>
</div>
</form>
Total: <output id="total"></output>

Categories