Update text box from drop down box - javascript

I am trying to calculate a total price based on what I select in a drop down menu; the product price can remain the same.
The code doesn't work for me for some reason, what am I doing wrong?
<title>Untitled Document</title>
<script type="text/jscript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$("#totalprice").val(total);
});
</script>
</head>
<body>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340"/>
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340"/>
</div>
</body>

The values from the select drop down and the input field you retrieve with javascript are strings. convert them to integers with parseInt() function:
var qty = parseInt($('#quantity').val());
var price = parseInt($('#productPrice').val());
or
var total = parseInt(price) * parseInt(qty);
Also, change the type of your script to text/javascript instead of text/jscript

You need to reference the jQuery library in your html.
Try the following
<title>Untitled Document</title>
<script type="text/jscript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$("#totalprice").val(total);
});
</script>
</head>
<body>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340"/>
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>
The rest looks file to me.
Thanks,
Paras
EDIT
Here is a snippet
$('#quantity').change(function() {
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$("#totalprice").val(total);
});
<body>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</body>

Related

if and else condition

I am making a conditional script with js; if I select the partial option, it does half the amount, but I have incorporated "else" code so, when I select complete option, it's not showing the whole amount.
Here is the code:
var qty1 = $('#payamount').val();
if (qty1 = 'Partial') {
$('#quantity').change(function() {
var qty2 = $('#quantity').val();
var qty3 = qty2 / 2;
$("#totalprice").val(qty3);
});
} else if (qty1 = 'Complete') {
$('#quantity').change(function() {
var qty2 = $('#quantity').val();
var qty3 = qty2;
$("#totalprice").val(qty3);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
<select id="payamount">
<option value="Partial">Partial</option>
<option value="Complete">Complete</option>
</select>
Quantity:
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
pay: Total: $
<input type="text" id="totalprice" value="" readonly/>
</div>
You need ONE event handler
$('#payamount').on("change", onchange)
$('#quantity').on("change", onchange).change(); // initialise
function onchange() {
var qty2 = $('#quantity').val();
var qty1 = $('#payamount').val();
var qty3 = qty2;
if (qty1 === 'Partial') {
qty3 /= 2;
}
$("#totalprice").val(qty3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
<select id="payamount">
<option value="Partial">Partial</option>
<option value="Complete">Complete</option>
</select>
Quantity:
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
pay: Total: $
<input type="text" id="totalprice" value="" readonly/>
</div>

Number precision change on select option

When I select option to 3 for example round number by 3 after comma. Can someone help me?
function LengthConverter(valNum) {
document.getElementById("outputMeters").innerHTML = (valNum * 1.8) + 32;
}
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)">
<td class="precision">Precision:
<select name="precision" id="opt" size="1" onchange="update()">
<option value="1">0</option>
<option value="10">1</option>
<option value="100">2</option>
<option selected="selected" value="1000">3</option>
<option value="10000">4</option>
<option value="100000">5</option>
<option value="1000000">6</option>
<option value="10000000">7</option>
<option value="100000000">8</option>
<option value="1000000000">9</option>
<option value="1000000000000">12</option>
<option value="1000000000000000">15</option>
<option value="1000000000000000000">18</option>
</select>
</td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>
toFixed() is your friend. It will also handle rounding. Though do note that it returns a string.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
See this helper function
function round(x, n) {
return parseFloat(Math.round(x * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
}
It is a combination of Math.round and toFixed() which fills up zeros.
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter()" onchange="LengthConverter()">
<td class="precision">Precision: <select name="precision" id="opt" size="1" onchange="LengthConverter()">
<option value="1">0</option>
<option value="10">1</option>
<option value="100">2</option>
<option selected="selected" value="1000">3</option>
<option value="10000">4</option>
<option value="100000">5</option>
<option value="1000000">6</option>
<option value="10000000">7</option>
<option value="100000000">8</option>
<option value="1000000000">9</option>
<option value="1000000000000">12</option>
<option value="1000000000000000">15</option>
<option value="1000000000000000000">18</option>
</select></td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>
<script>
function LengthConverter() {
var inputFeet = document.getElementById("inputFeet").value;
var opt = document.getElementById("opt").value.length;
document.getElementById("outputMeters").innerHTML = round((inputFeet * 1.8) + 32, --opt);
}
function round(x, n) {
return parseFloat(Math.round(x * Math.pow(10, n)) / Math.pow(10, n)).toFixed(n);
}
</script>
Your precision selector is calling an update function that isn't created, so you can get rid of the onchange="update()" . As people are saying use toFixed(), bellow is how you can implement it.
<p>
<label>Celsius</label>
<input autofocus id="inputFeet" type="number" placeholder="Celsius" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)">
<td class="precision">Precision: <select name="precision" id="opt" size="1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="18">18</option>
</select></td>
</p>
<p>Fahrenheit: <span id="outputMeters"></span></p>
<script>
function LengthConverter(valNum) {
var percision = percision = document.getElementById("opt").value
var fahrenheitValue = (valNum*1.8)+32;
var stringWithPercision = fahrenheitValue.toFixed(percision);
document.getElementById("outputMeters").innerHTML=stringWithPercision;
}
</script>
The toFixed() method converts a number into a string, keeping a specified number of decimals.
const n = 4.8768;
const res = n.toFixed(2); // res is a string
console.log(res);
console.log(typeof(res));
Celsius in Fahrenheit:
F = (C x 1.8) + 32
Add event listeners to the <input> (keyup) and to the <select></select> (change).
Example
let celsius = document.getElementById("celsius");
let precision = document.getElementById("precision");
let fahrenheit = document.getElementById("fahrenheit");
function celsiusToFahrenheit(val) {
// F = (C x 1.8) + 32
return (val * 1.8) + 32;
}
function getResult(precision, val) {
return celsiusToFahrenheit(val).toFixed(precision);
}
celsius.addEventListener("keyup", function() {
let selectedValue = precision.options[precision.selectedIndex].value;
fahrenheit.innerHTML = getResult(selectedValue, this.value);
})
precision.addEventListener("change", function() {
let selectedValue = this.options[this.selectedIndex].value;
if (celsius.value) {
fahrenheit.innerHTML = getResult(selectedValue, celsius.value);
}
})
<section>
<span>Celsius:</span><input id="celsius" type="text"><span>Precision:</span>
<select name="" id="precision">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
</select>
</section>
<section>
<span>Fahrenheit:</span><span id="fahrenheit"></span>
</section>

trying to calculate rates runtime using javascript and html5

here im trying to calculate rates of bus ticket on selection of seat
for that i did searched on internet then i found something relavant on stack but its not working
following is html something minor issue help me to get out of this rates are not getting calculate on selection of value
here is my js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$("#totalprice").val(total);
});
</script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340"/>
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340"/>
You may have a conflict in some other code that you have not posted (I closed your div, but not much else). Here is a working example that may help you troubleshoot.
$('#quantity').change(function() {
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$('#totalprice').val(total);
});
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use parseInt() to convert string to number
var qty =parseInt($('#quantity').val());
var price = parseInt($('#productPrice').val());
var total = price * qty;
$("#totalprice").val(total);
There is no problem with your code, but in its' order. The script code goes in your post above the elements inside the document. The running order in WEB is line by line, so when your script asking for $("#quantity") it gets an undefined as answer. All you need to do is to move your script to be after your document's elements.
Another solution can be creating of script file and use there with post initialize of the DOM elements- Something like this:
$(document).ready(function() { /* code here */ })
You can read more here: window.onload vs document.onload
See that the following code is perfect when the script tag is after the elements' initialize:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340"/>
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340"/>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$("#totalprice").val(total);
});
</script>

Add input boxes according to select value of Drop Down

I have a selectlist where you can choose a number 1 to 12. Depending on the choosen number I want the same number of input boxes to appear ready to use for $_POST. I can't get the onchange event to trigger any relevant Java?
Edit: I'm realy just fumbling with anything I get at this point:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.min.js"></script>
<script>
function getNPlayers(element) {
var element = document.createElement('input');
element.appendChild(document.createTextNode
('some text for testing'));
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<table>
<tr>
<td><select id="NPlayers" sel.onchange="getNPlayers(this)">
<option value="" disabled="disabled" selected="selected">Number of players</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></td>
<tr id="other_fields" style="display:none">
<td>
Players:<br>
<input type="tex" value=""/><br>
<input type="tex" value=""/><br>
<input type="tex" value=""/><br>
<input type="tex" value=""/><br>
</td>
</tr>
</tr>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Dynamic Textbox</title>
<script>
function generate(total,id){
var drpDown = document.getElementById(id);
for(i=0;i<total;i++){
var child = document.createElement("input");
child.id = "test"+i;
child.name = "test"+i;
drpDown.parentNode.insertBefore(child,drpDown);
}
}
</script>
</head>
<body>
<select id='test' onchange='generate(this.value,"test")'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</body>
</html>

Change Textbox value when an item is selected in drop down box

I'm trying to change the value of a text box with the the item I select from a drop down box. But it's not working.
I tried this HTML:
<select name="ncontacts" id="contacts" onchange="ChooseContact(this);">
</select>
and this JS:
function ChooseContact(data)
{
alert(data);
document.getElementById("friendName").value = data;
}
But the text box val is not updated.
This is because this (the argument to ChooseContact) refers to the select element itself, and not its value. You need to set the value of the friendName element to the value of the select element:
document.getElementById("friendName").value = data.value; //data is the element
Here's a working example.
I suggest you very simple method
$('#quantity').change(function(){
var qty = $('#quantity').val();
$("#totalprice").val(qty);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340"/>
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="1"/>
</div>

Categories