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>

Simple js calculator with radio tag

I found subjects like mine but I could not fix my problem. So I wanted to calculate the cost of tickets form radio tags by multiplying the price with the amount of tickets using if statements for each option without jquery. I can not figure it out why I do not have an output. It looks like none of my functions work and I can not find why.
Can you help me please, I know it is easy but I am still a beginner
<!doctype html>
<html>
<head>
<title>No Boundaries</title>
<link rel="stylesheet" href="styles1.css">
<script type="text/javascript">
function validate(){
if(!document.form1.cond.checked)
{alert("Please accept the Terms and Conditions");
return false;
}
if(document.form1.name.value.length < 2)
{alert(“Please enter your full name, not just an initial”);
return false;
}
return true;
}
function cost() {
if (document.form1.accom["v"].checked) {
var amount = parseInt(document.form1.amount.value);
var ans = 90 * amount;
document.form1.total1.value = ans;
}
else if (document.form1.accom["t"].checked) {
var amount = parseInt(document.form1.amount.value);
var ans = 150 * amount;
document.form1.total1.value = ans;
}
else if (document.form1.accom["c"].checked) {
var amount = parseInt(document.form1.amount.value);
var ans = 45 * amount;
document.form1.total1.value = ans;
}
}
function post(){
if(document.form1.del["1"].checked){
var num = 0;
var ans = num;
document.form1.total2.value = ans;
}
if(document.form1.del["2"].checked){
var num = 12;
var ans = num;
document.form1.total2.value = ans;
}
if(document.form1.del["3"].checked){
var num = 16;
var ans = num;
document.form1.total2.value = ans;
}
if(document.form1.del["4"].checked){
var num = 20;
var ans = num;
document.form1.total2.value = ans;
}
}
function damage(){
var total1 = parseInt(document.form1.total1.value);
var total1 = parseInt(document.form1.total1.value);
var ans = total1 + total2;
document.form.total3.value = ans;
}
</script>
</head>
<body>
<section>
<form name="form1">
<fieldset>
<legend>Personal details</legend>
<div>
Please enter your full name<br>
<input name="name" type="text" required onsubmit="return validate();"><br>
</div>
<div>
Address<br>
<input name="addresss" type="text" required><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
</div>
<div>
Phone Number<br>
<input name="phone" type="tel"><br>
</div>
<div>
Email Address<br>
<input name="email" type="email" required><br>
</div>
<div>
Date of Birth<br>
<input name="birth" type="date"><br>
</div>
</fieldset>
<fieldset>
<legend>Ticket Details</legend>
<div>
Type of T<br>
<label for="vil">V</label>
<input type="radio" name="accom[]" value="v">
<label for="town">T</label>
<input type="radio" name="accom[]" value="t">
<label for="con">C</label>
<input type="radio" name="accom[]" value="c">
</div>
<div>
Quantity of T
<input name="amount" type="number" min="1" max="10" required><br>
<br>
<input type="button" name="cost" value="C C" onclick="cost();"><br>
</div>
<div>
Delivery Options<br>
<input type="radio" name="del[]" value="1" >Free<br>
<input type="radio" name="del[]" value="2" >£12<br>
<input type="radio" name="del[]" value="3" >£16<br>
<input type="radio" name="del[]" value="4" >£20<br>
<br>
<input type="button" value="C D" onclick="post();"><br>
</div>
</fieldset>
<fieldset>
<legend>Terms And Conditions</legend>
<input name="cond" type="checkbox" onsubmit="return validate();">
</fieldset>
<fieldset>
<legend>Cost</legend>
<input type="text" name="total1" readonly><br>
<input type="text" name="total2" readonly><br>
<input type="text" name="total3" readonly><br>
<br>
<input type="button" value="C F C" onclick="damage();"><br>
</fieldset>
<br><br>
<fieldset>
<input type="submit">
</fieldset>
</form>
</section>
</body>
</html>

the cost function should be something like this,
function cost() {
if (document.form1.accom.value.toLowerCase() == "v") {
var amount = parseInt(document.form1.amount.value);
var ans = 90 * amount;
document.form1.total1.value = ans;
} else if (document.form1.accom.value.toLowerCase() == "t") {
var amount = parseInt(document.form1.amount.value);
var ans = 150 * amount;
document.form1.total1.value = ans;
} else if (document.form1.accom.value.toLowerCase() == "c") {
var amount = parseInt(document.form1.amount.value);
var ans = 45 * amount;
document.form1.total1.value = ans;
}
}
And to make the code more refactored, make it like this,
function cost() {
var val = document.form1.accom.value.toLowerCase();
var amount = parseInt(document.form1.amount.value);
var ans;
if (val == "v") {
ans = 90 * amount;
} else if (val == "t") {
ans = 150 * amount;
} else if (val == "c") {
ans = 45 * amount;
}
document.form1.total1.value = ans;
}

Ok I found your errors. This is the code for html
<div>
Type of T<br>
<label for="vil">V</label>
<input type="radio" name="accom" value="v">
<label for="town">T</label>
<input type="radio" name="accom" value="t">
<label for="con">C</label>
</div>
<div>
Quantity of T
<input name="amount" type="number" min="1" max="10" required><br>
<br>
<input type="button" name="cost" value="C C" onclick="costs();"><br>
</div>
Next, in your javascript you have tho change the name of function; instead of cost you have to renaming in costs
function costs() {
if (document.form1.accom.value == 'v') {
var amount = parseInt(document.form1.amount.value);
var ans = 90 * amount;
document.form1.total1.value = ans;
}
else if (document.form1.accom.value == 't') {
var amount = parseInt(document.form1.amount.value);
var ans = 150 * amount;
document.form1.total1.value = ans;
}
else if (document.form1.a`enter code here`ccom.value == 'c') {
var amount = parseInt(document.form1.amount.value);
var ans = 45 * amount;
document.form1.total1.value = ans;
}
}
That's all

javascript: submit button pulls all values from the textboxes and displays them in a p tag

So what I am trying to do here is when the submit button is clicked pull all of the values from the textboxes and display them in a p tag that I have on my html page. I have been tring to figure this out for days. Can somebody let me know what I am doing wrong?
/* JavaScript */
$("#submit").click(function(){
var doc = $("#doctorate").val()
var Name = $("#first_name").val();
var Last = $("#last_name").val();
var T = Doc + " "+ Name + " " + Last
break
var Certs = $("#certs").val()
break
var Title = $("#title").val()
break
var Department = $("#department").val()
break
var Numb = $("#number").val()
break
var Web = $("#website").val()
break
var Ema = $("#email").val()
document.getElementById('output').innerHTML = T;
})
HTML unchanged

The big problem I see is that you keep assigning the same thing to your output. Try something like this (reduced for brevity):
function myOut() {
var output = document.getElementById("certs").value;
output = output + document.getElementById("title").value;
if (certs != null) {
document.getElementById("output").innerHTML = output;
}
}
<input type="text" id="certs" />
<input type="text" id="title" />
<p id="output"></p>
<button onclick="myOut()">
Sub
</button>

Here you can try this one.
var role = document.getElementById("role").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var doctorate = document.getElementById("doctorate").value;
var certs = document.getElementById("certs").value;
var title = document.getElementById("title").value;
var department = document.getElementById("department").value;
var number = document.getElementById("number").value;
var website = document.getElementById("website").value;
var email = document.getElementById("email").value;
var output = document.getElementById("output").value;
$("#submit").click(function(){
var N = $("#first_name").val();
var L = $("#last_name").val();
var T = N + " " + L;
if (doctorate.checked) {
document.getElementById('output').innerHTML = T;
}
if (first_name != null) {
document.getElementById('output').innerHTML = T;
}
if (last_name != null) {
document.getElementById('output').innerHTML = T;
}
if (certs != null) {
document.getElementById('output').innerHTML = T;
}
if (title != null) {
document.getElementById('output').innerHTML = T;
}
if (department != null) {
document.getElementById('output').innerHTML = T;
}
if (number != null) {
document.getElementById('output').innerHTML = T;
}
if (website != null) {
document.getElementById('output').innerHTML = T;
}
if (email != null) {
document.getElementById('output').innerHTML = T;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset id="role">
<legend>My Role</legend>
<label for="faculty">
<input type="radio" name="role" id="faculty" value="faculty" />
Faculty
</label>
<label for="staff">
<input type="radio" name="role" id="staff" value="staff" />
Staff
</label>
</fieldset>
<fieldset id="userinformation">
<legend>User Information</legend>
<label for="doctorate">
Doctorate?
<input type ="checkbox" id="doctorate" value="" />
</label>
<label>
First Name:
<input type="text" name="name" id="first_name" required />
</label>
<label>
Last Name:
<input type="text" name="name" id="last_name" required />
</label>
<label>
Certifications:
<input type="text" name="cert" id="certs" />
</label>
<label>
Title:
<input type="text" name="title" id="title" required />
</label>
<label>
Department:
<select id="department" required>
<option disabled selected value>-Select a Department-</option>
<option>School of Information Technology</option>
<option>Mathematics</option>
<option>English</option>
<option>History</option>
<option>Natural Sciences</option>
<option>Psychology</option>
<option>School of Health Sciences</option>
</select>
</label>
<label>
Primary Phone #:
<input type="tel" name="number" id="number" placeholder="444-123-1234" pattern="^\d{3}-\d{3}-\d{4}$"/>
</label>
<label>
Email:
<input type="email" name="email" id="email" placeholder="JDoe#example.com" required />
<span id="err3"></span>
</label>
<label>
Website:
<input type="text" name="website" id="website" placeholder="http//:www.example" pattern="https?://.+" />
</label>
</fieldset>
<fieldset id = "results">
<p id="output"></p>
</fieldset>
<fieldset id="submit_button">
<input type="button" id="submit" value="submit" />
</fieldset>

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