We Keep Coding

if dropdown is selected span is to show attribute of that option. This works until I add a second Select input

$("#item1").change(function() {
$('#price-
displayitem1').text($('option:selected').attr('data-item1'));
}).change();
$("#item2").change(function() {
$('#price-displayItem2').text($('option:selected').attr('data-item2'));
}).change();
then here are the spans which will be chaged
<span id="price-displayItem1"></span>
<span id="price-displayItem2"></span>
Then here is the actual Select input
<div class="col-sm-3">
<label for="item1" style="color:black;">item1</label>
<div class="input-select">
<select name="item1" id="item1">
<option value="1" data-item1="1">1</option>
<option value="2" data-item1="2">2</option>
<option value="3" data-item1="3">3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<label for="item2" style="color:black;">item2</label>
<div class="input-select">
<select name="item2" id="item2">
<option value="1" data-item2="1">1</option>
<option value="2" data-item2="2">2</option>
<option value="3" data-item2="3">3</option>
</select>
</div>
</div>
Note: the id's and name's in actuality are only using string characters
Explanation: so basically It works for the first item/dropdown/span. But when I introduce a second or even third, then only the first one works properly. If i remove the code of the first. Then the second one begins to work but still not the third. and so on.
I'd appreciate any help.
Thanks!

Well you use an option selector so you select all the options on the page.
$('option:selected').attr('data-item1')
so you need to look for the options in the select that you are using
$(this).find('option:selected').attr('data-item1')

You forgot to use selector before option.
$("#item1").change(function() {
$('#price-displayitem1').text($('#item1 option:selected').attr('data-item1'));
}).change();
$("#item2").change(function() {
$('#price-displayItem2').text($('#item2 option:selected').attr('data-item2'));
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="price-displayItem1"></span>
<span id="price-displayItem2"></span>
<div class="col-sm-3">
<label for="item1" style="color:black;">item1</label>
<div class="input-select">
<select name="item1" id="item1">
<option value="1" data-item1="1">1</option>
<option value="2" data-item1="2">2</option>
<option value="3" data-item1="3">3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<label for="item2" style="color:black;">item2</label>
<div class="input-select">
<select name="item2" id="item2">
<option value="1" data-item2="1">1</option>
<option value="2" data-item2="2">2</option>
<option value="3" data-item2="3">3</option>
</select>
</div>
</div>

Reset/uncheck/unselect Users choice on Questionair/Survey

I recently working on a survey and I am fairly new and simply use jQuery to show and hide based on my survey logic. Now I am facing an issue that I need a way to reset the block(content) back to its original status (unchecked, unselected..etc). What i am currently doing is manually go into the child element and uncheck/unselect/empty all the user answers. But I dont really like my approach since I have to HARD CODE all div-id in advance. I am looking(or write a function) for a jQuery function to implement dynamically reset instead of the hard code way.
Can any one provide me a direction to go? You can try my code (and JS) here on Fiddle.
jQuery:
$("#q2Back_btn").click(function(){
//put Q2 logic here..
$('#select_2a').prop('selectedIndex',0);
$('#div_2b').find("input[type='checkbox'],input[type='radio']").prop('checked',false);
$("#secdiv").hide(500);
$("#firstdiv").show(500);
});
HTML:
<div id="firstdiv">
<div name = "div_1a">
1a. Q1a ( choose 1 and go to Q2)
<select id="select_1a" name="select_1a" >
<option checked ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<br>
<div name= "div_1b">
<p>1b. Q1b?</p>
<input type="radio" name="1bradiogroup" value="1"> 1 <br>
<input type="radio" name="1bradiogroup" value="2"> 2 <br>
<input type="radio" name="1bradiogroup" value="3"> 3 <br>
</div>
<input type='button' id = "q1Next_btn" value='Save and Continue' />
</div>
<div id="secdiv" style="display:none">
<h1>2. Q2a</h1>
<br>
<div id="div_2a" name = "div_2a">
2a. just hit back btn to go back to Q1
<select id="select_2a" name="select_2a">
<option ></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="div_2b" name= "div_2b">
<p>2b. Q2b?</p>
<input type="radio" name="2bradiogroup" value="1"> No <br>
<input type="radio" name="2bradiogroup" value="2"> Yes <br>
</div>
<input type='button' id="q2Back_btn" value='Back' />
<input type='button' id="q2Next_btn" value='Save and Continue'/>
</div>

You can use jQuery's function trigger! in your form:
$('#form').trigger('reset');
Also check this: Resetting a multi-stage form with jQuery!

Remove all other div's on click of a image

<label>Project Type </label>
<div>
<select name="category" id="category" class="form-control ">
<option value="">Select Project Type</option>
<option value="Independent_House">Independent House</option>
<option value="Duplex_House">Duplex House</option>
<option value="Pent_House">Pent House</option>
</select>
</div>
<div class="cato" id="category_Independent_House" style="display:none">
<input type="button" id="addindependant" value="Add Property" />
<div id="cato_Independent_House">
<div class="form-group">
<label>Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Duplex_House" style="display:none">
<input type="button" id="addduplex" value="Add Property" />
<div id="cato_Duplex_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Pent_House" style="display:none">
<input type="button" id="addpenthouse value="Add Property" />
<div id="cato_Pent_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<script type="text/javascript">
js(function() {
js('#addindependant').click(function(e){
js('#cato_Independent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addduplex').click(function(e){
js('#cato_Duplex_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addpenthouse').click(function(e){
js('#category_Pent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
});
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
});
});
</script>
This is my code. When I select the category based upon the category selected the divs cato_Independent_House cato_Duplex_House and category_Pent_House get appended to their respective categories.
Consider first independant house is selected from drop down so its respective cato_Independent_House gets appended to the div with id id="category_Independent_House" on click of the button.after that when duplex house is selected from drop down its respective 'cato_Duplex_House' gets appended to div with id="cato_Duplex_House" on click of the button.
But when I go back and select Independant house it must not show previous selected div until the button is clicked. But here the div is already been displayed even the button is not clicked when I go back.The previous menu should show its div only when the button is clicked.i.e, the previous divs must get empty or removed when other option is selected.How to do this?

js
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('.cato').each(function() {
console.log(js('.cato'));
if(js(this).attr('data-visible') != "true") {
js(this).hide();
}
});
js('#category_'+selection).show('slow');
});
js('.addProperty').click(function(){
js(this).parents('.cato').attr('data-visible','true');
});
});
html
<input type="button" id="addduplex" value="Add Property" class="addProperty" />
add class addProperty to all your add property input
Working JsFiddle Link. I guess this is what you wanted

You should use the jquery hide method to hide the others divs depending on wich one you have selected:
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
if(selection=="Independent_House"){
js('#cato_Duplex_House').hide();
js('#cato_Pent_House').hide();
}else if(...){
{otherCases}
});});
And if you want to clear also the inputs selection of each div you could do something like this:
js("#input_controller_id_to_clear")[0].selectedIndex = -1;

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);
});