I have a form with a yes|no question displayed by radio selectors. I have two divs each one containing different drop downs based on the yes|no response. I cannot figure out how to show one and hide the other.
jsFiddle of this code
$(document).ready(function(){
$("input[name=radio_button]").change(function() {
var test1= $(this).val();
$("#"+test1).show();
$("div.test2").hide();
});
$("input[name=radio_button]").select(function() {
var test2= $(this).val();
$("#"+test2).show();
$("div.test1").hide();
});
});
<p>
<label class="required"> </label>
Yes <input name="radio_button" id="radio_button" type="radio" value="test2" onChange="" />
No <input name="radio_button" id="radio_button" type="radio" value="test1" />
</p>
<p>
<label class="required">Device: </label><br />
<div id="test1" class="test1_div">
<label style="font-weight:600;">test1</label>
<select name="order.item" id="item" >
<option value="default">Please Select item</option>
</select>
</div>
<div id="test2" class="test2_div">
<label style="font-weight:600;">item2</label>
<select name="order.item" id="device">
<option value="default">Please Select Device</option>
</select>
</div>
</p>
To make one hidden and other visible , you have to first hide both the blocks then add show() on the block you want to see. This will work for you.
Assuming your markup (html) is correct, try the following. It binds to click-events of those radio buttons (both of them), always hides both divs first, and then shows the appropiate div only (the one that belongs to the radio button clicked).
$(document).ready(function(){
$("input[name=radio_button]").click(function() {
var test= $(this).val();
$("div.test1, div.test2").hide(); //Hide both divs
$("#"+test).show();
});
});
Related
i am trying to loop through the radio buttons by name with 'each' function..the each function is not working and it is applying the logic only once and it is not looping for the next time..
My use case is, when user selects value from the select dropdown, needs to enable both the radio buttons and if the user deselects the dropdown- needs to disable back..
Here in my case, each function is looping only once and after that it is getting exit from it..Need help in figuring disable/enable based on dropdown selection..
html code:-
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
jquery:
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(){
$("#authPermission").prop('disabled',false);
$("#authPermission").prop('checked',false);
});
}
else{
$("#authPermission").each(function(){
$("#authPermission").prop('disabled',true);
$("#authPermission").prop('checked',false);
});
}
});
You cannot have more than one element with the same ID. So, I would change your code by removing the id attribute and putting a new value for the class attribute, then fetch the object using jquery class selector.
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser authPermission" value="anyUser" name="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser authPermission" value="groupUser" name="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
And jQuery code :
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(elemId, elem){
$(elem).prop('disabled',false);
$(elem).prop('checked',false);
});
}
else{
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
}
});
But, if we take a better look at your code, I do not understand why you want to use "each". You can achieve the same thing without it :
// Following code :
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
// Does the same thing as this one :
$(".authPermission").prop('disabled', true).prop('checked', false);
I refactored your code. Also enables the input field when the appropriate radio is clicked. This sould work:
function updateUI() {
var select = $("#authType");
var value = select.val();
var should_appear = (value.length == 0);
$("input:radio[name='authPermission']").attr('disabled',should_appear);
}
//binding...
$("input:radio").on("click", function() {
var should_display_textbox = !($(this).val() === "groupUser");
console.log(should_display_textbox);
$("input:text[name='authPermissionValue']").attr('disabled', should_display_textbox);
});
$("#authType").change(function(){
updateUI();
});
$(document).ready(function() {
updateUI(); //update also when page load
});
Something like this maybe?
$("#authType").change(function(){
var disabled = !$(this).val() ? true : false;
$("input:radio[name='authPermission']").each(function(){
$(this).prop('disabled', disabled );
$(this).prop('checked',false);
});
});
I need a solution
I have two radio buttons for measurement in cm and inch.
<html>
<lable class="radioinline">Measurement(cm)</lable>
<input type="radio" name="size" id="radio0"></input>
<lable class="radioinline">Measurement(inch)</lable>
<input type="radio" name="size" id="radio1"></input>
</html>
and one dropdown list box with below listed values in hidden form.
<select id="measure" name="chest" hidden>
<option>70cm/27Inch</option>
<option>71cm/28Inch</option>
<option>72cm/29Inch</option>
</select>
my requirement is on click of radio button either I get the values in cm or in inch in dropdown list which is actually in format of "cm/inch".
Please help to resolve it.
Change the select option while clicking radio button.
Try this code.
$(document).ready(function() {
$("#radio0").click(function() {
var measure = $("#measure");
measure.show();
measure.find("option").remove();
measure.append("<option>70cm</option>");
measure.append("<option>71cm</option>");
measure.append("<option>72cm</option>");
});
$("#radio1").click(function() {
var measure = $("#measure");
measure.show();
measure.find("option").remove();
measure.append("<option>27Inch</option>");
measure.append("<option>28Inch</option>");
measure.append("<option>29Inch</option>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radioinline">Measurement(cm)</label>
<input type="radio" name="size" id="radio0" />
<label class="radioinline">Measurement(inch)</label>
<input type="radio" name="size" id="radio1" />
<select id="measure" name="chest" hidden>
<option>70cm/27Inch</option>
<option>71cm/28Inch</option>
<option>72cm/29Inch</option>
</select>
Hope this will help you.
Modified Answer
Store the value in data property for each option and use that value while clicking the radio buttons
Try this code.
$(document).ready(function() {
$("#radio0").click(function() {
var measure = $("#measure"),
options = measure.find("option");
options.each(function() {
var value = $(this).data("value").split("/")[0];
$(this).text(value);
});
measure.show();
});
$("#radio1").click(function() {
var measure = $("#measure"),
options = measure.find("option");
options.each(function() {
var value = $(this).data("value").split("/")[1];
$(this).text(value);
});
measure.show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radioinline">Measurement(cm)</label>
<input type="radio" name="size" id="radio0" />
<label class="radioinline">Measurement(inch)</label>
<input type="radio" name="size" id="radio1" />
<select id="measure" name="chest" hidden>
<option data-value="70cm/27Inch">70cm/27Inch</option>
<option data-value="71cm/28Inch">71cm/28Inch</option>
<option data-value="72cm/29Inch">72cm/29Inch</option>
</select>
I would like a certain 'div' to be visible when i select a radio button and would like the same div to get hidden when i select the other radio button. How can i achieve this. Below is my attempt. Please let know what is wrong here.
<label>For State govt. Ex- Employee
<span class="small">Select if you are a state govt. ex-employee</span>
</label>
<p>
<label>Yes</label>
<input type="radio" name="stateGov" id="stategov" value="yes" class="choice" onClick="stateGovOptions()"/>
<label>No</label>
<input type="radio" name="stateGov" id="stategov" value="no" class="choice" onClick="stateGovOptions()"/>
</p>
<!-- State govt. ex- employees -->
<div id="stateOptions" style="visibility:hidden">
<label>
<span class="small">Select </span>
</label>
<p>
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
<option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
<option value="less">Less than or equal to one year</option>
<option value="between">More then one but less than two years</option>
<option value="more">More than two years</option>
</select>
</p>
</div>
when the 'yes' radio button is selected the div with the id 'stateoptions' should be visible and when the 'no' radio button is pressed it should get hidden again. To achieve this below is my js attempt.
/* displays the contents when state gov ex-employee selected and removes it when not selected */
function stateGovOptions()
{
if(document.getElementById('stategov').value == 'yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}
Pressing the yes button displays the required div, but pressing the no button also makes it visible, despite the 'else' block in the js function.
Please explain what am i missing out here.
Your html is invalid because you've used the same id on multiple elements. Which in turn means that it doesn't really make sense to try to select those elements using document.getElementById(), since that method returns a single element (or null) - so how would it know which element you mean?
A minimal change to your existing code to get it to work would be to pass the value of the clicked item to your function:
<input type="radio" name="stateGov" value="yes" class="choice"
onClick="stateGovOptions(this.value)"/>
<label>No</label>
<input type="radio" name="stateGov" value="no" class="choice"
onClick="stateGovOptions(this.value)"/>
...and then use it like this:
function stateGovOptions(val)
{
if(val == 'yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
document.getElementById('stateOptions').setAttribute('style','visibility:hidden');
}
Demo: http://jsfiddle.net/ryxCM/
Note that normally one wouldn't overwrite the entire style attribute to set one property, one would set just the property in question:
document.getElementById('stateOptions').style.visibility = 'visible';
Demo: http://jsfiddle.net/ryxCM/1/
Do you even need JS for this?
Unwrapping the elements allows you to do this with pure CSS.
Codepen Example
CSS
#stategov1 ~ #stateOptions {
visibility:hidden;
}
#stategov1:checked ~ #stateOptions {
visibility:visible;
}
HTML
<form>For State govt. Ex- Employee
<span class="small">Select if you are a state govt. ex-employee</span>
<label>Yes</label>
<input type="radio" name="stateGov" id="stategov1" value="yes" class="choice"/>
<label>No</label>
<input type="radio" name="stateGov" id="stategov2" value="no" class="choice"/>
<!-- State govt. ex- employees -->
<div id="stateOptions">
<label>
<span class="small">Select </span>
</label>
<select title="stateGovExEmp" name="stateGovExEmp" id="fdivision">
<option value="state_gov_lev_not_sel">--Select Level At Which Worked At State --</option>
<option value="less">Less than or equal to one year</option>
<option value="between">More then one but less than two years</option>
<option value="more">More than two years</option>
</select>
</div>
</form>
Then it's a matter of basic styling
Try this after removing the duplicate IDS
document.getElementById('stateOptions').style.visibility=document.getElementsByName('stategov')[0].checked?"visible":"hidden";
You may want to use display block/none to not have the div take up any space
Try this
function stateGovOptions(){
if(document.getElementById('stategov').value =='yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
document.getElementById('stateOptions').setAttribute('style', 'display:none');
}
ById('stategovfunction stateGovOptions(){
if(document.getElementById('stategov').value =='yes')
document.getElementById('stateOptions').setAttribute('style','visibility:visible');
else
I have a dropdown with 3 options option1, option2 and option3 then I have 3 text fields for each option, I want the text fields to be hidden until 1 option is selected then I want to show only those 3 fields.
I have been searching and trying a lot of javascript functions but they are not working at all or they only show 1 of the text fields but they don't hide back if they switch option.
I gave up and ask.
You can try jQuery. Start by wrapping your fields within divs, (each se group of textboxes in each div)
use this to hide them
CSS
}
.hidden {
display:none;
}
then use this function
jQuery
$(function(){
$("select[name='option1']").change(function(){
if ($(this).val() == "value1"){
$("div[name='group1']").show();
$("div[name='group2']").hide();
$("div[name='group3']").hide();
}
});
and your form elements should be something like this
HTML
<select name="option1" id="option1">
<option value="value1">value</option>
<option value="value2">value</option>
<option value="value3">value</option>
</select>
<div id="group1" name="group1" class="hidden" style="display: block; ">
<label>text:</label>
<input type="text" name="text1"><br><br>
<label>text:</label>
<input type="text" name="text2"><br><br>
<label>text:</label>
<input type="text" name="text3">
</div>
Put a class on the select and input tags
<select class="opts">...</select>
// Other select tags
<input class="inputs" style="display: none; " ...>
// Other input tags
// Somewhere in a script tag
$('.opts').on('change', function() {
$('.inputs').show()
$('.opts').hide()
});
The following worked perfectly for my needs. Took the state of a checkbox and did wonderful things for me; Made 3 different form elements visible (vs. show/hide) based on checkbox checked or not checked. Simple, I guess. Then again, I base "simple" on how symmetrical the code looks and if it's less that 10 lines. Other than that, I'm lost. However, I've officially given up on messing around with IE's checkbox border issue and X-browser alignment yippeedoodles. I want pixel perfect the hard way. But I lost that battle. But rather than get into any discussion about that, I need to accomplish the same thing using a form select box as I was able to do with the checkboxes (below):
<form id="form">
<input id="checkbox" name="checkbox" type="checkbox" onclick="showhideid" />
</form>
#IdOne, #IdTwo, #IdThree (visibility:hidden;}
function showhideid()
{
if (document.form.checkbox.checked)
{
document.getElementById("IdOne").style.visibility = "visible";
document.getElementById("IdTwo").style.visibility = "visible";
document.getElementById("IdThree").style.visibility = "visible";
document.getElementById("IdFour").setAttribute("class", "required");
}
else
{
document.getElementById("IdOne").style.visibility = "hidden";
document.getElementById("IdTwo").style.visibility = "hidden";
document.getElementById("IdThree").style.visibility = "hidden";
document.getElementById("IdFour").setAttribute("class", "");
}
}
Now, if I can accomplish the same thing using a select box (below), I will die a happy man.
This is as far as I've gotten. I'm super dizzy from reading Jquery/CSS man pages and I just can't put it all together.
<html>
<form id="form">
<select name="SelectBox">
<option>Make a Choice</option>
<option value="Value1">Selection1</option>
<option value="Value2">Selection2</option>
<option value="Value3">Selection3</option>
</select>
<label id="IdOne" for="input1">MeAndMyInputAreInvisibleByDesign</label>
<input id="IdTwo" name="input1" type="text">
<span id="IdThree">Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="I have none, but I will soon. I hope" />
</form>
</html>
take a look at the select tag:
<select name="SelectBox">
<option>Make a Choice</option>
<option value="IdTwo">Selection1</option> <!-- the value should be the id of the input field -->
<option value="IdThree">Selection2</option>
<option value="IdFour">Selection3</option>
</select>
Now you must give a selector class to each element you want to show/hide:
<input id="IdTwo" name="input1" type="text" class="toggle">
<span id="IdThree" class="toggle">
Im Not In display:none Mode I'm In visibility:hidden Mode. Big difference."
</span>
<input id="IdFour" name="input2" type="text" class="toggle" />
Now look at the javascript:
jQuery(document).ready(function(){
jQuery('input[name="SelectBox"]').change(function(){
jQuery('.toggle').css({"visibility":"hidden"});//Hide all
jQuery("#" + jQuery(this).val()).css({"visibility":"visible"});
});
});
You can do something like this:
<html>
<form id="form">
<input type="text" id="IdOne" class="toggle" />
<input type="text" id="IdTwo" class="toggle" />
<input type="text" id="IdThree" class="toggle" />
<select name="SelectBox" id="selectBox">
<option value="0">Make a Choice</option>
<option value="IdOne">First element</option>
<option value="IdTwo">Second element</option>
<option value="IdThree">Third element</option>
</select>
</html>
this in javascript:
jQuery(document).ready(function(){
jQuery("#selectBox").change(function(){
jQuery(".toggle").hide();
jQuery("#" + jQuery(this).val()).show();
});
});