Drop down list item - javascript

I have a <select> field, which shows a hidden div on selecting a list item.
There are tree items in the <select> and each item shows the hidden div.
What I need is when I have selected the 3rd item and I refresh the page, the 3rd item should no longer be selected, but it should change to the 1st item.
I have tried selected="selected" in the <option> code but it did not work.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$("#column_select").change(function() {
$('div[id^=layout_select]').hide();
$('.'+this.value).show();
});
});
//]]>
</script>
</head>
<body>
<!-- this controls the selection of columns -->
<select name="column_selec" id="column_select">
<option value="col1" selected="selected">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<!-- this controls the selection of columns -->
<!-- if '1 column' is selected this div is shown -->
<div id="layout_select1" class="col1">You only have one column!</div>
<!-- if '2 column' is selected this div is shown -->
<div id="layout_select2" class="col2" style="display:none">
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay1" '.$layout1.' />imaage1
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay2" '.$layout2.' />imaage2 </div>
<!-- if '3 column' is selected this div is shown -->
<div id="layout_select3" class="col3" style="display:none">
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay3" '.$layout3.' />imaage3
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay4" '.$layout4.' />imaage4
<input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay5" '.$layout5.' />imaage5
</div>

try this code , this will select the first option in the drop down when page will refresh
$(document).ready(function(){
$('#column_select').val('col1');
});

Related

append the multiple selected items from datalist to input tag with comma [duplicate]

In my Laravel app, I have a form to select multiple options. However, I don't want to select multiple options by pressing CTRL and then selecting them. I just want to be able simply click on the options and they should be selected. And, if I click on a selected option again, then it should be de-selected.
How can I achieve this task?
Here is an example of my select options list.
<div class="form-group row">
<label class="col-form-label" for="selectednames[]">Select Name</label>
</div>
<div class="form-group row">
<select multiple name="selectednames[]">
<option value="1">John</option>
<option value="2">Sam</option>
<option value="3">Max</option>
<option value="4">Shawn</option>
</select>
P.S: I am using bootstrap and jquery in my application.
simply use checkbox type as input instead of option, like that:
<div class="form-check">
<input type="checkbox" name="selectednames[]" value = "1" />
<input type="checkbox" name="selectednames[]" value = "2" />
<input type="checkbox" name="selectednames[]" value = "3" />
<input type="checkbox" name="selectednames[]" value = "4" />
</div>
I think you want somethings like this :
$('select[multiple]').multiselect()
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head>
<body>
<select multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>

selecting specific element within one parent

This is my HTML form structure:
EDIT: Each section is generated by PHP script, and the section id will change depending on user input. I am not able to use the whole selector because of this
<section id="JaneDoe">
<div class="gcolumn1">Jane Doe</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JaneDoe-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
<section id="JohnSmith">
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" id="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" id="chk_food[]" value="N">No</div>
<div class="gcolumn3">
<select id="Meal[]" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
I'd like for the dropdown Meal[] to be enabled only after the chk_food[] is selected as yes. However, I am having some trouble figuring out how to tell jQuery to enable only the dropdown box within the same section.
I currently have this as the jQuery: (I added the alert boxes to see which part of the code is not working)
var update_meal = function () {
alert ("Hi");
var sec_id = $(this).closest("section").attr("id");
alert (text(sec_id));
if ($(sec_id + "> #chk_food[]").is(":checked")) {
$(sec_id + "> #Meal[]").prop('disabled', false);
} else {
$(sec_id + "> #Meal[]").prop('disabled', 'disabled');
}
};
$(update_meal);
$("#chk_food[]").change(update_meal);
When I tried to run this on JSFiddle, no bugs show up, but the coding doesn't work at all.
I see the alert box popping up with "Hi" as soon as the document loads
Thank you for your help
You can't have multiple elements on the same page with the same ID. It is invalid HTML and it will confuse your code terribly. To get this to work, you first need to use classes to find things:
<section>
<div class="gcolumn1">JohnSmith</div>
<div class="gcolumn2">Color:
<input type="radio" name="chk_clr[]" value="Y">Yellow
<input type="radio" name="chk_clr[]" value="R">Rose
<br>Food:
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food yes" value="Y">Yes
<input type="radio" name="JohnSmith-chk_food[]" class="chk_food no" value="N">No
</div>
<div class="gcolumn3">
<select name="Meal[]" class="meal" disabled>
<option value=""></option>
<option value="Chicken">Chicken</option>
<option value="Beef">Beef</option>
<option value="Vegetarian">Vegetarian</option>
<option value="Other">Other</option>
</select>
</div>
<div style="clear: both; height: 5px;"> </div>
</section>
Then you can start to target things correctly. Something like this:
$(".chk_food").on("change", function() {
$(this)
.closest("SECTION")
.find("SELECT.meal")
.prop("disabled", $(this).is(".no"));
});
In this case, we bind the change handler on both the Yes and No food radios. The handler will be called for the one the user clicks on, so they are inherently turning that one "on". So we find the parent section, and then the meal select within it, and set its disabled property to true if this is the .yes radio and false if this is the .no radio.
I think that should do it.

Conditional form actions with jquery show/hide on radios/inputs

I'm working on a form that has to show/hide based on a radio/checkbox selections. I have this half working, but I'm running into a number of errors & I'm certain that this code can be optimized/written much more efficiently.
The flow of the form needs to work based off of what checkboxes/radios are selected. I'm not entirely sure the best way to lay this out in a SO post, so Ive commented the html. If I can clarify this in anyway, I will happily do so if someone has a suggestion
In the markup below, I have added comments where I want to render the html. I have a working example of this over at JS Fiddle. You can see that here http://jsfiddle.net/gTAGG/2/
<form id="dorm-form" class="order-start form-horizontal form-horizontal-left-align" action="/reservation#hourly" method="GET">
<!-- SELECT school -->
<div class="control-group">
<label class="control-label" for="school">College town:</label>
<div class="controls">
<select name="school" class="span3">
<option value="">-- Choose your college town--</option>
{% for school in schools %}{% if school.name != 'Other' %}<option value="{{ school.id }}">{{ school.name }}</option>{% endif %}{% endfor %}
</select>
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="control-group">
<p> Tell us what you need </p>
<label class="checkbox">
<input type="checkbox" name="checkboxes" value="Load">
Load
</label>
<label class="checkbox">
<input type="checkbox" name="checkboxes" value="Unload">
Unload
</label>
</div>
<!-- Multiple Checkboxes -->
<!-- values are still load & unload. Figure out how these save -->
<div id="movingtruck" class="control-group">
<p> Do you need a moving truck (flat rate $125) </p>
<label class="radio">
<input type="radio" name="radios" value="Yes" checked="checked">
Yes
</label>
<label class="radio">
<input type="radio" name="radios" value="No">
No
</label>
</div>
<!-- If you select either "load" or just "unload" this form should show. If both load & unload are selected, this does not show.-->
<div id="radios" class="control-group">
<p> Do you live in a dorm or greekhouse? </p>
<label class="radio">
<input type="radio" name="radios" value="Greek" checked="checked">
Yes
</label>
<label class="radio">
<input type="radio" name="radios" value="NoGreek">
No
</label>
</div>
<!-- if "yes" is selected above, then this should show. If "no" is selected above, this should hide.-->
<div id="dorms" class="control-group">
<label class="control-label" for="dorm">
<i class="error-warning cb-icon cb-icon-warning"></i>
Dorm:
</label>
<div class="controls">
<select require="true" name="dorm">
<option value="">-- Choose your dorm --</option>
{% for dorm in dorms %}<option value="{{ dorm.id }}">{{ dorm.name }}</option>{% endfor %}
</select>
</div>
</div>
<!-- if "yes" is selected above, then this should hide. If "no" is selected above, this should hide.-->
<div id="greek" class="control-group">
<label class="control-label">Greekhouse</label>
<div class="controls">
<input id="textinput" name="textinput" type="text" placeholder="name of your house" class="input-xlarge">
</div>
</div>
<!-- Show when "unload" is checked as well as when "no" selected. If "yes" is selected, this should hide -->
<div class="row" id="hops">
<div class="span6 control-group">
<label class="control-label" for="bellhops">
<i class="error-warning cb-icon cb-icon-warning"></i>
How many Bellhops?
</label>
<div class="controls">
<select name="bellhops">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
</div>
</div>
</div>
<!-- Show when "unload" is checked as well as when "no" selected. If "yes" is selected, this should hide -->
<div id="bellhop-hours" class="span6 control-group">
<label class="control-label" for="hours">
<i class="error-warning cb-icon cb-icon-warning"></i>
How many hours?
</label>
<div class="controls">
<select name="hours" id="hours">
<option value="1.5">One and a half</option>
<option value="2">Two</option>
<option value="2.5">Two and a half</option>
<option value="3">Three</option>
<option value="3.5">Three and a half</option>
<option value="4">Four</option>
<option value="4.5">Four and a half</option>
<option value="5">Five</option>
<option value="5.5">Five and a half</option>
<option value="6">Six</option>
<option value="6.5">Six and a half</option>
<option value="7">Seven</option>
<option value="7.5">Seven and a half</option>
<option value="8">Eight</option>
</select>
</div>
</div>
<!-- BUTTON -->
<div class="form-controls">
<button class="btn btn-lime">Reserve Your Bellhops!</button>
</div>
</form>
Here is the JS that I am using
// Inputs for Load & Unload
$("input[value=Load]").click(function(){
if($(this).is(":checked")){
$("#dorms, #greek,").show();
}else{
$("#dorms, #greek").hide();
}
});
$("input[value='Unload']").click(function(){
if($(this).is(":checked")){
$("#movingtruck").show();
}else{
$("#hops, #hours").hide();
}
});
// Inputs for Do you need a moving truck?
$("input[value='Yes']").click(function(){
if($(this).is(":checked")){
$("#hops, #bellhop-hours").show();
}
});
$("input[value='No']").click(function(){
if($(this).is(":checked")){
$("#hops, #bellhop-hours").show();
}
});
// Radios for "Do you live in a dorm or greekhouse?"
// Radios arent hiding when selecting "nogreek" Check on radios.
$("input[value='Greek']").click(function(){
if($(this).is(":checked")){
$("#dorms, #greek").show();
}else{
$("#dorms, #greek, #hops").hide();
}
});
$("input[value='NoGreek']").click(function(){
if($(this).is(":checked")){
$("#hops, #hours").show();
}else{
$("#dorms, #greek").hide();
}
});
And a tiny bit of CSS
/* Hiding form elements */
#greek, #dorm-selector, #hops, #dorms, #hidden, #movingtruck, #bellhop-hours{
display:none;
}
I have a work in progress fiddle which does something similar to yours (well, show and hide and add elements) You can check it out here: http://jsfiddle.net/Hux2L/
A question here: i'm not quite sure about your load and unload and do you want to show and hide accordingly? from what i see, after i clicked on something, something will show up but some won't show anything. ;) it's like a surprise game.
EDIT:
You can give the 2 checkboxes an ID each:
<input type="checkbox" name="checkboxes" value="Load" id="load">
<input type="checkbox" name="checkboxes" value="Unload" id="unload">
Then you can specify the condition as :
if ($('#load').is(':checked ')&&$('#unload').is(':checked')){
//do what you want here
$('#dorms').hide();
$('#movingtruck').show();
}

Drop down list - display div when clicking an option

You must write a function that 'shows' the corresponding part of the form depending on what the user has selected. For example, if 'Pizza' is selected, the div #section2 with the question about Pizza type should be shown.
This is part of the html code
<form id="survey" action="#" method="post">
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection()">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
How would i write a javascript function so that when I click the option pizza, it will display section 2? I'm a complete javascript novice so any help would be great.
DEMO: http://jsfiddle.net/iambriansreed/rQr6v/
JavaScript:
var sections = {
'pizza': 'section2',
'mex': 'section3',
'thai': 'section4'
};
var selection = function(select) {
for(i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
}
Checkout the demo. Replace the section3 and section4 divs with actual content.
There are plenty of solutions for that. One of the simpliest options is to change your markup a bit and use div IDs.
HTML:
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection(this)">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section_pizza" style="display: none;">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
JavaScript:
function selection(select) {
document.getElementById("section_" + select.value).style.display = "block";
}
However, you can use JQuery library and make it faster and more flexible. You can easily add animation to blocks and add extra functionality.
HTML:
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2" data-type="pizza" style="display: none;">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
JavaScript:
$("#food").change(function() {
$("[data-type]").hide();
$("[data-type='" + this.value + "']").show(1000);
});

Related Radio buttons and Drop down list

i am trying to make a form, in which i have a number of radio buttons (created dynamically), and a drop down list.
In the drop down list i have numbers.
I want the drop down list to depend on the radio button currently pressed, meaning that, if i press the first button, the maximum number appearing in the drop down list will be a value x, if i press another radio will be a value y. This values represent a php variable.
What is the easiest way to do this thing?
Thank you!
Editing:
i tried:
<html>
<head>
<style>
#ca {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("input:radio").click(function() {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
</script>
</head>
<body>
<ul id="countrylist">
<li>
<label for="US-country">
<input name="store" id="US-country" type="radio" value="com" checked="checked" />
USA</label>
</li>
<li>
<label for="CA-country">
<input name="store" id="CA-country" type="radio" value="ca"/>
Canada</label>
</li>
</ul>
<select name="search-alias-us" id="com" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="apparel">Apparel & Accessories</option>
<option value="automotive">Automotive</option>
</select>
<select name="search-alias-ca" id="ca" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="stripbooks">Books</option>
<option value="popular">Music</option>
</select>
</body>
</html>
also included : the jquery 1.5 library . still, the drop down list does't change on radio button click.
thank you!
I'm not sure if I understand your question right but I once made something similar, what I did was output all dropdownlists and hid them with css then on clicking the radiobutton unhid the dropdownlist I needed using jquery
http://jsfiddle.net/6svcD/
It can be even shorter with show() and hide()
$(function() {
$("input:radio").click(function () {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
The whole page below or here: http://jsfiddle.net/MrAGF/1/
<html>
<head>
<style>
#ca {
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("input:radio").click(function() {
$('.searchSelect').hide();
$('#' + $(this).attr("value")).show();
});
});
</script>
</head>
<body>
<ul id="countrylist">
<li>
<label for="US-country">
<input name="store" id="US-country" type="radio" value="com" checked="checked" />
USA</label>
</li>
<li>
<label for="CA-country">
<input name="store" id="CA-country" type="radio" value="ca"/>
Canada</label>
</li>
</ul>
<select name="search-alias-us" id="com" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="apparel">Apparel & Accessories</option>
<option value="automotive">Automotive</option>
</select>
<select name="search-alias-ca" id="ca" class="searchSelect" title="Search in">
<option value="aps" selected="selected">All Departments</option>
<option value="stripbooks">Books</option>
<option value="popular">Music</option>
</select>
</body>
</html>

Categories