Calculate between two value of selected dropdown?

Calculate between two value of selected dropdown? - javascript

How to calculate value from two selected drop down and show up in text box?
And also i would like to calculate auto not buy click on button..
Html code
Insurance :
<select class="form-control" name="insurance" onchange="calcVals()" id="insurance">
<option disabled="" selected="" ></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
Manpower:
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
Textbox :
<input name="totalAmount" id="totalAmount" type="text" readonly>
javascript:
function calcVals() {
var e = document.getElementById("manpower");
var selFrst = e.options[e.selectedIndex].text;
var f = document.getElementById("insurance");
var selScnd = f.options[f.selectedIndex].text;
var totalCal = selFrst + selScnd;
document.getElementById("totalAmount").value = totalCal;
}

Firstly, add id="insurance" to the insurance select
Secondly, you want the value, if you want to add the values
function calcVals() {
var e = document.getElementById("manpower");
var f = document.getElementById("insurance");
var selFrst = e.options[e.selectedIndex].value;
var selScnd = f.options[f.selectedIndex].value;
var totalCal = +selFrst + +selScnd;
document.getElementById("totalAmount").value = totalCal;
}
<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
Manpower:
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
Textbox :
<input name="totalAmount" id="totalAmount" type="text" readonly>

Try with below you are missing somethings and we have to use parseInt to convert string to integer.
function calcVals() {
var e = document.getElementById("manpower");
var selFrst = e.options[e.selectedIndex].value;
var f = document.getElementById("insurance");
var selScnd = f.options[f.selectedIndex].value;
var totalCal = parseInt(selFrst) + parseInt(selScnd);
document.getElementById("totalAmount").value = totalCal;
}
<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">
<option disabled="" selected="" ></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
<input name="totalAmount" id="totalAmount" type="text" readonly>

there are no selecter of id "insurance" so you have to use "getElementsByName" instead of getElementsById.
please try this code:
<select class="form-control" name="insurance" id="insurance" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="200">Yes</option>
<option value="0">No </option>
</select>
Manpower:
<select class="form-control" name="manpower" id="manpower" onchange="calcVals()">
<option disabled="" selected=""></option>
<option value="150">1</option>
<option value="300">2</option>
<option value="450">3</option>
<option value="600">4</option>
<option value="750">5</option>
</select>
Textbox :
<input name="totalAmount" id="totalAmount" type="text" readonly>
<script>
function calcVals() {
var e = document.getElementById("manpower");
var selFrst = e[0].value;
var f = document.getElementsByName("insurance");
var selScnd = f[0].value;
var totalCal = parseInt(selFrst) + parseInt(selScnd);
document.getElementById("totalAmount").value = totalCal;
}
</script>

Related

Several issues in a page's javascript I'm trying to build, ignoring "If" statement and equation not working, VSCode not giving any errors

I'm very new to javascript as you may be able to tell, I'm trying to create a function that will replace a piece of text with either 1 value or the result of an equation based on what is selected via a dropdown menu. I don't know if I'm just being dense and it's something small I messed up or if it's something more complex that I'm missing.
Thank you in advance for any assistance.
<!DOCTYPE html>
<html>
<body>
<label for="gval">G Value:</label>
<input type="text" id="gval" name="gval">
<label for="sval">S Value:</label>
<input type="text" id="sval" name="sval">
<label for="bval">B Value:</label>
<input type="text" id="bval" name="bval">
<label for="dval">D Value:</label>
<input type="text" id="dval" name="dval">
<select id="Level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<span Id="HPVAL">640-247</span>
<script>
var e = document.getElementById("Level");
function onChange() {
var Result = BVALUE+GVALUE*((LVALUE-1)*((0.66+(SVALUE/100-0.05))+((1-(0.66+(SVALUE/100-0.05)))/17)*(LVALUE-1)))
var LVALUE = e.value;
var text = e.options[e.selectedIndex].text;
var HPVALVAR = document.getElementById('HPVAL');
var SVALUE = document.getElementById('sval').value;
var GVALUE = document.getElementById('gval').value;
var BVALUE = document.getElementById('bval').value;
var DVALUE = document.getElementById('dval').value;
const span = (HPVALVAR);
if (LVALUE="default") {
span.innerHTML = DVALUE;
}
else {
span.innerHTML = Result;
}
}
e.onchange = onChange;
onChange();
</script>
</body>
</html>
The way it is meant to function:
it shows a default value you choose an option from the dropdown if the option is the default then it goes back to whatever the default text is supposed to be (I'm not sure how to store values away for later yet so I just have it connected to a text box which I manually enter the info into)
if you choose a value that isn't the default it runs an equation based on values in the other boxes and the value of the current dropdown option, it then replaces the span text with the results of that equation.

You should use == for value or === for type and value comparison.
= is an assignment operator and returns true in if statement.
You can read more about it in the official doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators
<!DOCTYPE html>
<html>
<body>
<label for="gValue">G Value:</label>
<input type="text" id="gValue" name="gValue"><br/>
<label for="sValue">S Value:</label>
<input type="text" id="sValue" name="sValue"><br/>
<label for="bValue">B Value:</label>
<input type="text" id="bValue" name="bValue"><br/>
<label for="dValue">D Value:</label>
<input type="text" id="dValue" name="dValue"><br/>
<select id="level">
<option value="default" selected>1-18</option>
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
<option value="4">Level 4</option>
<option value="5">Level 5</option>
<option value="6">Level 6</option>
<option value="7">Level 7</option>
<option value="8">Level 8</option>
<option value="9">Level 9</option>
<option value="10">Level 10</option>
<option value="11">Level 11</option>
<option value="12">Level 12</option>
<option value="13">Level 13</option>
<option value="14">Level 14</option>
<option value="15">Level 15</option>
<option value="16">Level 16</option>
<option value="17">Level 17</option>
<option value="18">Level 18</option>
</select>
<br/>
<p>RESULT: <b><span id="hpValue">640-247</span></b></p>
<script>
var levelElement = document.getElementById("level");
level.addEventListener('change',
function(e) {
var levelValue = levelElement.value;
var levelText = levelElement.options[levelElement.selectedIndex].text;
var hpElem = document.getElementById('hpValue');
var gValue = document.getElementById('gValue').value;
var sValue = document.getElementById('sValue').value;
var bValue = document.getElementById('bValue').value;
var dValue = document.getElementById('dValue').value;
var result = bValue + gValue * ((levelValue - 1) * ((0.66 + (sValue / 100 - 0.05)) + ((1 - (0.66 + (sValue / 100 - 0.05))) / 17) * (levelValue - 1)))
levelValue == "default" ? hpElem.textContent = dValue : hpElem.textContent = result;
})
</script>
</body>
</html>

How to reference a selector in JQuery for select tag when there are multiple dropdown fields in a single form?

I have 4 choice fields in a single form. My jQuery code only captures one field. How can I capture the other fields and extract their values?
Also, I have applied the Select2 plugin on all these fields. Can someone please guide me? Thanks in advance.
$('select').change(function() {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
var textSelected = optionSelected.text();
var csr = $("input[name=csrfmiddlewaretoken]").val();
console.log(textSelected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
<option value="" selected>---------</option>
<option value="8">jfkdfkldlfd</option>
</select>
<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
<option value="" selected>---------</option>
<option value="1">fefafd</option>
<option value="2">effeafaefe</option>
</select>
<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
<option value="" selected>---------</option>
<option value="1">fdfef</option>
</select>
<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
<option value="" selected>---------</option>
<option value="1">kflkdjkf</option>
<option value="2">fldfjdfj</option>
</select>

To get the selected text of all the select elements you can use map() to build an array of them, like this:
let getSelectedText = () => {
let textArr = $selects.map((i, el) => $(el).find('option:selected').text()).get();
console.log(textArr);
}
let $selects = $('select').on('change', getSelectedText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<label for="id_package_form-patient">Patient:</label>
<select name="package_form-patient" required id="id_package_form-patient">
<option value="" selected>---------</option>
<option value="8">jfkdfkldlfd</option>
</select>
<label for="id_package_form-diagnosis">Diagnosis:</label>
<select name="package_form-diagnosis" required id="id_package_form-diagnosis">
<option value="" selected>---------</option>
<option value="1">fefafd</option>
<option value="2">effeafaefe</option>
</select>
<label for="id_package_form-treatment">Treatment:</label>
<select name="package_form-treatment" required id="id_package_form-treatment">
<option value="" selected>---------</option>
<option value="1">fdfef</option>
</select>
<label for="id_package_form-patient_type">Patient type:</label>
<select name="package_form-patient_type" required id="id_package_form-patient_type">
<option value="" selected>---------</option>
<option value="1">kflkdjkf</option>
<option value="2">fldfjdfj</option>
</select>

how to use a javascript variable inside html tag

I have a form in this There are two field One is Search and other is Option When i select any value from Search field the value of Option field will change.Value of Second field are different datalist defines as datalist1,datalist2,datalist3.....I want the value given in List attribute of Second filed to be same as the variable value in java script.i Tried the following code this code is not giving any output.
function random() {
var a = document.getElementById('search').value;
if (a === "sampleid") {
var datalist = datalist1;
} else if (a === "facility") {
var datalist = datalist1;
} else if (a === "user") {
var datalist = datalist3;
} else if (a === "affiliation") {
var datalist = datalist4;
} else if (a === "status") {
var datalist = datalist5;
} else if (a === "btr") {
var datalist = datalist6;
} else if (a === "type") {
var datalist = datalist7;
}
document.getElementById('option').innerHTML = datalist;
}
<form class="form-inline" method="post" action="search-sample.php">
<div class="col-md-5" align="center">
<label class="search">SEARCH BY-</label>
<select type="text" name="SEARCH" id="search" class="form-control" onchange="random()">
<option value="SELECT TYPE">SELECT TYPE</option>
<option value="sampleid">SAMPLE-ID</option>
<option value="facility">FACILITY</option>
<option value="user">USER NAME</option>
<option value="affiliation">AFFILIATION</option>
<option value="status">STATUS</option>
<option value="btr">BTR</option>
<option value="type">SAMPLE TYPE</option>
<option value="date">DATE</option>
</select>
</div>
<div class="col-md-5" align="center">
<label class="search">OPTION</label>
<input type="text" class="form-control" id="option" name="facility" list=< ?php echo "datalist" ?> />
</div>
<datalist id="datalist1">
<option value=""> </option>
<?php
$sql = "SELECT * from tblfacility order by sampleid asc";
$query = $dbh -> prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $result)
{ ?>
<option value="<?php echo htmlentities($result->sampleid);?>"><?php echo htmlentities($result->sampleid);?></option>
<?php }} ?>
</datalist>

Here is what you need to do.
Use quotes around the IDs of the datalists
Use setAttribute of the list attribute of the input
function random() {
var a = document.getElementById('search').value,
datalist = "datalist1";
if (a === "sampleid") {
datalist = "datalist1";
} else if (a === "facility") {
datalist = "datalist1";
} else if (a === "user") {
datalist = "datalist2";
} else if (a === "affiliation") {
datalist = "datalist3";
} else if (a === "status") {
datalist = "datalist1";
} else if (a === "btr") {
datalist = "datalist2";
} else if (a === "type") {
datalist = "datalist3";
}
const inp = document.getElementById('option');
inp.value="";
inp.setAttribute("list", datalist)
}
<form class="form-inline" method="post" action="search-sample.php">
<div class="col-md-5" align="center">
<label class="search">SEARCH BY-</label>
<select type="text" name="SEARCH" id="search" class="form-control" onchange="random()">
<option value="SELECT TYPE">SELECT TYPE</option>
<option value="sampleid">SAMPLE-ID</option>
<option value="facility">FACILITY</option>
<option value="user">USER NAME</option>
<option value="affiliation">AFFILIATION</option>
<option value="status">STATUS</option>
<option value="btr">BTR</option>
<option value="type">SAMPLE TYPE</option>
<option value="date">DATE</option>
</select>
</div>
<div class="col-md-5" align="center">
<label class="search">OPTION</label>
<input type="text" class="form-control" id="option" name="facility" list="" />
</div>
<datalist id="datalist1">
<option value="A"> </option>
<option value="B"> </option>
<option value="C"> </option>
<option value="D"> </option>
</datalist>
<datalist id="datalist2">
<option value="AA"> </option>
<option value="BB"> </option>
<option value="CC"> </option>
<option value="DD"> </option>
</datalist>
<datalist id="datalist3">
<option value="AAA"> </option>
<option value="BBB"> </option>
<option value="CCC"> </option>
<option value="DDD"> </option>
</datalist>
</form>

I think what you're trying to do is assign a datalist to the "option" input based on the selected value in the select element, something like the following cut–down version of the OP:
// Select is a reference to the select element and
// is passed from the listener
function random(select) {
// Map select value to id of list to display
let map = {'sampleid': 'datalist1',
'facility': 'datalist2',
'user': 'datalist3'
};
// Get the option input
let option = document.getElementById('option');
// Clear the value
option.value = '';
// Assign the appropriate list
option.setAttribute('list', map[select.value]);
}
<form>
<label>SEARCH BY-</label>
<select name="SEARCH" id="search" onchange="random(this)">
<option value="SELECT TYPE">SELECT TYPE</option>
<option value="sampleid">SAMPLE-ID</option>
<option value="facility">FACILITY</option>
<option value="user">USER</option>
</select>
<!-- opton input to display options -->
<input list="" id="option" name="option">
<!-- datalists of options -->
<datalist id="datalist1">
<option value="datalist1 A">
<option value="datalist1 B">
<option value="datalist1 C">
</datalist>
<datalist id="datalist2">
<option value="datalist2 AA">
<option value="datalist2 BB">
<option value="datalist2 CC">
</datalist>
<datalist id="datalist3">
<option value="datalist3 AAA">
<option value="datalist3 BBB">
<option value="datalist3 CCC">
</datalist>
</form>
You should probably also disable the input if the selected value is the first one (i.e. select.selectedIndex = 0).

Use value instead of innerHTML.
document.getElementById('option').value= datalist;

Make 2 <select> statements work and dont crash the script

Im putting multiples select in my code that are hidden and got a principal select that makes visible the other selec depending in the value selected, but when you choose a value in the second select it changes the second visible select to another, how can I prevent that to happen
Its a catalog in a static html that interacts with a SQL Server via php, so I need the select to compare it with the ID´s and make inserts and updates
This is the script:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
function myFuction(){
//Getting Value
//var selValue = document.getElementById("singleSelectDD").value;
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
document.getElementById("valorsel").value = selValue;
}
</script>
And this are the examples:
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada>
<option value="" selected></option>
<option value="1">AREA 1</option>
<option value="2">AREA 2</option>
<option value="3">AREA 3</option>
</select>
I want to be able of having both select on screen to insert or update the information

Instead of having $("select").change(function(){, it's better that you have $("#MENU").change(function() { because otherwise it will detect all the select menus that are changing instead of just the first one like you want.
$(document).ready(function() {
$("#MENU").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else {
$(".box").hide();
}
});
}).change();
});
function myFuction() {
var selObj = document.getElementById("MENU");
var selValue = selObj.options[selObj.selectedIndex].value;
//Setting Value
//document.getElementById("valorsel").value = selValue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select name="MENU" id="MENU" onchange="myFuction()">
<option value="" selected></option>
<option value="1">Area</option>
<option value="2">Bancos</option>
<option value="3">CFDI</option>
<option value="4">Departamentos</option>
<option value="5">Empresa</option>
<option value="6">Giro Comercial</option>
<option value="7">Negocio</option>
</select><br><br>
<p>Texto Global</p>
<input type="text" name="GLOBAL" id="GLOBAL" value="" placeholder="Texto global">
</div>
<div class="1 box">
<p>Seleccione el Area deseada</p>
<input type="text" name="Txt_Area" id="Txt_Area" value="" placeholder="AREA">
<select name="AREA" id="AREA" placeholder="Seleccione Area deseada">
<option value=" " selected></option>
<option value="1 ">AREA 1</option>
<option value="2 ">AREA 2</option>
<option value="3 ">AREA 3</option>
</select>

Adding the values of form elements

I'm having a difficulty adding form elements together. If you could check out my code and fill me in on what I'm doing wrong, I'd greatly appreciate it. Here is a jsFiddle link of the code also: http://jsfiddle.net/jaruesink/6Z6hz/1/embedded/result/
<html><head><script src="http://code.jquery.com/jquery-latest.js">
</script></head><body>
<h1>How Much?</h1>
<form id="quickcalc">
Softcover Only<br>
<select id="SoftcoverOnly">
<option value="0" selected>Select Package</option>
<option value="360">Level A ($360)</option>
<option value="440">Level B ($440)</option>
<option value="495">Level C ($495)</option>
<option value="790">Level D ($790)</option>
<option value="1100">Level E ($1,110)</option>
<option value="1390">Level F ($1,390)</option>
<option value="1950">Level G ($1,950)</option>
</select><br><br>
Hardcover Only<br>
<select id="HardcoverOnly">
<option value="0" selected>Select Package</option>
<option value="430">Level A ($430)</option>
<option value="495">Level B ($495)</option>
<option value="650">Level C ($650)</option>
<option value="950">Level D ($950)</option>
<option value="1300">Level E ($1,300)</option>
<option value="1575">Level F ($1,575)</option>
<option value="2100">Level G ($2,100)</option>
</select><br><br>
Combo Hard/Soft<br>
<select id="ComboHard/Soft">
<option value="0" selected>Select Package</option>
<option value="590">Level A ($590)</option>
<option value="685">Level B ($685)</option>
<option value="825">Level C ($825)</option>
<option value="1050">Level D ($1,050)</option>
<option value="1375">Level E ($1,375)</option>
<option value="1650">Level F ($1,650)</option>
<option value="2225">Level G ($2,225)</option>
</select><br><br>
Additional Services<br>
<select id="AdditionalServices" multiple size="3">
<option value="0" disabled>Ctrl+Click for Multiple</option>
<option value="100">Warehouseing ($100)</option>
<option value="75">Amazon Backup ($75)</option>
<option value="250">PR Writing ($250)</option>
<option value="75">Ingram Advance ($75)</option>
<option value="30">TOC Creation ($30)</option>
<option value="75">Index Creation ($75)</option>
<option value="50">Printed Galley ($50)</option>
<option value="65">Ebook Package ($65)</option>
<option value="30">Casebinding ($30)</option>
<option value="40">Dustjacket ($40)</option>
</select><br><br>
Marketing Packages<br>
<select id="MarketingPackages">
<option value="0" selected>Select Package</option>
<option value="400">Bronze ($400)</option>
<option value="700">Silver ($700)</option>
<option value="1300">Gold ($1300)</option>
</select><br><br>
Your Total:<br>
<input type="text" readonly id="totalPrice" value="">
</form>
<div></div>
<script>
$("#quickcalc").change(function () {
var total = "";
$("#quickcalc option:selected").each(
function(){total += parseInt($(this).val())}
);
$("#totalPrice").val("$"+total);
}).change();
</script>
</body></html>

Try starting off with var total = 0;
http://jsfiddle.net/6Z6hz/2/

You're still concatenating strings. Change total=""; to total=0;

Try var total = 0;
instead of var total = "";
You must have an integer, but you now have a string!

Develop Reference

JavaScript is the programming language of the Web.

Calculate between two value of selected dropdown? - javascript

Related

Several issues in a page's javascript I'm trying to build, ignoring "If" statement and equation not working, VSCode not giving any errors

How to reference a selector in JQuery for select tag when there are multiple dropdown fields in a single form?

how to use a javascript variable inside html tag

Make 2 <select> statements work and dont crash the script

Adding the values of form elements

Categories

Resources