I'm looking to have separate sections of my form become visible dependant on the selection from a drop down menu.
Currently i'm having two issues, its only hiding the first area i want hidden and also i'm struggling with the syntax to get the multiple options working using if statements.
Am i looking at this the right way or is there an easier way of doing this.
In the code below i've only got 2 if statements as i've been struggling to get that correct so haven't done it for all 8 options i need to.
function showfield(name){
if (name=='Supplier meetings') {
document.getElementById('div1').style.display="block";
} else {
document.getElementById('div1').style.display="none";
if (name=='Product meetings') {
document.getElementById('div2').style.display="block";
} else {
document.getElementById('div2').style.display="none";
}
}
}
function hidefield() {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div4').style.display='none';
document.getElementById('div5').style.display='none';
document.getElementById('div6').style.display='none';
document.getElementById('div7').style.display='none';
document.getElementById('div8').style.display='none';
}
in my html i have:
<body onload="hidefield()">
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1">Worked hours</option>
<option value="2">Overtime</option>
<option value="3">Sickness</option>
<option value="4">Unpaid leave</option>
<option value="5">Compassionate leave</option>
<option value="6">Holiday inc bank holidays</option>
<option value="7">Team meetings</option>
<option value="8">One to ones</option>
<option value="9">One to one prep</option>
<option value="10">Huddles</option>
<option value="Supplier meetings">Supplier meetings</option>
<option value="Product meetings">Product meetings</option>
<option value="Training/coaching">Training/coaching</option>
<option value="Handling other peoples cases">Handling other peoples cases</option>
<option value="15">Project work</option>
<option value="16">Surgery time for GK</option>
<option value="17">Letter checks and feedback</option>
<option value="18">MI/Reporting/RCA</option>
</select>
Then divs that contain the parts i need displayed off each option.
Hope that makes sense.
Thanks
Instead of writing condition for each option value, you can use the value directly in selecting the div that is to be shown:
function showfield(name){
hidefield();
document.getElementById( 'div-' + name).style.display="block";
}
For this to work, your id's should match up with corresponding option values.
e.g. <option value="1">1</option>
corresponding div:
<div id="div-1"></div>
You can add a data-div attribute to every option which will be ID of respective div which will be shown and other divs will be hidden.
You need a class on every div so they can be hidden using that class name except the div which will be shown based on selection.
HTML
<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)">
<option value="1" data-div="one">Worked hours</option>
<option value="2" data-div="two">Overtime</option>
</select>
<div id="one">First Div</div>
<div id="two">Second Div</div>
Javascript
function showfield(val)
{
var divID = $("select[name=acti]").find("option[value='" + val + "']").attr("data-div");
$(".divClass").hide();//You can also use hidefield() here to hide other divs.
$("#" + divID).show();
}
Related
I am new to javascript and cannot find an easy-to-understand answer.
I would like a certain value to get passed to a hidden field when a user selects a certain option from the select dropdown.
I know that there are if/else statements but I'm not sure if that would be used in this situation.
For example: I have a select dropdown of a list of states.
<select name="HomeState" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
As you can see, any option other than California will be rated at a value of 1.
I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.
<input name="AmountNeeded" type="hidden" value="300" />
If they select anything other than California, the hidden field would get passed $100
<input name="AmountNeeded" type="hidden" value="100" />
How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.
To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.
And based on the selected item, change the value of hidden input.
NOTE: To test the snippet out I have removed the type="hidden". Do place it back.
function homeSelected(){
const home = document.getElementById("homeSelector").value;
if(home == 5){
document.getElementById("amountNeeded").value = 300;
}else{
document.getElementById("amountNeeded").value = 100;
}
}
<select id="homeSelector" name="HomeState" onchange="homeSelected()" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
<input id="amountNeeded" name="AmountNeeded" value="100" />
You can do this as follows:
<select name="HomeState" required onChange=myFunction(this)>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
Javascript code is:
<script>
function myFunction(x) {
val = x.options[x.selectedIndex].text;
if(val == 'California')
document.getElementsByName("AmountNeeded")[0].value = 300
else
document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>
If else statement is good for you if you are sure that All other states have value 1 except California. If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount. You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Hello I have first one input which is
<select id="selectcontract" name="contract" class="input-xlarge" >
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
this input contains 2 options Buy and Rent. So I would like when you choose Buy foe example to populate the values of second and third input if you choose Rent to populate exactly those same inputs but with different values and value names.
here are the second and the third inputs:
Second Select:
<select id="Pricefrom" name="minimum_price" >
<option value="">Price From</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
Third Select:
<select id="Princeuntil" name="maximum_price" >
<option value="">Price Until</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
Any advice in which direction I should realize this goal ? I guess it should be something with jquery since the change should be made mediate when you choose either buy or rent.
You can create one div for buy and one for rent with class and after show or hide their
Example on fiddle:
https://jsfiddle.net/tehb2fxt/1/
Div Buy (is necessary change the name prop to not repeat) and add CLASS "class_price"
<select id="selectcontract" name="contract" class="input-xlarge class_price">
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
</select>
<div class="div_buy" style="display: none">
<select id="Pricefrom_buy" name="Pricefrom_buy" class="class_price">
<option value="">Price From Buy</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
<select id="Princeuntil_buy" name="Princeuntil_buy" class="class_price">
<option value="">Price Until Buy</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</select>
</div>
<div class="div_rent" style="display: none">
<select id="Pricefrom_rent" name="Pricefrom_rent" class="class_price">
<option value="">Price From Rent</option>
<option value="8">8</option>
<option value="800">800</option>
<option value="8000">8000</option>
<option value="8500">8500</option>
</select>
<select id="Princeuntil_rent" name="Princeuntil_rent" class="class_price">
<option value="">Price Until Rent</option>
<option value="900">900</option>
<option value="9000">9000</option>
<option value="9500">9500</option>
<option value="9000">9000</option>
</select>
</div>
Jquery to show and hide according with select:
<script type="text/javascript">
$(document).ready(function(){
$('#selectcontract').change
(
function()
{
if($(this).val() == "1")
{
$('.div_buy').show('slow');
$('.div_rent').hide('slow');
}
else if($(this).val() == "2")
{
$('.div_buy').hide('slow');
$('.div_rent').show('slow');
}
else
{
$('.div_buy').hide('slow');
$('.div_rent').hide('slow');
}
}
);
}
);
</script>
To control and not be in conflict 2 selects add input text(will changed to type="hidden" when finish test) for recovery values of pricefrom and princeuntil(buy and rent)
<input type="hidden" id="Pricefrom" value="0" name="Pricefrom">
<input type="hidden" id="Princeuntil" value="0" name="Princeuntil">
And add event Jquery when values class changed
$('.class_price').change
(
function () {
if($('#selectcontract').val() == "1") //if buy
{
$('#Pricefrom').val($('#Pricefrom_buy').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_buy').val()); //get value select
}
else if($('#selectcontract').val() == "2") //if rent
{
$('#Pricefrom').val($('#Pricefrom_rent').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_rent').val()); //get value select
}
else {//if not select
$('#Pricefrom').val("0");
$('#Princeuntil').val("0");
}
}
);
Static Lists
A simple fiddle proof of concept.
https://jsfiddle.net/cgjjg2dy/
The main part is:
$('#selectcontract').change(function (event) {
$(".section").hide();
$("#section" + $(this).val()).show();
});
I hide all the sections, then I show the one that corresponds to the option chosen. You can get even fancier with fadeOut() and fadeIn() too!
AJAX
If you want to dynamically retrieve your options from a server/database, you have to use AJAX. Instead of using .hide() and .show() in your change() handler, you just make an AJAX call and retrieve the data, then modify the DOM as necessary. Quite a bit more complex, but still the same idea.
What I am trying to accomplish is the following...
HTML
<!doctype html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child" id="dateselector_child" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript">
$(function () {
$("#dateselector_parent").selectbox();
$("#dateselector_child").selectbox();
});
</script>
</body>
This creates two select boxes, I want one box to display content according to what the user chooses on the other one. For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery).
Any help will be appreciated
I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options
$().ready(function () {
var selectedOnLoad = $('#dateselector_parent').val();
setChild(selectedOnLoad);
$('#dateselector_parent').change(function () {
var selectedValue = $('#dateselector_parent').val();
setChild(selectedValue);
});
});
function setChild(value){
//Have your three child selector names as follows in your markup as well and assuming they are not in divs
var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];
jQuery.each(arr, function() {
if(this == "dateselector_child_" + value){
$("#" + this).show();
}else{
$("#" + this).hide();
}
});
}
UPDATE: Adding markup for the above script
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
<option value="">--Select Date--</option>
</select>
<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">March</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
</select>
<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
<option value="">--Select Date--</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
Check the setChild(value) function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.
Hope it's clear now....
Just a startingpoint!
$("#dateselector_parent").change(function() {
$('#dateselector_child').val($(this).find("option:selected").index());
});
Demo
AJAX, expands to Asynchronous JavaScript And XML. It involves writing an XMLHTTPRequest to retrieve the contents from a server.
If you can store your logic (what to display when a certain option is chosen) in a few lines of code, you can embed it in JavaScript or jQuery.
So, in your case, it is not necessary to use AJAX. You can accomplish this with a bit of code in JavaScript.
"Creating a 2 level interdependent select list" might help.
I have spent about an hour or two trying to find out how to use JavaScript to create a text field when a certain value is selected from a drop down list.
Here is the code for the drop down menu if that's of any help. I'd have attempted to write the code to do this myself, but I am still very unfamiliar with how to write JavaScript code
<select name="claim">
<option value="">Select a Claim</option>
<option value="Insurance">Insurance</option> // this option I want when selected to create a text field
<option value="Warranty">Warranty</option>
</select>
try this hope it helps
<div id="area">
<select id="claim" name="claim">
<option value="">Select a Claim</option>
<option value="Insurance">Insurance</option>
<option value="Warranty">Warranty</option>
</select>
</div>
and script
$(document).ready(function(){
$("#claim").change(function(){
$("#area").find(".field").remove();
//or
$('#area').remove('.field');
if( $(this).val()=="Insurance")
{
$("#area").append("<input class='field' type='text' />");
}
});
});
example http://jsfiddle.net/cqjJy/
I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.
Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder
I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.
As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.
My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.