Create a button to call function cal() - javascript

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>

Related

autofill an html form input field with a javascript function

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.

Onchange refresh when adding a new item

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>

How to use different attribute on change the second select option

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>

Javascript Form validation not working for select element

So I'm trying to change a select box's style if the value is not changed ie. the user has not selected anything. That yesnoCheck is a function which shows an additional input field if the choice "other" is selected. I don't think it affects this form validation though. This same kind of validation works fine with an input field but it won't work with a select box.
I've also treid selectedIndex == 0 but it doesn't work either.
HTML:
<form name="myForm" method="post" action="" onsubmit="return(validate());">
<label for="lastname">Sukunimesi:</label>
<input type="text" id="lastname" name="lastname" /><br />
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
<input type="submit" value="Submit" />
</form>
JS:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById("yesCheck").selected) {
document.getElementById("ifYes").style.display = "block";
}
else document.getElementById("ifYes").style.display = "none";
}
function validate() {
if (document.myForm.lastname.value.length < 3) {
document.getElementById("lastname").className = "required";
return false;
}
if (document.myForm.car.value == "none") {
document.getElementById("car").className = "required";
return false;
}
alert ("Everything is fine!");
}
</script>
Your code works check your form name and make sure your form exists before the script is run.
function check(){
if (document.myForm.car.value == "none") {
document.getElementById("car").style.border = "1px solid #900";
document.getElementById("car").style.backgroundColor = "#ff9";
return false;
}
}
<form name="myForm">
<select id="car" name="car" onchange="javascript:yesnoCheck()">
<option id="noCheck" value="none">Valitse automerkkisi</option>
<option id="noCheck" value="1">Lada</option>
<option id="noCheck" value="2">Mosse</option>
<option id="noCheck" value="3">Volga</option>
<option id="noCheck" value="4">Vartburg</option>
<option id="yesCheck" value="other">Muu</option>
</select>
</form>
<button onclick="check()">Run script</button>
So the solution was to delete return false; from the function.

Execute function with value of current selected option

Even if i have selected an options it still alert a message "Please choose something."
I got this working with only one dropdown list, but i have problems when there are two or more.
(In working example variable sport is document.getElementById("sports") and only one dropdown list)
What's the issue?
<script type="text/javascript">
function check() {
sport = document.getElementsByClassName("sports");
sport_selected = sport.selectedIndex;
weight = document.getElementById("weight").value;
time = document.getElementById("time").value;
if (sport_selected > 0) {
if (isNaN(weight, time)) {
alert("Error. This is not a number.");
}
else {
met = sport.options[sport_selected].value;
calculations = (time * ((met * 3.5 * weight)/200));
result = Math.round(calculations);
document.lastform.output.value = result + " kcal";
}
}
else {
alert("Please choose something.")
}
});
</script>
<div id="tabs">
<ul>
<li>Running</li>
<li>Walking</li>
</ul>
<div id="tabs-1">
<form name="form1">
<select class="sports">
<option value="">-Choose-</option>
<option value="6">Jog/walk combination</option>
<option value="7">Jogging, general</option>
<option value="8">Running, 5 mph (12 min/miile)</option>
<option value="9">Running, 5.2 mph (11.5 min/mile)</option>
<option value="10">Running, 6 mph (10 min/mile)</option>
</select>
</form>
</div>
<div id="tabs-2">
<form name="form2">
<select class="sports">
<option value="">-Choose-</option>
<option value="2">Walking, general</option>
<option value="2">Walking, 1 mph</option>
</select>
</form>
</div>
</div>
<form name="lastform">
<label for="weight">Weight [kg]:</label><br />
<input type="text" size="3" id="weight"><br />
<label for="time">Duration [min]:</label><br />
<input type="text" size="3" id="time">
<input type="button" value="Calc" onClick="check()"><br /><br />
<label for="kcal">You have burned:</label><br />
<input type="text" id="output">
</form>
getElementsByClassName is returning a collection but not just one item, you need to write code to iterate the collection if you have more controls. please check: https://developer.mozilla.org/en/DOM/document.getElementsByClassName
What about using jQuery, since you've used the TAG ?
HTML
<div id="tabs">
<ul>
<li>Running</li>
<li>Walking</li>
</ul>
<div id="tabs-1">
<form name="form1">
<select class="sports">
<option value="">-Choose-</option>
<option value="6">Jog/walk combination</option>
<option value="7">Jogging, general</option>
<option value="8">Running, 5 mph (12 min/miile)</option>
<option value="9">Running, 5.2 mph (11.5 min/mile)</option>
<option value="10">Running, 6 mph (10 min/mile)</option>
</select>
</form>
</div>
<div id="tabs-2">
<form name="form2">
<select class="sports">
<option value="">-Choose-</option>
<option value="2">Walking, general</option>
<option value="2">Walking, 1 mph</option>
</select>
</form>
</div>
</div>
<form name="lastform">
<label for="weight">Weight [kg]:</label><br />
<input type="text" size="3" id="weight"><br />
<label for="time">Duration [min]:</label><br />
<input type="text" size="3" id="time">
<input type="button" value="Calc" id="check"><br /><br />
<label for="kcal">You have burned:</label><br />
<input id="result" type="text" id="output">
</form>
javascript
$("#check").click(function() {
var sport_selected = $(".sports option:selected").val();
var weight = $("#weight").val();
time = $("#time").val();
if (parseInt(sport_selected) > 0) {
if (isNaN(weight, time)) {
alert("Error. This is not a number.");
}
else {
var met = sport_selected
calculations = (time * ((met * 3.5 * weight) / 200));
result = Math.round(calculations);
$("#result").val(result + " kcal");
}
}
else {
alert("Please choose something.")
}
});​
and this is the fiddle.

Categories

Resources