I have this radio buttons:
<input type="radio" name="type" id="pie" value="pie" />
<input type="radio" name="type" id="bar" value="bar" /><
<input type="radio" name="type" id="line" value="line" />
And I want a combobox based on seletected radio button.
<select id="Xcombo1" class="Xcombo">
<option value = "" >This options should be based on seletec radio</option>
</select>
Some code that ive already have:
$('input:radio[name=type]:checked').val(); // to get selected radio.
My question is, how can I have those options based on selected radio button ?
note: Anytime I selected a diferent radio button those options should dynamically change
Cheers.
$("input").click(function(){
if($(this).attr("checked"))
{
if(this.id == "pie")
{
$("#Xcombo1").html("<option value='1' >1</option><option value='2' >2</option>");
}
else if( this.id == "bar")
{
$("#Xcombo1").html("<option value='3' >3</option><option value='4' >4</option>");
}
else
{
$("#Xcombo1").html("<option value='5' >5</option><option value='6' >6</option>");
}
}
});
Check the below fiddle
http://jsfiddle.net/quG2S/12/
Heres an example for you to test, hopefully I understood what you wanted
HTML:
<label for="pie">PIE</label><input type="radio" name="type" id="pie" value="pie" />
<br />
<label for="bar">BAR</label><input type="radio" name="type" id="bar" value="bar" />
<br />
<label for="line">LINE</label><input type="radio" name="type" id="line" value="line" />
<br />
<br />
<select id="combopie" class="Xcombo" style="display:none;">
<option value="pie">Pie Options Here</option>
</select>
<select id="combobar" class="Xcombo" style="display:none;">
<option value="bar">Bar Options Here</option>
</select>
<select id="comboline" class="Xcombo" style="display:none;">
<option value="line">Line Options Here</option>
</select>
jQuery:
$(function () {
$('input[type=\'radio\']').click(function () {
$('select.Xcombo').hide();
$('#combo' + $(this).attr('id')).show();
});
});
Working example
HTML
<input type="radio" name="type" id="pie" value="pie" />
<input type="radio" name="type" id="bar" value="bar" />
<input type="radio" name="type" id="line" value="line" />
<select id="Xcombo1" class="Xcombo">
<option value = "pie">Pie</option>
<option value = "bar">Bar</option>
<option value = "line">Line</option>
</select>
Javascript
$("input[type='radio']").click(function(){
$("#Xcombo1 option[value='" + $(this).val() +"']").prop("selected", true);
});
This function binds a function to the click event of each radio button that uses the value of the clicked radio to select the appropriate option and set its selected property.
Normal Demo: http://jsfiddle.net/g82dB/
If you want to dynamically append the elements the following script can be used. It checks to make sure the option does not already exist, then either appends or selects.
$("input[type='radio']").click(function(){
if($("#Xcombo1 option[value='" + $(this).val() +"']").length ==0){
var option = $("<option />",{
"value": $(this).val(),
"text": $(this).val(),
"selected": "selected"
});
$("#Xcombo1").append(option);
}else{
$("#Xcombo1 option[value='" + $(this).val() +"']").prop("selected", true);
}
});
This works with the following HTML:
Dynamic Element Example: http://jsfiddle.net/g82dB/2/
Here's an example :
$(function() {
$('input:radio[name=type]').change(function() {
var radio = $(this);
// The "change" event can be triggered for an "unselecting" radio button, so we must check it.
if (radio.is(':checked')) {
// You may want to do something else
$('#Xcombo1 option').attr('value', radio.val());
}
});
});
And a jsfiddle : http://jsfiddle.net/wNZHr/
If you want to display different options according to the selected radio button, you can create options in javascript, or you can create all options directly in your html and use show/hide to only display the options you want.
Related
I have a form that has a checkbox; this checkbox when I check it, it disables another form which alternative contact form and set the values in first form which is
main contact to alternative contact. However, when I uncheck it remove "disable"
and set the values in the alternative form to the default. The problem that I am having with my code (which I provide below) is every time I hit save and the checkbox is unchecked. It set the values that inserted to default which is empty string.
$(".AlternativeContactFields").removeAttr("disabled");
$(".AlternativeContactFields").each(function (index, element) {
if ($(element).is("input")) {
$(element).val("");
} else if ($(element).is("select")) {
$(element).val(1);
}
});
How can I solve this?
I think this is what you want
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#save').click(function() {
$(".AlternativeContactFields").removeAttr("disabled");
$(".AlternativeContactFields").each(function (index, element) {
if ($(element).is("input")) {
// read the type attribute.
var type = $(element).attr('type');
switch(type) {
case 'checkbox':
case 'radio':
// uncheck box
$(element).prop('checked', false);
break;
case 'text':
default:
$(element).val("");
break;
}
} else if ($(element).is("select")) {
$(element).val(1);
}
});
});
});
</script>
<input type="button" value="Save" id="save"/><br/>
<input disabled="disabled" type="checkbox" checked="checked" value="My checkbox 1" class="AlternativeContactFields"/>My checkbox 1<br/>
<input disabled="disabled" type="checkbox" value="My checkbox 2" class="AlternativeContactFields"/>My checkbox 2<br/>
<input disabled="disabled" type="text" value="My textbox value 1" class="AlternativeContactFields"/><br/>
<input disabled="disabled" type="text" value="My textbox value 2" class="AlternativeContactFields"/><br/>
<select disabled="disabled" class="AlternativeContactFields">
<option value="0">my Option 0</option>
<option value="1">my Option 1</option>
<option value="2">my Option 2</option>
</select>
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 cannot find a perfect solution for this.
Is there a simple way to fadeIn the ".filter_on" div, if I click on a select option and/or radio button?
And by default, get this div to fade out again afterwards?
My fiddle
<div class="filter">
Filter <span class="filter_on">active</span>
</div>
<form>
<p>Vehicle?</p>
<select name="vehicle" size="2">
<option>Bike</option>
<option>Car</option>
</select>
</form>
<form>
<p>City?</p>
<input type="radio" id="all" name="city" value="All" checked>
<label for="all"> All</label></input>
<input type="radio" id="ny" name="city" value="New York">
<label for="ny"> New York</label></input>
<input type="radio" id="mh" name="city" value="Manhattan">
<label for="mh"> Manhattan</label></input>
</form>
You don't need to fadeOut since you cannot unselect from drop-down or cannot uncheck the radio button.
$('select, :radio').on('change', function() {
if ($('select option:selected').length === 0 && $(':radio:checked').val() === 'All') {
$('.filter_on').fadeOut();
} else {
$('.filter_on').fadeIn();
}
}).trigger('change');
trigger will execute this function automatically. Will fadeIn on the page load.
Demo: https://jsfiddle.net/tusharj/vyd7a2s8/1/
Demo -> http://jsfiddle.net/vyd7a2s8/4/
var defaultRadio = $(':radio:checked');
var defaultVehicle = $('[name=vehicle] option:selected');
$('[name=vehicle],[name=city]').on('change', function (e) {
var currentRadio = $(':radio:checked');
var currentVehicle = $('[name=vehicle] option:selected');
if (currentRadio[0].isEqualNode(defaultRadio[0]) && currentVehicle[0].isEqualNode(defaultVehicle[0])) {
$('.filter_on').fadeOut(500);
} else {
$('.filter_on').fadeIn(500);
}
});
Explanation - This will store the default selected values outside the function and uses them inside the click event to check the newly selected values.
I currently have 2 checkbox categories, one dropdown list, and a submit button in a form. The button shall stay 'disabled' until one checkbox of category A is checked and one of category B options is checked and an option of the select list is selected.
It works for the checkboxes (when I tested without list) but there is an issue with the list.
When I fill out the form from top to bottom (func --> plat --> lang) it doesn't work. Somehow it works when I select "lang" first and then check the boxes. It also works from top to bottom when I check another checkbox after the language was selected. That's weird.
So here is the HTML:
<h3>choose func</h3>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> func1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> func2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> func3<br/>
<br/>
<h3>choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> plat1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> plat2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> plat3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> plat4<br/>
<br/>
<h3>choose lang</h3>
<select name="sprache">
<option disabled selected> -- select an option -- </option>
<option name="deutsch" id="deutsch">Deutsch</option>
<option name="englisch" id="englisch">Englisch</option>
</select>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="Abfragen" disabled="">
And the jQuery/js:
$(function () {
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, #deutsch, #englisch").change(function () {
if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked'))
&&
($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked'))
&&
($("#deutsch").is(':selected') || $("#englisch").is(':selected')))
{
$('.inputButton').attr('disabled', false);
}
else
{
$('.inputButton').attr('disabled', true);
}
});
});
I have no idea why it doesn't work. You can reproduce this issue in the fiddle i set up: https://jsfiddle.net/3zqf4fxv/
I hope there is a fix.
Thanks and Regards!
Change
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, #deutsch, #englisch")
to
$(":input")
jsFiddle example
The issue lies with using #deutsch, #englisch in your selectors. The select element changes, not the options. The :input is just a jQuery shortcut to select what you have already in your example, but note if you have other input elements on your page this would not be ideal. You can just replace #deutsch, #englisch with select[name='sprache'].
Ex:
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, select[name='sprache']")
jsFiddle example