On click function not working with bootsrap modal - javascript

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.

Related

How to call selected radio button's input ID?

I have multiple inputs with their ID in the radio button group and range slider. I want the addition of all multiplication of checked radio buttons and range sliders. But I don't get checked radio button's input type text value. Below something I tried but it's the wrong code.
$(document).ready(function() {
$('.range').on('change', function() {
let total = 0;
let multiplyFactor = document.getElementById(`actualtime${inputIndex}`).value;
console.log(multiplyFactor);
$('.range').each(function() {
total += (parseFloat($(this).val()) * multiplyFactor);
});
$('#timetoproduce').text(total);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="starter"><input type="radio" id="" class="radio-roi"name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled></label><br>
<label for="plus"><input type="radio" id="" class="radio-roi"name="plan" value="plus" >
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled></label><br>
<label for="pro"><input type="radio" id="" class="radio-roi"name="plan" value="pro" >
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled></label><br>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>
<span id="timetoproduce" value=""></span>
You could do with :checked and next to find the input value
$(document).ready(function() {
$('.range').on('change', function() {
let n = $(this).attr('id').match(/\d+/g)[0];
let total = 0;
let checkVal = $('.radio-roi:checked').next('input').val();
let multiplyFactor = parseFloat(checkVal);
console.log(multiplyFactor)
$('.range').each(function() {
total += (parseFloat($(this).val()) * multiplyFactor);
});
$('#timetoproduce').text(total);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="" class="radio-roi" name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="plus">
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>
<span id="timetoproduce" value=""></span>

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>

Linking Event Handlers in forEach Loop Javascript NodeList

I'm trying to link the event of two input types in a NodeList. I'm able to link a single pair of inputs but once I add more pairs, I'm unable to link them. What am I doing wrong?
var range = document.querySelectorAll(".inputRange");
var field = document.querySelectorAll(".inputNumber");
// console.log(range);
// console.log(field);
range.forEach(input => {
input.addEventListener("input", e => {
// console.log("RANGE EVENT: " +e.type)
field.value = e.target.value;
});
});
field.forEach(input => {
input.addEventListener("input", e => {
range.value = e.target.value;
});
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>
Iterate over only one of the collections, and inside the loop, get a reference to the linked input by navigating the nearby DOM, then add listeners to both:
document.querySelectorAll(".inputNumber").forEach((field) => {
const range = field.parentElement.nextElementSibling.children[0];
range.oninput = () => field.value = range.value;
field.oninput = () => range.value = field.value;
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>
Or you could reference the same index on the other collection:
const ranges = document.querySelectorAll(".inputRange");
document.querySelectorAll(".inputNumber").forEach((field, i) => {
const range = ranges[i];
range.oninput = () => field.value = range.value;
field.oninput = () => range.value = field.value;
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>

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>

How to add multiple models together in angular

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!

Categories