I have been browsing through similar questions but have found nothing that would fit the bill. I have three input / select fields and a working JS function to calculate the number. All I need now is to display it automatically upon the selection and number input.
function Calculate() {
var f1 = document.getElementById("item");
var field1 = parseInt(f1.options[f1.selectedIndex].value);
var f2 = document.getElementById("level");
var field2 = parseInt(f2.options[f2.selectedIndex].value);
var f3 = document.getElementById("number");
var field3 = parseInt(f3.value);
(field1 * field2 * field3) / 100;
}
<label for="item">Choose item:</label>
<select id="item" name="item" form="qForm" required>
<option value="empty"></option>
<option value="250">item1</option>
<option value="250">item2</option>
<option value="300">item3</option>
</select>
</br>
<label for="level">Choose level:</label>
<select id="level" name="level" form="qForm" required>
<option value="empty"></option>
<option value="100">lvl1</option>
<option value="120">lvl2</option>
<option value="140">lvl3</option>
</select>
</br>
<label for="number">Duration (hours):</label>
<input id="number" type="number" name="number" min="10" required>
</br>
<label for="price">Preliminary price (EUR):</label>
<input type="number" id="price" name="price" form="qForm" readonly value="Calculate()">
Can you help me, please, to find a way to display the JS function in the "number" input field automatically?
Thanks.
I tried the JS function with a button and alert() and it works just fine. However, I cannot make it appear in the input field as I hoped I would by assigning its value to the function.
You need to listen on change event on each of your 3 fields, and recalculate if something changed.
const f1 = document.getElementById("item");
const f2 = document.getElementById("level");
const f3 = document.getElementById("number");
const price = document.getElementById("price");
[f1,f2,f3].forEach(field=> field.addEventListener('change', Calculate));
function Calculate() {
try{
var field1 = parseInt(f1.options[f1.selectedIndex].value);
var field2 = parseInt(f2.options[f2.selectedIndex].value);
var field3 = parseInt(f3.value);
price.value = (field1 * field2 * field3) / 100;
}
catch(e){
console.log(e.message);
}
}
<label for="item">Choose item:</label>
<select id="item" name="item" form="qForm" required>
<option value="empty"></option>
<option value="250">item1</option>
<option value="250">item2</option>
<option value="300">item3</option>
</select>
</br>
<label for="level">Choose level:</label>
<select id="level" name="level" form="qForm" required>
<option value="empty"></option>
<option value="100">lvl1</option>
<option value="120">lvl2</option>
<option value="140">lvl3</option>
</select>
</br>
<label for="number">Duration (hours):</label>
<input id= "number" type="number" name="number" min="10" required>
</br>
<div>
<label for="price">Preliminary price (EUR):</label>
<input type="number" id="price" name="price" form="qForm" readonly value="Calculate()">
</div>
IMHO, I added a event listener "change" on each select input. When the 3 values are different than empty, I write the value :
let foo = document.getElementById("price");
let price = Calculate();
foo.value = price;
Of course, Calculate() will return the computed price.
Related
onchange works fine when selecting items from a datalist. The problem arises when I want to modify some element. Then they add another onchange and the modified text disappears once it is refreshed.
What should he do to save the modification when adding another onchange?
function information(ele){
var address1 = document.getElementsByClassName('test2');
for(var i=0; i<address1.length; i++){
if( ele.value == "test4"){
address1[i].value = "test5";
} else if (ele.value == "test6"){
address1[i].value = "test7";
} else if (ele.value == "test8"){
address1[i].value = "test9";
}
}
}
<div class="form grup information">
<lable for="dates-full.names"> Names full</lable>
<input name="dates-full.names" list="dates-full.names" type="text"
class="form grup test1" onchange="information(this)">
<datalist type="text" id="dates-full.names">
<option value="test4">
<option value="test6">
<option value="test8">
</datalist>
</div>
<div class="form grup test2">
<lable for="power-full.adress"> Adress full</lable>
<input id="test2" name="dates-full.adress" list="dates-full.adress" type="text"
class="form grup test2">
<datalist type="text" id="dates-full.adress">
<option value="test5">
<option value="test7">
<option value="test9">
</datalist>
</div>
I'm trying to change the value of my input box by changing two different select options.
The first select box is product_type with two different data attributes on the options: data-price and data-price_c.
The second Select box pay_type is to selecting between data-price or data-price_c, to update the value of lprice.
This is what I've tried:
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var selected_type = pt.options[pt.selectedIndex];
sp.onchange = function(){
var selected = sp.options[sp.selectedIndex];
if (selected_type === 1){
lp.value = selected.getAttribute('data-price');
} else {
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
};
sp.onchange();
count.onchange = function(){
fp.value = lp.value * count.value;
}
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" onchange="update();">
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>
I hope I understated you correctly what needs to be done from code and explanation:
Your first problem was that you had your selected_type outside of you onchange function so it wasn't getting the changed options onchange.
Second is that you where trying to compare values 1 & 2 with element without actually extracting those values from element (missing .value on selected_type)
I assumed you will need to update the values on your Pay type change too as well as Select Product, so there is nit trick to wrap both HTML selects into one div in this case div id="wrapper" and that will listen on both selects and call function if any of them are changed. So now you call it on wrapper.onchange.
I would also advise to put your calculation fp.value = lp.value * count.value; inside this function to update total price on change of any of those elements so I wrapped your Count: into wrapper div.
Hope this helps.
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
<div id="wrapper">
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" >
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>
Im trying to get this code to run with only plain JS.
When the user selects 'Other' I want my input field to show but only when they select 'Other'.
Ive hidden the input so its not displayed before its called.
I set a listener on the select field
Created the if/else statement looking for the value of the select field and set that to the value of other.
What am I missing here?
const select = document.getElementById('title');
let textField = document.getElementById('other-title').style.display = "none";
//This sets the focus on the first input field
function setFocusToTextBox(){
document.getElementById("name").focus();
}
setFocusToTextBox();
select.addEventListener("change", function() {
if(select.value === 'other') {
textField.style.display = "block";
} else {
textField.style.display = "none";
}
});
<fieldset>
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name" placeholder="Enter Your Full Name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">
<label for="title">Job Role</label>
<select id="title" name="user-title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
<label for="other-title">Other Title</label>
<input type="text" id="other-title" name="job_role_other" placeholder="Your Job Role">
</fieldset>
The problem is here:
let textField = document.getElementById('other-title').style.display = "none"
You are assigning textField string value "none".
Do this instead:
let textField = document.getElementById('other-title');
document.getElementById('other-title').style.display = "none";
This works:
const select = document.getElementById('title');
var textField = document.getElementById('other-title');
var otherTitleLabel = document.getElementById('other-title-label');
//This sets the focus on the first input field
document.getElementById('other-title').style.display = "none";
otherTitleLabel.textContent="";
function setFocusToTextBox(){
document.getElementById("name").focus();
}
setFocusToTextBox();
select.addEventListener("change", function() {
if(select.value === 'other') {
textField.style.display = "block";
} else {
textField.style.display = "none";
otherTitleLabel.textContent="";
}
});
<fieldset>
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name" placeholder="Enter Your Full Name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user-email" placeholder="Enter Valid Email">
<label for="title">Job Role</label>
<select id="title" name="user-title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
<label for="other-title" id="other-title-label">Other Title</label>
<input type="text" id="other-title" name="job_role_other" placeholder="Your Job Role">
</fieldset>
I need to do comparing string because I need to have calculation. The string from select option in HTML and another will be the variable string.
This is my HTML Code:
<label>Freight Cost Mode</label>
<select class="form-control" id="freightcostmode_insert" name="freightCostMode_insert" onchange="val()">
<option>Percentage</option>
<option>Monetary</option>
</select>
<input class="form-control" id="freightcost_insert" type="text" placeholder="Freight Cost Mode" name="freightCost_insert" onkeyup="val()">
<input type="text" class="form-control" id="freight">
This is my javascript code:
<script>
function val() {
var input = document.getElementById("freightcostmode_insert").value;
var calculation = document.getElementById("freightCost_insert").value;
if(inputing == "Percentage"){
document.getElementById('freight').value = calculation*1.5;
}if else(inputing == 'Monetary'){
}
}
</script>
For first your inputing variable does not exist - maybe input.
For second parse the calculation value into a number.
Also you have some syntax errors in your code.
function val() {
var input = document.getElementById("freightcostmode_insert").value;
var calculation = document.getElementById("freightcost_insert").value;
if(input == "Percentage"){
document.getElementById('freight').value = parseInt(calculation) * 1.5;
} else if(input == 'Monetary'){
}
}
<label>Freight Cost Mode</label>
<select class="form-control" id="freightcostmode_insert" name="freightCostMode_insert" onchange="val()">
<option>Percentage</option>
<option>Monetary</option>
</select>
<input class="form-control" id="freightcost_insert" type="text" placeholder="Freight Cost Mode" name="freightCost_insert" onkeyup="val()">
<input type="text" class="form-control" id="freight">
Working Code
function val() {
var input = document.getElementById("freightcostmode_insert").value,
calculation = document.getElementById("freightcost_insert").value
document.getElementById('freight').value = input === "Percentage" ?
calculation * 1.5 : calculation * 2.5;
}
<label>Freight Cost Mode</label>
<select class="form-control" id="freightcostmode_insert" name="freightCostMode_insert" onchange="val()">
<option>Percentage</option>
<option>Monetary</option>
</select>
<input class="form-control" id="freightcost_insert" type="text" placeholder="Freight Cost Mode" name="freightCost_insert" onkeyup="val()">
<input type="text" class="form-control" id="freight">
I created a form with cal() in it, so people can choose options and then it would calculate the answer depending on what they have chosen.
But I would like to insert a button at the end that would call the result. So when people have chosen their options they would click the submit button and it would give them the right answer depending on their choice.
I haven't been able to do it. I tried an input type button but I don't know how to call the rest.
Here's my code:
<script>
function cal() {
var pl = document.form1.template.value;
var resultat = pl;
document.form1.tresultat.value = resultat;
document.formfin.tresultatfin.value = calfin();
}
function cal2() {
var pl2 = document.form2.envoi.value;
var resultat2 = pl2;
document.form2.tresultat2.value = resultat2;
document.formfin.tresultatfin.value = calfin();
}
function cal3() {
var pl3 = document.form3.article.value;
var tl3 = document.form3.ecrit.value;
var resultat3 = pl3*tl3;
document.form3.tresultat3.value = resultat3;
document.formfin.tresultatfin.value = calfin();
}
function calfin() {
var r1 = form1.tresultat.value;
var r2 = form2.tresultat2.value;
var r3 = form3.tresultat3.value;
return (parseFloat(r1)+(parseFloat(r2)*parseFloat(r3)));
}
</script>
<form name="form1">
<label for="template">Template :</label>
<select name="template" onChange="cal()">
<option value="500">Yes
<option value="800">No
<option value="2900">Maybe
</select>
<input type="hidden" value="0" name="tresultat">
</form>
<br><br><br>
<form name="form2">
<label for="envoi">Quantité d'envoi annuel :</label>
<select name="envoi" onChange="cal2()">
<option value="2">2
<option value="3,6">4
<option value="5,1">6
<option value="6,4">8
<option value="9">12
</select>
<input type="hidden" value="0" name="tresultat2">
</form>
<br><br><br>
<form name="form3">
<label for="article">Articles par infolettre :</label>
<select name="article" onChange="cal3()">
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<label for="ecriture"> Écriture des articles :</label>
<select name="ecrit" onChange="cal3()">
<option value="50">X
<option value="300">Y
<option value="200">Z
</select>
<input type="hidden" value="0" name="tresultat3">
<br><br><br>
<form name="formfin">
<label for="total"> Total :</label>
<input type="text" value="0" name="tresultatfin">
</form>
All my functions seem to work. They calculate what I want, only the button that would call the answer is missing.
Thanks a lot for any help!
Just add a button in your form
<form name="formfin">
<label for="total"> Total :</label>
<input type="text" value="0" name="tresultatfin">
**<input type="button" onclick="cal()" value="Calculer" />**
</form>