We Keep Coding

Javascript cant get my value and calculate in html

Im trying to do simple calculation for the fee ,but its doesn't work ,there's no error in the code. Did I miss something in the script ?
<script type="text/javascript">
var bwm = 7.9;
var bswk = 14;
var bsbh = 15;
var wm = 2;
var swk = 11;
var sbh = 12;
var kilo, overkilo, f;
var s = document.getElementById('place');
var place = s.options[s.selectedIndex].value;
var k = document.getElementById('kilo').value;
var tot;
function quote() {
f = document.getElementById('theform');
f.reset();
document.getElementById('calc').onclick = function() {
if (place == 'swk') {
(k * swk) + bswk = tot;
} else if (place == 'sbh') {
(k * sbh) + bsbh = tot;
} else {
(k * wm) + bwm = tot;
}
document.getElementById('tot').value = 'RM ' + parseFloat;
}
}
</script>
<form id="theform" action="#">
<div>
<label for="place">Choose Destination :</label>
<select id="place" onChange="quote()">
<option value="swk">Sarawak</option>
<option value="sbh">Sabah</option>
<option value="wm">WestMalaysia</option>
</select>
</div>
<div>
<label for="kilo">Amount of KG :</label>
<input id="kilo" type="text">
</div>
<div>
<label>Total :</label>
<input id="tot" type="text" readonly="readonly">
</div>
<div>
<label></label>
<input id="calc" type="button" value="calculate">
<input id="r" type="reset" value="clear">
</div>
</form>
The clear works fine ,but the calculate button won't work even i have input the KG and select a option to calculate .

You need to move the definition of the click handler outside of the change handler, unless the click handler would be defined only when an option changes and also it would be defined on every option change which is unnecessary.
Grab all the required values inside the click handler otherwise you would not have the updated values.
And you also need to set the selected index after resetting the form otherwise the change of option would not be visible.
const
bwm = 7.9,
bswk = 14,
bsbh = 15,
wm = 2,
swk = 11,
sbh = 12;
function quote(e) {
const selIndex = e.target.selectedIndex;
document.getElementById("theform").reset();
document.getElementById("place").selectedIndex = selIndex;
}
document.getElementById("calc").onclick = function () {
const select = document.getElementById("place");
const place = select.options[select.selectedIndex].value;
const k = document.getElementById("kilo").value;
if (!k) {
return;
}
let tot;
if (place === "swk") {
tot = k * swk + bswk;
} else if (place === "sbh") {
tot = k * sbh + bsbh;
} else {
tot = k * wm + bwm;
}
document.getElementById("tot").value = "RM " + tot;
};
<form id="theform" action="#">
<div>
<label for="place">Choose Destination :</label>
<select id="place" onChange="quote(event)">
<option value="swk">Sarawak</option>
<option value="sbh">Sabah</option>
<option value="wm">WestMalaysia</option>
</select>
</div>
<div>
<label for="kilo">Amount of KG :</label>
<input id="kilo" type="text">
</div>
<div>
<label>Total :</label>
<input id="tot" type="text" readonly="readonly">
</div>
<div>
<label></label>
<input id="calc" type="button" value="calculate">
<input id="r" type="reset" value="clear">
</div>
</form>
Instead of resetting the form you could also update the calculated value every time the option changes.
const
bwm = 7.9,
bswk = 14,
bsbh = 15,
wm = 2,
swk = 11,
sbh = 12;
document.getElementById("calc").onclick = handleClick;
function handleClick() {
const select = document.getElementById("place");
const place = select.options[select.selectedIndex].value;
const k = document.getElementById("kilo").value;
if (!k) {
return;
}
let tot;
if (place === "swk") {
tot = k * 10 + 10;
} else if (place === "sbh") {
tot = k * sbh + bsbh;
} else {
tot = k * wm + bwm;
}
document.getElementById("tot").value = "RM " + tot;
}
<form id="theform" action="#">
<div>
<label for="place">Choose Destination :</label>
<select id="place" onChange="handleClick()">
<option value="swk">Sarawak</option>
<option value="sbh">Sabah</option>
<option value="wm">WestMalaysia</option>
</select>
</div>
<div>
<label for="kilo">Amount of KG :</label>
<input id="kilo" type="text">
</div>
<div>
<label>Total :</label>
<input id="tot" type="text" readonly="readonly">
</div>
<div>
<label></label>
<input id="calc" type="button" value="calculate">
<input id="r" type="reset" value="clear">
</div>
</form>

I Removed the left-hand side for assignment and set the value.
You defined the var for all instead of that you can use const.
Also form reset not required.
Here is solution of your code
<html>
<script type="text/javascript">
const bwm = 7.9;
const bswk = 14;
const bsbh = 15;
const wm = 2;
const swk = 11;
const sbh = 12;
let kilo, overkilo, f;
var tot;
function quote() {
const s = document.getElementById('place');
const place = s.options[s.selectedIndex].value;
const k = document.getElementById('kilo').value;
f = document.getElementById('theform');
// f.reset();
document.getElementById('calc').onclick = function() {
if (place == 'swk') {
tot = (k * swk) + bswk;
} else if (place == 'sbh') {
tot = (k * sbh) + bsbh;
} else {
tot = (k * wm) + bwm;
}
document.getElementById('tot').value = 'RM ' + parseFloat(tot);
}
}
</script>
<form id="theform" action="#">
<div>
<label for="place">Choose Destination :</label>
<select id="place" onChange="quote()">
<option value="swk">Sarawak</option>
<option value="sbh">Sabah</option>
<option value="wm">WestMalaysia</option>
</select>
</div>
<div>
<label for="kilo">Amount of KG :</label>
<input id="kilo" type="text">
</div>
<div>
<label>Total :</label>
<input id="tot" type="text" readonly="readonly">
</div>
<div>
<label></label>
<input id="calc" type="submit" value="calculate">
<input id="r" type="reset" value="clear">
</div>
</form>
</html>

Increment and Decrement price value on Change

i'm trying to do an price counter synchronizing with increment and decrement buttons, but the price is not changing when i click one of the buttons (+/-) this is not working, how can i solve this issue? Thanks!!!
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
}
else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function()
{
function updatePrice()
{
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
$(document).on("change, keyup, focus", "#quantity", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value=""/>

If you change your binding to update whenever there is a click on an input, you'll get the behavior that you are expecting.
$('#plus').click(function add() {
var $qtde = $("#quantity");
var a = $qtde.val();
a++;
$("#minus").attr("disabled", !a);
$qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());
$('#minus').click(function minust() {
var $qtde = $("#quantity");
var b = $qtde.val();
if (b >= 1) {
b--;
$qtde.val(b);
} else {
$("#minus").attr("disabled", true);
}
});
/* On change */
$(document).ready(function() {
function updatePrice() {
var price = parseFloat($("#quantity").val());
var total = (price + 1) * 1.05;
var total = total.toFixed(2);
$("#total-price").val(total);
}
// On the click of an input, update the price
$(document).on("click", "input", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value="" />

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sp-quantity">
<div class="container" style=" font-size:14px; ">
<div class="sp-input">
<input type="text" class="quantity-input" value="1">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
<p>custom filed</p>
<div class="sp-input">
<input type="text" class="quantity-input-db" value="1.8" step="1.8">
<div class="button" style="cursor: pointer;">
+
</div>
<div class="button" style="cursor: pointer;">
-
</div>
</div>
</div>
</div>
<script type="text/javascript">
// debugger;
$(document).ready(function () {
$(".button").on("click", function() {
var $db_value = $('.db_value').val();
var $quantity = $('.quantity_input').val();
var db_valu_fix = 1.8;
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quantity-input");
var oldValue_q = $input.val();
var $db_value = $button.closest('.sp-quantity').find("input.quantity-input-db");
var oldValue_db = $db_value.val();
console.log(oldValue_db);
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue_q) + 1;
newdbVal = parseFloat(oldValue_db) + 1;
//newdbVal.toFixed(2);
}
else {
if (oldValue_q > 0) {
newVal = parseFloat(oldValue_q) - 1;
newdbVal = parseFloat(oldValue_db) - 1;
newdbVal = Math.round(newdbVal * 100) / 100;
} else {
newVal = 1;
}
}
$input.val(newVal);
$db_value.val(newdbVal);
});
// $(".ddd").on("click", function(step) {
// var a=$(".quantity-input").val();
// var attr=$(".quantity-input").attr(step);
// var getValue=a/1;
// console.log(attr);
// });
});
</script>
</body>
</html>

How to add Min and Max validation in this code with alert

I want to add height and width calculator in my website which ask user to enter width and height size. but there should be a validation for minimum value like 200 and max value like 5000 for both height and width.
if the use add smaller than 200 and greater than 5000 it should alert a message to correct it.
I have developed this code but its not working like to ask seperatly
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
if(myBox1 >= 200 && myBox2 >=200) {
var result = document.getElementById('result');
var myResult = [(myBox1 * myBox2 * 0.69)/100];
result.value = parseFloat(myResult).toFixed(2);
} else {
alert("Please enter Minimum Width and Height is greater than 200")
}
}
<script type="text/javascript">
</script>
<div style="background-color:gray; border-bottom-width:2; border-color:orange;">
<h3 class="page-header">Price Calculator </h3>
<div class="docs-data">
<form name="pricecalculator" id="pricecalculator" method="post" action="<?php echo $buy;?>"/>
<div class="input-group" style="display:table-row-group; alert">
<label class="input-group-addon" for="dataWidth">Width</label>
<input id="box1" type="text" onchange="calculate();"/>
<!-- <input type="text" class="form-control" id="dataWidth" placeholder="width"> -->
<span class="input-group-addon">cm</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Height</label>
<input id="box2" type="text" onchange="calculate();"/>
<!-- <input type="text" class="form-control" id="dataHeight" placeholder="height"> -->
<span class="input-group-addon">cm</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Total Price</label>
<input id="result" type="text" readonly="readonly" onchange="calculate();"/>
<!--<input type="text" class="form-control" id="dataHeight" placeholder="height"> -->
<span class="input-group-addon">AUD</span>
</div>
</div>
</div>

Try this:
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
if (showAlert(myBox1, 'Width') && showAlert(myBox2, 'Height')) {
var result = document.getElementById('result');
var myResult = [(myBox1 * myBox2 * 0.69)/100];
result.value = parseFloat(myResult).toFixed(2);
}
}
function showAlert(boxValue, type) {
if(boxValue < 200) {
alert("Please enter Minimum " + type + " greater than 200");
return false;
}
return true;
}

The event change fires when input-element loses focus.
I would use the following decision:
function startValidator(){
var oldWidth = document.getElementById('box1').value;
var oldHeight = document.getElementById('box2').value;
setInterval(function(){
var newWidth = document.getElementById('box1').value;
var newHeight = document.getElementById('box2').value;
if (newWidth!=oldWidth || newHeight!=oldHeight){
calculate();
oldWidth = newWidth;
oldHeight = newHeight;
}
},400);
}

How to use multiple button for same function in javascript?

I am new in javascript. I want to create multiple button with same function and result will be shown in same place. From my code I want to change tip1 value for every button click event. How can I do this? Please help me if any one have any idea.
My codes are below:
<form id="calculator">
<p>Amount: <input id="amount" /></p>
<p>Years: <input id="year" /></p>
<hr />
<p>Tip: <input id="tip" disabled="disabled" /></p>
<p>Total: <input id="total" disabled="disabled" /></p>
<button onclick="calculate()" id="1">Button1</button>
<button onclick="calculate1()" id="2">Button2</button>
</form>
<script type="text/javascript">
function calculate () {
var amount = $('#amount').val();
var year = $('#year').val();
if (button 1) {
var tip1 = (1 + 115 / 100);
}
else if (button 2) {
var tip1 = (1 + 215 / 100);
}
var tip = Math.pow(tip1, year);
var total = amount * tip;
$('#tip').val( tip.toFixed(2) );
$('#total').val( total.toFixed(2) );
return false;
}
$('#calculator').submit( calculate );
</script>

You can do it like this:
function calculateF(target) {
var amount = parseFloat($('#amount').val());
var year = parseFloat($('#year').val());
if (target == 1) {
var tip1 = (1 + 115 / 100);
} else if (target == 2) {
var tip1 = (1 + 215 / 100);
}
var tip = Math.pow(tip1, year);
var total = amount * tip;
$('#tip').val(tip.toFixed(2));
$('#total').val(total.toFixed(2));
return false;
}
$('button').click(function(e) {
calculateF($(e.target).prop('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Amount: <input id="amount" /></p>
<p>Years: <input id="year" /></p>
<hr />
<p>Tip: <input id="tip" disabled="disabled" /></p>
<p>Total: <input id="total" disabled="disabled" /></p>
<button id="1">Button1</button>
<button id="2">Button2</button>

Also, by passing ID directly
function calculate (id) {
var amount = $('#amount').val();
var year = $('#year').val();
var tip1 = 0;
if (id == "1") {
tip1 = (1 + 115 / 100);
}
else if (id == "2") {
tip1 = (1 + 215 / 100);
}
var tip = Math.pow(tip1, year);
var total = amount * tip;
$('#tip').val( tip.toFixed(2) );
$('#total').val( total.toFixed(2) );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Amount: <input id="amount" /></p>
<p>Years: <input id="year" /></p>
<hr />
<p>Tip: <input id="tip" disabled="disabled" /></p>
<p>Total: <input id="total" disabled="disabled" /></p>
<button onclick="calculate(this.id)" id="1">Button1</button>
<button onclick="calculate(this.id)" id="2">Button2</button>

You are declaring var tip1 at wrong places.
Just Use this to call the function calculate(id).
$('button').click(function(e) {
calculate(this.id);
});
HTML
<form id="calculator">
<p>Amount: <input id="amount" /></p>
<p>Years: <input id="year" /></p>
<hr />
<p>Tip: <input id="tip" disabled="disabled" /></p>
<p>Total: <input id="total" disabled="disabled" /></p>
<button id="1">Button1</button>
<button id="2">Button2</button>
</form>
calculate() function
function calculate () {
var amount = $('#amount').val();
var year = $('#year').val();
var tip1;
if (id=="1") {
tip1 = (1 + 115 / 100);
}
else if (id=="2") {
tip1 = (1 + 215 / 100);
}
var tip = Math.pow(tip1, year);
var total = amount * tip;
$('#tip').val( tip.toFixed(2) );
$('#total').val( total.toFixed(2) );
return false;
}

How to check to make sure a radio button is selected

I have a form that I need to figure out the code on how to make sure a radio button is selected
Here is the form
<body>
<div id="content">
<p>Enter the values below and click "Calculate".</p>
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="answer">Answer:</label>
<input type="text" id="Answer" disabled="disabled" /><br />
<input type="radio" name="Area" value="Area" check="checked"/>Area<br />
<input type="radio" name="Parimeter" value="Parimeter" />Parimeter<br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</body>
</html>
here is the code
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var length = parseFloat( $("length").value );
var width = parseFloat( $("width").value );
// $("area").value = "";
if (isNaN(length) || length <= 0) {
alert("Length must be a valid number\nand greater than zero.");
} else if(isNaN(width) || width <= 0) {
alert("Width must be a valid number\nand greater than zero.");
}
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area.toFixed(2);
$("perimeter").value = perimeter.toFixed(2);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}

Here are some links that may help you finish your homework:
http://www.w3schools.com/html/html_forms.asp
http://www.w3schools.com/jquery/default.asp
http://jsfiddle.net