what I have working is 2 radio buttons and one listbox. When the first radio button is clicked, the listbox is disabled but when the second radiobutton is clicked, the listbox is available. I now have to modify the app to have two listboxes and 3 radiobuttons. If the first radio-button is clicked, I need both listboxes disabled. If the second radiobutton is clicked, I need only the first listbox to be disabled. If the third radio-button is selected, I need only the second listbox to be disabled. I have no idea how to begin to do this in Javascript or JQuery! Any help would be very appreciated!! (I'm working in ColdFusion if that is relevant).
This is the code I have working right now. I have to add one more radiobutton and another listbox to it.
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked){
document.getElementById("T1").disabled=true;
}else {
document.getElementById("T1").disabled=false;
}
}
</script>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>`
if your code is working can you just copy and paste the radio buttons and listbox you already have? if so this could work.
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<input type="radio" name="choice" value='3' onClick="check_radio()";>Foo
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=true;
}
else if (document.MedicaidResidents.choice[2].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=false;
}
else if (document.MedicaidResidents.choice[3].checked)
{
document.getElementById("T1").disabled=false;
document.getElementById("T2").disabled=true;
}
}
</script>
Please find the below jsfiddle as well as the code.
http://jsfiddle.net/Manoj85/3jy0crdx/
There are many solutions for this.
My solution is using JQuery to disable based on radio button selection. And highlight with red background when the list box is disabled.
HTML Code:
<form name="myForm" action="Medicaid_Residents.cfm" method="post" id='f1'>
<div>
<input type="radio" name="choice" value="1" checked> States
<input type="radio" name="choice" value="2"> Houses
<input type="radio" name="choice" value="3"> Other
</div>
<div>
<p> List Box 1 </p>
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
<div>
<p> List Box 2 </p>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
</form>
JS:
$(document).ready(function() {
var all_radio_buttons = document.myForm.choice;
var prev = null;
var selected_radio_value = "1";
doRefresh(selected_radio_value);
for (var i = 0; i < all_radio_buttons.length; i++) {
all_radio_buttons[i].onclick = function() {
console.log(this.value);
selected_radio_value = this.value;
doRefresh(selected_radio_value);
};
CSS Code:
form#f1 > div {
border: solid 1px red;
margin-bottom: 10px;
}
form#f1 > div > select {
width: 200px;
height: 100px;
}
form#f1 > div > select[disabled] {
background: red;
}
Hope this helps.
Related
I'm trying to limit the amount of checkboxes able to be checked according to what select option the user chooses i.e. option1 = 1 checkbox option 2 = 2 checkboxes and if they try to choose more then alert the user and .prop("checked", false).
but i just get weird stuff happening and i can't figure why please help!!
html:
<form>
<select onclick="systemSelected();" class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form onclick="limitCheckbox(userSelected);">
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
javascript:
var userSelected = 0;
function systemSelected() {
$(".mySelectBox option").each(function(){
if ($(this.selected)) {
userSelected = parseInt($(".mySelectBox").val());
}
});
}
function limitCheckbox(userSystem) {
$("input[type=checkbox]").click(function(){
if($("input[type=checkbox]:checked".length > userSystem)) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked".length === 0 )) {
alert("please select a game too play");
}
});
}
Don't use alerts (Why should a user feel stupid)
Use the disabled property (Make a user see & know)
var $ckb = $('[name*=box]'),
$sel = $('.mySelectBox');
function ckkk () {
var ckd = $ckb.filter(":checked").length,
max = parseInt($sel.val(), 10);
if(ckd > max) $ckb.prop({checked:false, disabled:false});
else $ckb.not(":checked").prop({disabled: ckd >= max});
}
$ckb.add($sel).on("change", ckkk);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
use $("input[type=checkbox]").on('change',function(){ selector which will fire event on every change of checkbox. And you can manage your cases with conditions in it.
Please check below snippet.
var userSelected = 0;
$("input[type=checkbox]").on('change',function(){
if($("input[type=checkbox]:checked").length > parseInt($(".mySelectBox").val())) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked").length === 0 ) {
alert("please select a game too play");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
$('input:checkbox').change(function() {
var number = $('.mySelectBox option:selected').val();
if ($('input:checkbox:checked').length > number) {
alert('more than selected')
$(this).prop('checked', false);//dont check the click checkbox
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
I have two radio buttons
Select whether A or B.
Select whether C or D.
Based on the two selections, I want my dropdown list to be updated
Here are my codes.
$(function() {
$("#A").hide();
$("#B").hide();
$("#C").hide();
$("#D").hide();
$('.AorB').change(function() {
if ($(this).val() == 'A') {
$('.CorD').change(function() {
if ($(this).val() == 'C') {
$("#AC").show();
$("#BC").hide();
$("#AD").hide();
$("#BD").hide();
$("#noselect").hide();
} else if ($(this).val() == 'D') {
$("#AC").hide();
$("#BC").hide();
$("#AD").show();
$("#BD").hide();
$("#noselect").hide();
}
});
} else if ($(this).val() == 'B') {
$('.CorD').change(function() {
if ($(this).val() == 'C') {
$("#AC").hide();
$("#BC").show();
$("#AD").hide();
$("#BD").hide();
$("#noselect").hide();
} else if ($(this).val() == 'D') {
$("#AC").hide();
$("#BC").hide();
$("#AD").hide();
$("#BD").show();
$("#noselect").hide();
}
});
} else {
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<tr>
<td>
<label>Select A or B:</label>
</td>
<span class="text_11">
<td><input type="radio" id="A" name="AorB" class="AorB" required value="A"/><radio style="font-size: 16px;"> A</radio>
<input type="radio" id="B" name="AorB" class="AorB" value="B"/><radio style="font-size: 16px;"> B </radio></span>
</td>
</tr>
<tr>
<td>
<label>Select C or D:</label>
</td>
<span class="text_11">
<td><input type="radio" id="C" name="CorD" class="CorD" required value="C"/><radio style="font-size: 16px;"> C</radio>
<input type="radio" id="D" name="CorD" class="CorD" value="D"/><radio style="font-size: 16px;"> D</radio></span>
</td>
</tr>
<tr>
<td class="select">
<label>Date:</label>
</td>
<td>
<select id="noselect" name="noselect">
<option value="1">Select</option>
<option value="1">select A or B first</option>
</select>
<select id="AC" name="AC">
<option value="">Select</option>
<?php include_once "AC.php"?>
</select>
<select id="BC" name="BC">
<option value="">Select</option>
<?php include_once "BC.php"?>
</select>
<select id="AD" name="AD">
<option value="">Select</option>
<?php include_once "AD.php"?>
</select>
<select id="BD" name="BD">
<option value="">Select</option>
<?php include_once "BD.php"?>
</td>
</select>
</tr>
I now have 2 issues:
Scenario 1: If I select A and then C, the drop down list changes to the correct values. If I then change A to B, the drop down list does not update.
Scenario 2: If I select D or C and then A or B, the drop down list does not change.
How do I improve the jquery such that anytime a radio button is selected in whatever order, the correct dropdown list is shown. very new to javascript so any help is appreciated.
If I understand your issue correctly, the below will do what you need.
The biggest issue with your current attempt is that when you click A, you add an event handler to the CorD element, but then if you change it to B you add another event handler to the CorD element and you dont remove the original event handler so when you change CorD, both events are fired. As you can see below, you can avoid that and (all the other duplicated code) by setting it up more simply
var $all=$('.all').hide();
$('.listen').change(function(){
$all.hide()
var thisLetter = $('[name="AorB"]:checked').val();
var thatLetter = $('[name="CorD"]:checked').val();
$all.each(function(){
var $this=$(this);
if($this.hasClass(thisLetter) && $this.hasClass(thatLetter)){
$this.show();
$('#noselect').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="A" name="AorB" class="listen" required value="a" />
<radio style="font-size: 16px;"> A</radio>
<input type="radio" id="B" name="AorB" class="listen" value="b" />
<radio style="font-size: 16px;"> B </radio>
<input type="radio" id="C" name="CorD" class="listen" required value="c" />
<radio style="font-size: 16px;"> C</radio>
<input type="radio" id="D" name="CorD" class="listen" value="d" />
<radio style="font-size: 16px;"> D</radio>
<br>
<br>
<select id="noselect" name="noselect">
<option value="1">Select</option>
<option value="1">select A or B first</option>
</select>
<select class="a c all" name="AC">
<option value="">Select AC</option>
</select>
<select class="b c all" name="BC">
<option value="">Select BC</option>
</select>
<select class="a d all" name="AD">
<option value="">Select AD</option>
</select>
<select class="b d all" name="BD">
<option value="">Select BD</option>
</select>
Hi im not currently that great at JavaScript and i have ran into a problem. im making a website to show off what i can do and in the section where i will show layouts i want to have options so they can change the colours of the page to see what it looks like. Now i have done this using radio buttons and it works great but i want to put it into a a drop down to make it look better.
The code with radio buttons:
<form action="">
<input onclick="change_color_body_blue()" type="radio" name="Content_body_color"/>Blue
<input onclick="change_color_body_green()" type="radio" name="Content_body_color"/>Green
<input onclick="change_color_body_red()" type="radio" name="Content_body_color"/>Red
<input onclick="change_color_body_yellow()" type="radio" name="Content_body_color"/>Yellow
<input onclick="change_color_body_orange()" type="radio" name="Content_body_color"/>Orange
<input onclick="change_color_body_purple()" type="radio" name="Content_body_color"/>Purple
<input onclick="change_color_body_brown()" type="radio" name="Content_body_color"/>Brown
<input onclick="change_color_body_cream()" type="radio" name="Content_body_color"/>Cream
<input onclick="change_color_body_pink()" type="radio" name="Content_body_color"/>Pink
<input onclick="change_color_body_hotpink ()" type="radio" name="Content_body_color"/>HotPink
<input onclick="change_color_body_black()" type="radio" name="Content_body_color"/>Black
<input onclick="change_color_body_white()" type="radio" name="Content_body_color"/>White
</form>
Now for the code with the dropdown
<form action="">
<select>
<option onchange="change_color_body_blue()" name="Content_body_color">Blue</option>
<option onchange="change_color_body_green()" name="Content_body_color">Green</option>
<option onchange="change_color_body_red()" name="Content_body_color">Red</option>
<option onchange="change_color_body_yellow()" name="Content_body_color">Yellow</option>
<option onchange="change_color_body_orange()" name="Content_body_color">Orange</option>
<option onchange="change_color_body_purple()" name="Content_body_color">Purple</option>
<option onchange="change_color_body_brown()" name="Content_body_color">Brown</option>
<option onchange="change_color_body_cream()" name="Content_body_color">Cream</option>
<option onchange="change_color_body_pink()" name="Content_body_color">Pink</option>
<option onchange="change_color_body_hotpink ()" name="Content_body_color">HotPink</option>
<option onchange="change_color_body_black()" name="Content_body_color">Black</option>
<option onchange="change_color_body_white()" name="Content_body_color">White</option>
</select>
</form>
I have tried onchange onclick and onselect but none work i have also added one of the events to the select tag this works but it will only change to 1 colour as only 1 of my functions can be entered can anyone see a way around this?
This should work.
<html>
<head>
</head>
<body>
<select onchange="javascript:changeColor(this);">
<option>Blue</option>
<option>Green</option>
<option>Red</option>
<option>Yellow</option>
<option>Orange</option>
<option>Purple</option>
<option>Brown</option>
<option>Cream</option>
<option>Pink</option>
<option>HotPink</option>
<option>Black</option>
<option>White</option>
</select>
<script>
function changeColor(el) {
var color = el.value;
document.body.style.background = color;
}
</script>
</body>
</html>
I'm using this code below to create a GET/Import button on my form. I want to import NAME and AGE for my users.
This is my jQuery script to get values:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
$.get('values.php', function(data) {
result = $.parseJSON(data);
$("input[name='nick_name']").val(result.avaname);
$("option[name='age']").val(result.tavaage);
});
});
});
</script>
This is my form with "input field for name" and "select option menu for age":
<tr>
<td><label>Name <span>(nickname)</span></label><input type="text" value="<? echo $nick_name;?>" id="nick_name" class="" name="nick_name" /></td>
<td><label>Age</label><select id="age" class="" name="age" ><option value="<? echo $age; ?>" ><? echo $age; ?></option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option value="27" >27</option>
</select>
</td>
</tr>
<input class="button" type="button" value="Get/Import" />
My problem is: When I press this button then the input field for name updates and shows the name as expected but the age select option is still empty?
My question is: How can I updates/add option values for my select menu for age?
(I know in my jQuery script LINE NR 8 is incorrect, but that's what I have tried)
All help will be highly appreciated :D
Try this:
$("#age option[value='"+result.tavaage+"']").attr("selected","selected");
Try these
$('#age').attr('value',result.tavaage);
OR
$("#age").val(result.tavaage);
you need to set the value to select element, not to the option.
$("#age").val(result.tavaage);
So I have a page that has a dropdown list and form. And what I want to do is depending on the option selected in the dropdown list I want to hide and show different parts of the form.
<select id="myselect>
<option id="option1">Option_1</option>
<option id="option2">Option_2</option>
<option id="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" />
<input id="input_2" name="input_2" type="text" />
<input id="input_3" name="input_3" type="text" />
</form>
So if Option_1 is selected then show input_1 and input_3, while hiding input_2
Plain JS
window.onload=function() {
document.getElementById("myselect").onchange=function() {
document.getElementById("input_2").style.display=(this.options[this.selectedIndex].value=="option1")?"none":"block";
}
document.getElementById("myselect").onchange(); //trigger
}
i managed to get your issue resolved by adding a 'value' attribute to your option tags:
<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>
and using the jquery .change() event:
$select = $('#myselect');
$('#input_2').hide();
$('#input_3').hide();
$select.change(function(){
if($(this).val() == "option1"){
if($('#input_1').is(":hidden")){
$('#input_1').show();
}
$('#input_2').hide();
$('#input_3').hide();
}
if($(this).val() == "option2"){
if($('#input_2').is(":hidden")){
$('#input_2').show();
}
$('#input_1').hide();
$('#input_3').hide();
}
if($(this).val() == "option3"){
if($('#input_3').is(":hidden")){
$('#input_3').show();
}
$('#input_1').hide();
$('#input_2').hide();
}
});
jsfiddle