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>
Related
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 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 want to show dynamic select option.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- this will show when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<!-- this will show when bechelor is select -->
<div class="form-group " id="tenant">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="student">Student</option>
<option value="job_holder" >Job Holder</option>
</select>
</div>
This select option will store value in the same table name "tenant". But if use name="tenant" in two div, it's not storing the right value. So I think, if the options show dynamically then it should work. But how can I do that? Is there another solution?
I might do it like this instead, setting an array based on the selected button, and then populating the select element with that array, making sure to clear the select element each time.
function radio_click() {
// Get elements
var select = document.getElementById("select-occupant");
var apt = document.getElementById("type_apartment");
// Reset options
select.options.length = 0;
// Set option array based on selected
if (apt.checked == true) {
var options = {
ValueA : 'Anyone',
ValueB : 'Family',
ValueC : 'Bachelor'
};
} else {
var options = {
ValueA : 'Anyone',
ValueB : 'Student',
ValueC : 'Job Holder'
};
}
// Set options in select
for(index in options) {
select.options[select.options.length] = new Option(options[index], index);
}
}
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" checked=true onclick="radio_click()">
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type" onclick="radio_click()">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- this is the only one needed now -->
<div class="form-group ">
<select class="form-control" name="tenant" id="select-occupant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
presently stuck in situation. trying to create a form where one can dynamically add and remove div elements where necessary,so far have been a to DYNAMICALLY ADD, problem is if i try to REMOVE div,only the last created gets to delete whilst others remain(excluding the parent div)KINDLY ASSIST.
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="box">
<div id='div' style="background: #99CCFF; height: 100px; width:300px" >
<p>Degree Level: <select id="dropdown">
<option value="Doctorate Degree">Doctorate Degree</option>
<option value="Masters">Masters</option>
<option value="Bachelors Degree">Bachelors Degree</option>
<option value="SSCE">SSCE</option>
</select></p>
<label for="firstname">School Name</label>
<input type="text" placeholder="Your Role"">
<label for="from">From</label>
<input type="text" id="from" name="from">
<br>
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>
<div>
<button id="submit1">Add new div</button>
<input type="button" value="Remove Element"
onClick="removeElement('box','div');">
</div>
</body>
<script>
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
var counter = 1;
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
</script>
<script>
function removeElement(boxDiv, divDiv){
if (divDiv == boxDiv) {
alert("The parent div cannot be removed.");
}
else if (document.getElementById(divDiv)) {
var div = document.getElementById(divDiv);
var box = document.getElementById(boxDiv);
box.removeChild(div);
}
else {
alert("Child div has already been removed or does not exist.");
return false;
}
}
You are passing the string div to your remove element function which will only remove the first div.
You can find all the children elements and then remove the last child
Building on your previous code, see the snippet below
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
console.log(template);
var counter = 1;
submit1=document.getElementById("submit1");
submit1.onclick = function () {
var new_field = template.cloneNode(true);
new_field.id = new_field.id + counter++
console.log(new_field.id)
box.appendChild(new_field);
return false;
};
function removeElement(boxDiv){
var box = document.getElementById(boxDiv);
if(box.children){
console.log(box.children);
box.children[box.children.length-1].outerHTML="";
}
}
<div id="box">
<div id='div' style="background: #99CCFF; height: 100px; width:300px" >
<p>Degree Level: <select id="dropdown">
<option value="Doctorate Degree">Doctorate Degree</option>
<option value="Masters">Masters</option>
<option value="Bachelors Degree">Bachelors Degree</option>
<option value="SSCE">SSCE</option>
</select></p>
<label for="firstname">School Name</label>
<input type="text" placeholder="Your Role"">
<label for="from">From</label>
<input type="text" id="from" name="from">
<br>
<label for="to">to</label>
<input type="text" id="to" name="to">
</div>
</div>
<div>
<button id="submit1">Add new div</button>
<input type="button" value="Remove Element"
onClick="removeElement('box');">
</div>
It might be because js thinks you're only selecting the last one when doing
var div = document.getElementById(divDiv);
Try doing a loop until document.getElementById(divDiv) is undefined
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>