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.
Related
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>
I have the following menu options defined:-
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
</select>
I would like to add the following checkbox:-
<strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts"/>
...and when include_Ts is checked, I would like the list of values for selectedBaseRelease and selectedNewRelease to change, e.g. to something like...
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a">ICC2_O-2018.06a</option>
<option value="/~releases/file3" selected >ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
<option value="/~releases/file4a">ICC2_N-2017.09-SP5a</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected >ICC2_O-2018.06-SP1</option>
<option value="/~releases/file1a">ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a">ICC2_O-2018.06a</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a">ICC2_N-2017.09-SP6a</option>
</select>
How does one define an if-then condition to activate the alternate select id choices when include_Ts is checked?
Here's one way to accomplish this using only CSS and no JavaScript. Live demo below.
A few things allow this to happen:
We're giving the values you'd like hidden by default a class (<option class="tbuild"...)
In the CSS, we're hiding elements with that class by default (.tbuild { display: none; })
In the CSS, we're also looking to see if the #include_Ts checkbox was checked, and if it is, we display those .tbuild options.
Note that for this to occur, the hierarchy needs to remain more or less the same as this demo. The checkbox needs to be prior to the select menus, and not within its own parent element separate from the select elements.
Let me know if you have any questions!
.tbuild {
display: none;
}
#include_Ts:checked~select .tbuild {
display: block;
}
<strong>Include T-builds:</strong> <input type="checkbox" id="include_Ts" />
<br><br>
<label><strong>Release #1:</strong></label>
<select id="selectedBaseRelease">
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
<option value="/~releases/file3" selected>ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</option>
<option value="/~releases/file4">ICC2_N-2017.09-SP5</option>
<option value="/~releases/file4a" class="tbuild">ICC2_N-2017.09-SP5a</option>
</select>
<br><br>
<label><strong>Release #2:</strong></label>
<select id="selectedNewRelease">
<option value="/~releases/file1" selected>ICC2_O-2018.06-SP1</option>
<option value="/~releases/file1a" class="tbuild">ICC2_O-2018.06-SP1</option>
<option value="/~releases/file2">ICC2_O-2018.06</option>
<option value="/~releases/file2a" class="tbuild">ICC2_O-2018.06a</option>
<option value="/~releases/file3">ICC2_N-2017.09-SP6</option>
<option value="/~releases/file3a" class="tbuild">ICC2_N-2017.09-SP6a</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).
Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG
You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>
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