I am trying to create a simple website that calculates weight-based doses for pediatric medications. This is done by multiplying the dose per kilogram of a user-selected medication from a drop-down box by the user input of a text box. There is a second drop-down that contains the kilogram or pound options. kilogram value would be 1 and pound would be 2.2. So these three values together would be multiplied and the total would append to a readonly text box. I have been studying JS for weeks and still struggling with the most basic of projects. Any guidance would be appreciated.
HTML:
<div id="medications">
<select for="dropdown" id="medication">Select Medication
<option value="NaN">Select Medication</option>
<option value=".2">Adenosine .2mg/kg</option>
<option value=".15">Albuterol .15mg/kg</option>
<option value="5">Aminophylline 5mg/kg</option>
<option value="5">Amiodarone 5mg/kg</option>
<option value="5">Aspirin 5mg/kg</option>
<option value=".1">Ativan .1mg/kg</option>
<option value=".02">Atropine .02mg/kg</option>
<option value=".5">Atrovent .5mg/kg</option>
<option value="1">Benadryl 1mg/kg</option>
<option value=".01">Brethine .01mg/kg</option>
<option value="4">Dextrose 10% 4ml/kg</option>
<option value=".01">Epinephrine 1/10 .01mg/kg</option>
<option value=".01">Epinephrine 1/1 .01mg/kg</option>
<option value="1">Fentanyl 1mcg/kg</option>
<option value="1">Ketamine 1mg/kg</option>
<option value="1">Labetalol 1mg/kg/hr</option>
<option value="2">Levophed 2mcg/kg/min</option>
<option value="1">Lidocaine 1mg/kg</option>
<option value="50">Magnesium Sulfate 50mg/kg</option>
<option value=".1">Morphine .1mg/kg</option>
<option value="2">Narcan 2mg</option>
<option value=".25">Pepcid .25mg/kg</option>
<option value="1">Rocuronium 1mg/kg</option>
<option value="1">Sodium Bicarb 1mEq/kg</option>
<option value="1">Solu-Medrol 1mg/kg</option>
<option value=".5">Toradol .5mg/kg</option>
<option value=".1">Versed .1mg/kg</option>
<option value=".15">Zofran .15mg/kg</option>
</select>
</div>
<div id="weight">
<input id="number" type="text" placeholder="Weight" min="1" max="100">
<select for="dropdown" id="weightType">
<option value="1">Kg</option>
<option value="2.2">Lb</option>
</select>
</div>
<div id="totalDose">
<input id="dose" name="dose" type="text" READONLY placeholder="Dose">
</div>
There needs to be a point in time where the calculation should happen. That point in time corresponds to some action that the user will take and will be in the form of an "event".
Below, I've added a button for the user to "click" (which will be the event) that triggers the calculation.
See the inline comments for more details.
// Get reference to the output area (no need to input element - just populate the div) and the other elements
const output = document.querySelector("#totalDose");
const med = document.querySelector("#med");
const weight = document.querySelector("#weight");
const btn = document.querySelector("button");
// Set up a "click" event handler for the button
btn.addEventListener("click", function(event){
// Set the output element to the result of the math:
output.textContent = med.value * weight.value;
});
.title { display: inline-block; width: 150px; }
<div>
<span class="title">Select Medication:</span>
<select id="med">
<option value="NaN">Select Medication</option>
<option value=".2">Adenosine .2mg/kg</option>
<option value=".15">Albuterol .15mg/kg</option>
<option value="5">Aminophylline 5mg/kg</option>
<option value="5">Amiodarone 5mg/kg</option>
<option value="5">Aspirin 5mg/kg</option>
<option value=".1">Ativan .1mg/kg</option>
<option value=".02">Atropine .02mg/kg</option>
<option value=".5">Atrovent .5mg/kg</option>
<option value="1">Benadryl 1mg/kg</option>
<option value=".01">Brethine .01mg/kg</option>
<option value="4">Dextrose 10% 4ml/kg</option>
<option value=".01">Epinephrine 1/10 .01mg/kg</option>
<option value=".01">Epinephrine 1/1 .01mg/kg</option>
<option value="1">Fentanyl 1mcg/kg</option>
<option value="1">Ketamine 1mg/kg</option>
<option value="1">Labetalol 1mg/kg/hr</option>
<option value="2">Levophed 2mcg/kg/min</option>
<option value="1">Lidocaine 1mg/kg</option>
<option value="50">Magnesium Sulfate 50mg/kg</option>
<option value=".1">Morphine .1mg/kg</option>
<option value="2">Narcan 2mg</option>
<option value=".25">Pepcid .25mg/kg</option>
<option value="1">Rocuronium 1mg/kg</option>
<option value="1">Sodium Bicarb 1mEq/kg</option>
<option value="1">Solu-Medrol 1mg/kg</option>
<option value=".5">Toradol .5mg/kg</option>
<option value=".1">Versed .1mg/kg</option>
<option value=".15">Zofran .15mg/kg</option>
</select>
</div>
<div>
<span class="title">Select weight:</span>
<input id="number" type="text" placeholder="Weight" min="1" max="100">
<select id="weight">
<option value="1">Kg</option>
<option value="2.2">Lb</option>
</select>
</div>
<button type="button">Calculate</button>
<div id="totalDose"></div>
Related
What I'm trying is something pretty basic, but I can't do it because the examples I see aren't anything similar to what I'm looking for.
There are 2 select, one of them you choose manually and the other dynamically changes depending on the value of the first one.
If the value of the first select is 1, that in the second one they only appear whose value is 1 as well.
I want to make it 100% JavaScript, I don't want any JQuery.
HTML.php
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
JavaScript.js
function catch_value_types() {
var types_value_option = document.getElementById("types").value;
// What should I put here?
}
Loop through the options and hide if value doesnot match
function catch_value_types() {
const selectedValue = document.getElementById("types").value;
const select2 = document.getElementById("food");
Array.from(select2.options).forEach((node) => node.style.display = node.value === selectedValue ? "block": "none");
}
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option>Please Select</option>
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
I have this scenario where i have 4 drop down boxes, where you can choose CM for a carport and a shed, within that carport.
I want to prompt the user with messages/errors in these scenarios:
the shed is chosen to be wider than it is long.
the shed is atleast 60cm smaller than the carports in both width and length
only one of the sheds dimensions being chosen
the form looks like this
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
<br>
Length of shed:<br>
<select name="lengthShed">
<option value="0">I do not want a shed</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select name="widthShed">
<option value="0">I do not want a shed</option>
<option value="18=">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
Bind a function to your <select> elements onchange property.
let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].onchange = function(){
// Check for your conditions
// If your warning conditions are met, prompt user
}
}
That is, assuming you want the validation to happen when the user changes one of the select's values.
If you want to validate with a button click, you can instead bind the function to the click event of the button.
let button = document.getElementById(buttonID);
button.onclick = function(){
// Check for your conditions
// If conditions are met, prompt user
}
To prompt the user, you can use a simple alert() to which you pass your message. Or make a more elaborate function to do something custom.
As for your conditions, that sounds like commercial math. Might have to split your question in multiple questions here as there are a lot of possible awnsers.
It might be easier for you to add IDs to your selects so you can get them via document.getElementById(idString). You can then get their value through document.getElementById(idString).value. And to use it in math solving, you will need to parse the string that the <select> will return as value, like so parseInt(document.getelementById(idString).value).
I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?
bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select
<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task
Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>
you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box
I have a form with 2 radio buttons and when either button is toggled it shows or hides a certain fieldset. The issue I have is because the fieldset is just hidden so when the form is submitted it still takes the first fieldsets values.
I have setup a fiddle to show how the form changes the fieldsets http://jsfiddle.net/hhdMq/1/
So when I select "Scale B" although you can change the correct values, when the form is submitted it takes the default values of Scale A.
<center>
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" />
<label for="rdYes">Scale A</label>
<input type="radio" name="sellorlet" value="No" id="rdNo" />
<label for="rdNo">Scale B</label>
</center>
<fieldset id="sell">
<center>
<select id="pricemin" name="min">
<option value="50000">Min Price</option>
<option value="50000">£50,000</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
</select>
<select id="pricemax" name="max">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="4000000">£4,000,000</option>
<option value="5000000">£5,000,000</option>
</select>
</center>
</fieldset>
<fieldset id="buy" style="display:none;">
<center>
<select id="lpricemin" name="min">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
<select id="lpricemax" name="max">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
</center>
</fieldset>
and the jquery used:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
My question is, how can I completely disable the first fieldset if Scale B is selected and likewise when Scale A is selected it will disable the second fieldset?
Many thanks
When submitting a form, you cannot have two inputs, selects, or textareas with the same name in the same form. Doing so will cause confusion and probably end up the wrong info being submitted. There are two ways you can fix this.
Method 1:
Change the
<select id="lpricemin" name="min">
<select id="lpricemin" name="lmin">
to
<select id="lpricemax" name="max">
<select id="lpricemax" name="lmax"> respectively.
This will allow you to handle the data from lmin and lmax and ensure you get the info from the second fieldset.
Method 2:
Put the second fieldset in a different form. Then just change the jQuery to show the forms instead of the fieldsets.
Changed the radio buttons now to a tabbed design so the form can be separated correctly. If anyone would like to know how the tabs are done they are here http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery
Method 3 would be to change the switch the content of your select through Javascript rather than toggling through visibility. You can do that through:
function setMaxScale()
{
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\
<option value="50000">£50,000</option>\
<option value="100000">£100,000</option>\
<option value="200000">£200,000</option>\
<option value="300000">£300,000</option>...";
}
An other clean solution would be to create your scales dynamically with a loop.
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!