I want to show/hide element in form with ng-change or whatever you suggest . here is my html:
<div ng-app ng-controller="Controller">
<select ng-model="myDropDown" ng-change="changeState(0)">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<div class="row-container">
first One
<span class="sp-right">
<label>
1
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
<div class="row-container">
second One
<span class="sp-right">
<label>
2
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
for example i want to show first one when user click on option 1 .
Fiddle
No need for ng-change, just use ng-if (or ng-show) to inspect the model's state:
<div class="row-container" ng-if="myDropDown == 'one'">
<div class="row-container" ng-if="myDropDown == 'two'">
Fiddle (with correct closing tags so that it actually works).
I would use ng-switch. If you want to show a div if none is selected then you can use ng-switch-default. If you want to default one of the div's below, then remove ng-switch-when= and replace it ng-switch-default
<div ng-app ng-controller="Controller" ng-switch on="myDropDown">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<div class="row-container" ng-switch-when="one">
first One
<span class="sp-right">
<label>
1
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
</div>
<div class="row-container" ng-switch-when="two">
second One
<span class="sp-right">
<label>
2
</label>
</span>
<span class="sp-left">
<input type="text">
</span>
</div>
</div>
http://plnkr.co/edit/QNdMxmYjR5LhsNvsHPpJ?p=preview
Related
$("#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>
I have 2 radio buttons which when I click on one of them I get dropdown menu where must choose amount.
So far I was able to make it check/unchek them but the problem is that when I uncheck the radio button dropdown doesn't hide again.
I'm not very good in javascript so please help on this one. Here is the part of code
<div class="radio">
<label><input type="radio" autocomplete="off" id="paypal" name="paypal"></label> PayPal
</div>
<div class="radio">
<label><input type="radio" autocomplete="off" name="bank" id="bank"></label> Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
</div>
</span>
Here is JS
$(document).ready(function(){
$("#paypal").change(function(){
var showOrHide =$(this).is(':checked');
$("#paypalamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#paypalamount',showOrHide )
});
$("#bank").change(function(){
var showOrHide =$(this).is(':checked');
$("#bankamount").toggle(showOrHide);
$('[name="description"]').toggleClass('#bankamount',showOrHide )
});
$("input[type='radio']").click(function()
{
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked')
{
$(this).removeAttr('checked');
$(this).attr('previousValue', false);
}
else
{
$("input[name="+name+"]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
});
And this is working demo of the code above JSFIDDLE
$(document).ready(function() {
$(":radio[name=bankpaypal]").change(function() {
if ($(this).is(':checked')) {
var name = $(this).attr('id')
$('span').hide()
$('span#' + name + 'amount').show()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" autocomplete="off" id="paypal" name="bankpaypal">
</label>PayPal
</div>
<div class="radio">
<label>
<input type="radio" autocomplete="off" name="bankpaypal" id="bank">
</label>Bank
</div>
<div class="form-group">
<span id="paypalamount" style="display:none">
<label class="col-sm-3 control-label" for="price"></label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="paypalamount1" required="required" class="form-control">
<option selected value="50">50</option>
</select>
</div>
</div>
</span>
<span id="bankamount" style="display:none">
<label class="col-sm-3 control-label" for="price">Please Choose Amount to Deposit</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">$</span>
<select id="bankamount1" required="required" class="form-control">
<option selected value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
Name of radio button should be same to select only 1
ID should be unique
Get the selected radio button and show its counter select using its ID since they are similar
Use following code to check whether a radio button is checked or not
if($("input:radio[name=paypal]:checked").val())
alert("checked");
else
alert("Not checked");
Do your process of hiding and showing inside the if else conditions.
You only need to check for the value of a RadioButton as not checked. If unchecked set the style attribute display:none for the respective dropdown again in Javascript.
Just like you do it for the checked-Status of the RadioButton and just change the condition and the actions like you want the RadioButtons to behave.
How do I use ng-hide based on the previous select dropdown? I would like to show #additional-option if option C is selected in the dropdown.
<div class="form-group">
<label class="control-label col-md-3">Option:
<span class="required">
*
</span>
</label>
<div class="col-md-4">
<select class="form-control">
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</div>
</div>
<!-- Show the below only if C is selected -->
<div class="form-group" id="additional-option">
<label class="control-label col-md-3"></label>
<div class="col-md-4">
<label>
<div class="checker">
<span>
<input type="checkbox">
</span>
</div>
Additional option
</label>
</div>
</div>
You bind the view controls to scope items and check the values in other bindings. So in your case you can bind your first select to scope as below.
ng-model="formData.selectedLetter"
Then you can use ng-show in the next control to check the value for the previous select control.
ng-show="formData.selectedLetter === 'C'"
You could also use ng-hide if you must, by reversing the condition expression.
This will ensure that the second control is only visible if the formData.selectedLetter is 'C'.
You simply need to setup a two-way binding on your element like so
<select class="form-control" ng-model="selectedOption">
and use that value in the ng-show directive for the div that needs to be hidden, like so
<div ng-show="selectedOption === 'C'" class="form-group" id="additional-option">
here's the plunker - http://plnkr.co/edit/XsXs4uhNTB6cKAL4IM5f?p=preview
<div class="r_row">
<div class="row field_currency">
<div class="f_row"><label class="" for="currency">Currency</label></div>
<div class="r_row">
<select id="currency" name="currency" class=" select">
<option value="ron" >USD</option>
<option value="eur" selected="selected">EUR</option>
</select>
<div class="error context" id="error_currency"></div>
<div class="hint context" id="hint_currency"></div>
<span class="checked"> </span>
<div class="fancy_select"><div class="first" value="USD">USD</div><div class=" last" value="eur">EUR</div>
<br clear="all">
</div></div>
<br style="clear:both">
</div>
</code></pre>
I want to use two divs <div>USD</div><div>EUR</div> , and with the help of jQuery , if i click on USD i want to change also the value of the Select box, and add a custom class to the USD div, if i clik on EUR , change the value of the select to EUR, remove the class from USD and add that class to EUR.
How can I do that ?
Thanks
Try this:
<script>
$(document).ready(function(){
$('.first').click(function(){
$('.first').addClass('className');
$('.last').removeClass('className');
$('option[value=ron]').prop("selected", true);
});
$('.last').click(function(){
$('.last').addClass('className');
$('.first').removeClass('className');
$('option[value=eur]').prop("selected", true);
});
});
</script>
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();
}