how do I create a simple total price? - javascript

As the header say I need to create a simple total price function.I need to times the number of people to 1000 and show that in "totalPrice". Anything javascript/html/jquery is great. I have this so far:
<html>
<body>
<form id="buyTicket" method="post">
<div>
Booking Name : <input type="text" required id="bookingName" placeholder="booking name" />
</div>
<div>
Number of persons : <input type="number" required id="numberOP" placeholder="number of persons"/>
</div>
<div>
Depature : <input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/>
</div>
<div>
Return :
<input type="text" required id="return" class="datepicker" placeholder="enter return date"/>
</div>
<div id="totalPrice">Total:</div>
<div>
<button type="submit" id="buttonTicket">Buy Ticket</button>
</div>
</form>
<script type="text/javascript">
function CalculateTotal() {
var numberOP = document.getElementById('numberOP').value;
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = total;
}
</script>
</body>
</html>

You need to call your function to display the Total price. Add an change event to to your input to call function.
<div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div>
Full code:
<html><body>
<form id="buyTicket" method="post">
<div>Booking Name :<input type="text" required id="bookingName" placeholder="booking name" /></div>
<div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" placeholder="enter return date"/></div>
<div id="totalPrice">Total:</div>
<input type="hidden" id="total" /> <!-- BAD IDEA -->
<div><button type="submit" id="buttonTicket">Buy Ticket</button></div>
</form>
<script type="text/javascript">
function CalculateTotal() {
var numberOP = document.getElementById('numberOP').value;
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = 'Total: ' + total;
document.getElementById('total').value = total; //<--BAD IDEA
}
</script>
</body></html>

Try parseInt to get a number instead of string.
function CalculateTotal()
{
var numberOP = parseInt("0" + document.getElementById('numberOP').value);
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = total;
}
//Call above method
CalculateTotal();
you can call this method on submit button just to check if it works
<button type="submit" id="buttonTicket" onclick="CalculateTotal();" >Buy Ticket</button>

I don't think you need to use form in your case. You just want to show total price only. Try this:
<html>
<body>
<div>
Booking Name : <input type="text" required id="bookingName" placeholder="booking name" />
</div>
<div>
Number of persons : <input type="number" required id="numberOP" placeholder="number of persons"/>
</div>
<div>
Depature : <input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/>
</div>
<div>
Return :
<input type="text" required id="return" class="datepicker" placeholder="enter return date"/>
</div>
<div id="totalPrice">Total:</div>
<div>
<button type="submit" id="buttonTicket" onlick="CalculateTotal();">Buy Ticket</button>
</div>
<script type="text/javascript">
function CalculateTotal() {
var numberOP = document.getElementById('numberOP').value;
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = total;
}
</script>
</body>
</html>

Knockout.js is Designed for such kind of situation,
See Knockout Home

Related

Why python function doesn't works in the JS (using eel)

I know this issue has probably been dealt with before, however I can't find any proper workarounds to it.
I'm getting this message:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I also get other errors sometimes, like:
GET file:///C:/eel.js net::ERR_FILE_NOT_FOUND
when I running my main.py and index.html
here's the code:
JS
"use strict";
async function sendForm() {
alert(1);
// #region Input
let InputLinkBox = document.search.link;
let LinkVal = InputLinkBox.value;
let InputNumBox = document.search.num;
let NumVal = InputNumBox.value;
let InputNameBox = document.search.name;
let NameVal = InputNameBox.value;
let InputAressBox = document.search.adress;
let AdressVal = InputAressBox.value;
let InputTINBox = document.search.tin;
let TINVal = InputTINBox.value;
let InputGearboxBox = document.search.gearbox;
let GearboxVal = InputGearboxBox.value;
let InputContactBox = document.search.contact;
let ContactVal = InputContactBox.value;
let InputEmailBox = document.search.email;
let EmailVal = InputEmailBox.value;
let InputDirectorBox = document.search.director;
let DirectorVal = InputDirectorBox.value;
let InputDateBox = document.search.date;
let DateVal = InputDateBox.value;
let InputWarehouseBox = document.search.warehouse;
let WarehouseVal = InputWarehouseBox.value;
let PackVal;
let VATVal;
// #endregion
if (document.getElementById('packyes').checked) {
PackVal = document.getElementById('packyes').value;
}
else {
PackVal = document.getElementById('packno').value;
}
if (document.getElementById('vatyes').checked) {
VATVal = document.getElementById('vatyes').value;
}
else {
VATVal = document.getElementById('vatno').value;
}
let summ = await eel.summer_py(LinkVal, NumVal)();
alert(summ);
let ReturningMassive = [NumLink, NumVal, NameVal, AdressVal, TINVal, GearboxVal, ContactVal, EmailVal, DirectorVal, DateVal, WarehouseVal, PackVal, VATVal];
return ReturningMassive;
}
document.getElementById("Btn-send").onclick = sendForm;
Python
import eel
import os
eel.init(f'{os.path.dirname(os.path.realpath(__file__))}/web')
#eel.expose
def summer_py(a, b):
return a + b
eel.start('index.html')
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Title</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="/eel.js"></script>
</head>
<body bgcolor="#DCDCDC" text="2E2E2E">
<form name="search" action="#">
<div class="text-field">
<input class="text-field__input" type="text" name="link" id="input" autocomplete="off" placeholder="Link to the item">
<input class="text-field__input" type="text" name="num" id="input" autocomplete="off" placeholder="Number of item">
<input class="text-field__input" type="text" name="name" id="input" autocomplete="off" placeholder="Name of the company">
<input class="text-field__input" type="text" name="adress" id="input" autocomplete="off" placeholder="City, adress">
<input class="text-field__input" type="text" name="tin" id="input" autocomplete="off" placeholder="TIN(INN) of the company">
<input class="text-field__input" type="text" name="gearbox" id="input" autocomplete="off" placeholder="Gearbox(KPP) of the company">
<input class="text-field__input" type="text" name="contact" id="input" autocomplete="off" placeholder="Contact information">
<input class="text-field__input" type="text" name="email" id="input" autocomplete="off" placeholder="E-mail">
<input class="text-field__input" type="text" name="director" id="input" autocomplete="off" placeholder="Name of the director">
<input class="text-field__input" type="text" name="date" id="input" autocomplete="off" placeholder="Date">
<input class="text-field__input" type="text" name="warehouse" id="input" autocomplete="off" placeholder="Warehouse locatnion">
</div>
<fieldset>
<legend>is the cost of packaging and transport included?</legend>
<div>
<input type="radio" id="packyes" name="pack" value="true"
checked>
<label for="huey">Yes</label>
</div>
<div>
<input type="radio" id="packno" name="pack" value="false">
<label for="dewey">No</label>
</div>
</fieldset>
<fieldset>
<legend>is the cost of VAT included?</legend>
<div>
<input type="radio" id="vatyes" name="vat" value="true"
checked>
<label for="huey">Yes</label>
</div>
<div>
<input type="radio" id="vatno" name="vat" value="false">
<label for="dewey">No</label>
</div>
</fieldset>
<div class="text-field">
<button id="Btn-send" class="button blue">Send</button>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
and I really confused 'cause it's looks ok...
Any help will be very appreciated in advance.

Addition, Subtraction and Division simultaneously on JavaScript

I have this text box:
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared" class="form-control" />
</div>
I want to divide sum_cleared by 0.85 then multiply the result by 0.94 and subtract it from the original value that is typed in sum_cleared and show the final result in:
<div class="form-group">
<label>Sum of Total</label>
<input type="text" name="sum_total" id="sum_total" class="form-control total" readonly/>
</div>
I want to do this dynamically using the onchange and oninput events so it updates the value of sum_total as the user types the value on sum_cleared.
What is the easiest way to accomplish this?
Thank you so much
I was able to do it doing the following:
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared"
class="form-control"
oninput="GetTotal(this.value)" onchange="GetTotal(this.value)"/>
</div>
<div class="form-group">
<label>Total Commission</label>
<input type="text" name="sum_total" id="sum_total"
class="form-control total" readonly/>
</div>
Then adding a small script:
<script type="text/javascript">
function GetTotal(valNum) {
document.getElementById("sum_total").value=valNum/0.85*0.94-valNum
}
</script>
you can do like:
const input = document.querySelector('#sum_cleared');
const output = document.querySelector('#sum_total');
input.addEventListener('input', update);
input.addEventListener('change', update);
function update() {
const updated = input.value - ((input.value / 0.85) * 0.94);
output.value = updated;
}
<div class="form-group">
<label>Enter Sum of Cleared</label>
<input type="text" name="sum_cleared" id="sum_cleared" class="form-control" />
</div>
<div class="form-group">
<label>Sum of Total</label>
<input type="text" name="sum_total" id="sum_total" class="form-control total" readonly/>
</div>

Multiplication using Ajax

I want to multiply the unit price by the quantity from the text box and it needs to keep on changing while I change the value of the text box.
<div>
<label id="" name="price" class="unitprice"><?php echo "Price: <label id = hprice> LKR Rs ".$price.".00 </label> /item" ?></label>
</div>
<label id="lbl"> Quantity:</label>
<div class="quantity buttons_added" id="qtybox">
<input type="button" value="-" class="minus" id= "minus">
<input type="text" step="1" min="1" max="<?php echo $qty?>" name="quantity" value="1" title="Qty" class="input-text qty text" id="tqty" size="4" pattern="" inputmode="">
<input type="button" value="+" class="plus" id="plus">
<label id="pcs"><?php echo "Piece(s) (".$qty. " pieces available)"?></label>
</div>
</br>
<label>Total:</label>
<p id="total"> 0</p>
Create one text box where the user will enter values for quantity and another <div> for displaying the final price.
In the script on a keyup event it will read the value of the qty textbox and multiply it with the price which is 100 for now and displays the final price in the <div> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' name='qty' id='qtity'>
<div id='final_price'></div>
<script>
var price=100;
$(document).ready(function () {
$('#qtity').keyup(function () {
var qty=this.value
$('#final_price').html(price*qty);
});
});
</script>
I'm not sure how AJAX does anything for you as AJAX only handles the communication. You're still in charge of displaying the information.
If you mean jQuery which is often paired with AJAX, I think you are better off using a MVC library such as Angular or Vue.js. My example is done in Vue.js:
let vm = new Vue({
el : "#root",
data : {
units: 0,
price: 0.0
},
computed : {
totalPrice : function() {
return this.units * this.price;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
<label> Units: </label> <br>
<input v-model="units" type="number" step="1" min="0"> <br>
<label> Price: </label> <br>
<input v-model="price" type="number" step=".01" min="0">
<p> $ {{ totalPrice }} </p>
</div>

How can I set the value in a textbox on form load?

This is what I tried for setting the textbox values but it doesn't seem to be working. I want the textboxes to have the values in them when the page loads. the function is within the script tag.
function setMSRP()
{
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly"/>
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly"/>
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly"/>
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly"/>
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly"/>
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()"
</form>
</body>
You have some syntax errors in code. Look at the modified example below:
<html>
<head>
<script>
function setMSRP() {
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly" />
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly" />
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly" />
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly" />
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly" />
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()">
</form>
</body>
</html>
I want the textboxes to have the values in them when the page loads.
You don't need JS for this:
<input id="txtMSRP" type="text" value="<your_value>" />
If you wanted placeholders inside the input[type=text], simply use
var textbox = document.querySelector("#textbox");
textbox.setAttribute("placeholder", "This is the Placeholder");
Or use the HTML Attribute to set the value/placeholder:
<input type="text" id="textbox" value="Hello" placeholder="Introductory Statement" />

Selector is not working in jquery

Hi I've HTML code which is
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">
Now I want to search a value in my notes fields which is Towing amount paid Order ID 000000001 and I want to empty these fields and my javascript/jquery code is
$(document).ready(function() {
if($("input[name^=notes]").val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
But this code is giving me not found message what is wrong in my code I've tried different selectors but didn't work for me.
You can use jQuery :contains pseudo it will find the first element that contains the required text
Ref: https://api.jquery.com/contains-selector/
Code:
if($("input[name^='notes']:contains('Towing amount paid Order ID ')")) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
Demo: http://jsfiddle.net/La1bq789/
This code searches only in the input which has value - This is test notes.
To look in all fields use $.each:
$(document).ready(function () {
$("input[name^='notes']").each(function () {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
});
});
JSFiddle - http://jsfiddle.net/FakeHeal/362o548n/
Edit for clearing the fields: http://jsfiddle.net/FakeHeal/362o548n/1/
The main problem is that you checking only one element value and you need to check all elements.
I did make some changes with your code, now it's working:
$("input[name^=notes]").each(function(){
if($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">
$(document).ready(function() {
$("input").each(function() {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">
$("input[name^=notes]").val() will only ever return the value of the first element in the page than matches that selector.
In order to check all of them you need to look at each instance
I would suggest you modularize the repeating groups by wrapping each group in a container to help locate other related elements within each group
<div class="input-group">
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
</div>
Then loop over the inputs you want to focus on
var hasNotes = $("input[name^=notes]").filter(function(){
return this.value.indexOf("Towing amount paid Order ID ") > -1
}).length;
var message = hasNotes ? 'found it' :'not found'
$('#testing.text(message);
If you need to make adjustments to other values, use an each lopp and traverse within the container

Categories