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.
Related
I'm trying to get multiple drop down boxes to open when selecting different prompts from an original drop down menu.
So for example the original drop box would say "Continent" then drop down to a list of continents, when you select a continent a new box opens that asks you "Country" then you select a country and a new drop box opens to select a state.
I've been using this template
<script type="text/javascript">
function CheckDepartment(val){
var element=document.getElementById('othercolor');
if(val=='others')
element.style.display='block';
else
element.style.display='none';}
function CheckOption(val){
var element=document.getElementById('misc')
if(val=='misc')
element.style.display='block';
else
element.style.display='block';
}
</script>
</head>
<body>
<select name="color" onchange='CheckDepartment(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
<option value=""></option>
<option value="hi">hi</option>
<option value="misc" id="misc" >misc</option>
</select>
<select name="third" style='display:none;'>
<option value=""></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
but I can't get a third drop box to open when selecting an option from the second drop box.
edit: third box. I think i deleted my last try so this was kinda a recreation of it from what I remembered. I'm also incredibly new at all of this and don't know if anything I tried makes sense.
Here's a simplified demo.
(It assumes only a "yes" value should trigger the display of the next dependent dropdown.)
const
select1 = document.getElementById("select1"),
select2 = document.getElementById("select2");
document.addEventListener("change", handleDropdownDisplay);
function handleDropdownDisplay(event) {
let changedElement = event.target;
if ((changedElement != select1) && (changedElement != select2)) {
return;
}
if (changedElement.value == "yes") {
changedElement.parentElement.nextElementSibling.classList.remove("hidden");
} else {
changedElement.parentElement.nextElementSibling.classList.add("hidden");
}
}
div {
margin-bottom: 0.5em;
}
.hidden {
display: none;
}
<div>
<label for="select1">Show level 2?</label>
<select id="select1">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select2">Show level 3?</label>
<select id="select2">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select3">Would your rather</label>
<select id="select3">
<option value="brains">Eat monkey brains</option>
<option value="vba">Write code in VBA</option>
</select>
</div>
(Btw, level 3 doesn't automatically become hidden whenever level 2 becomes hidden. This is probably functionality you'll want to add.)
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 3 years ago.
Improve this question
<label for="FROM">FROM:</label>
<select name="FROM">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select>
<BR></BR>
<label for="TO">TO:</label>
<select name="TO">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select><br></form>
</br>
i'm doing online bus booking project, i set two label for destination purpose ,' "from" area and "To" area ' using option tag, now i should not same area ,i need jsp or php queries
Add IDs to the two selects, so we can identify and find them. Then add an event-listener to your first select, where changes made to it, will hide the selected value and hide all others.
This uses the value of the options, not its text.
$("#from-location").on("change", function() {
$("#to-location").find("option").show();
$("#to-location").find("option[value="+this.value+"]").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="FROM">FROM:</label>
<select name="FROM" id="from-location">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select>
<BR></BR>
<label for="TO">TO:</label>
<select name="TO" id="to-location">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select><br></form>
</br>
You might want to add some server-side verification to this after submitting the form as well, where you check that
if ($_POST['FROM'] === $_POST['TO']) {
/* Error handling */
}
You can check this from within PHP. This is a simple example; you should adapt it for your own application. It's not suitable for production use.
<?php
if (empty($_REQUEST['FROM'])) {
exit("Please enter an origin.");
}
if (empty($_REQUEST['TO'])) {
exit("Please enter a destination.");
}
if ($_REQUEST['FROM'] == $_REQUEST['TO']) {
exit("Please enter a destination that is different from your origin.");
}
?>
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();
}
I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>
I try to find a solution, but I can't find it and I am not able to program it by myself. I hope you can help me.
I have 2 elements: A textfield and a drop down menu (select/options).
Based on the birth/year of a person I enter into the textfield, I want to have a related drop down values.
If the person is 0-17 years old, the values in the drop down should bei 0, 100, 200, 300, 400, 500, 600.
If the person is 18 years old or older, the values in the drop down should bei 300, 500, 1000, 1500, 2000, 2500.
Example: If I enter 1978 into the text field, the drop down menu should show the values 300, 500,…
If I enter 2002 into the text field, the drop down menu should show the values 100, 200,…
I hope it is understandable what I am looking for.
I have checked this one:
Change dropdown value based on Text Input
and also this one, which looks also similar to what I need:
jQuery - Change hidden value based on input field
But I can't make it.
A jsfiddle would be really cool!
Thank you in advance.
<input name="Year" type="text" value="" />
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Kind regards,
Andy
You could handle this by taking advantage of data-* attributes and using jQuery to determine which values should be shown based on your selection :
<!-- Assumes a valid year is entered -->
<input name="Year" type="text" value="" />
<!-- Notice your possible values data options -->
<select name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300" data-under-18="100" data-over-18="300">300.-</option>
<option value="500" data-under-18="200" data-over-18="500">500.-</option>
<option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
<option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
<option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
<option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
</select>
<script>
$(function(){
// When your year changes...
$('[name="Year"]').change(function(){
// Check that the value is a year (assumes 4 digit number)
if(/^\d{4}/.test($(this).val())){
// Parse the value
var year = parseInt($(this).val());
// Determine the user's age
var age = new Date().getFullYear() - year;
// Use the data attributes to set each value (ignore the first one)
$('[name="Results"] option:not(:first)').each(function(){
var valueToUse = (age >= 18) ? $(this).attr('data-over-18') : $(this).attr('data-under-18');
$(this).val(valueToUse).text(valueToUse);
});
}
else{
alert('Please enter a year! (any 4-digit number will do)');
$(this).val('').focus();
}
})
})
</script>
You can see a complete working example here and demonstrated below :
https://jsfiddle.net/erjc0fna/
Basically each option has a class that identifies it as lessThan18 or over18. The ones without classes are available for either case according to what you wrote. On keyup for the textbox it then calculates the age and hides/shows the correct options.
Include jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
After add ids to the input(inputId) and the 2 select(select1 and select2)
<input id="inputId" name="Year" type="text" value="" />
<select id="select1" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="300">300.-</option>
<option value="500">500.-</option>
<option value="1000">1000.-</option>
<option value="1500">1500.-</option>
<option value="2000">2000.-</option>
<option value="2500">2500.-</option>
</select>
<select id="select2" name="Results">
<option selected="selected" value="">please choose:</option>
<option value="100">100.-</option>
<option value="200">200.-</option>
<option value="300">300.-</option>
<option value="400">400.-</option>
<option value="500">500.-</option>
<option value="600“>600.-</option>
</select>
Code jquery
<script>
//here the code
$( document ).ready(function() {
$("#inputId").keypress(function(e)
{
if(e.which == 13) //When you press enter key one select is hide an the other is show
{
var aux = parseInt($(this).val());
if( aux >= 1999)
{
$("#select2").show();
$("#select1").hide();
}
else
{
$("#select1").show();
$("#select2").hide();
}
}
});
});
<script>