Change the values of radio buttons depending on dropdown selection - javascript

Hi I have been trying to set radio buttons to certain values depending on which select drop down was chosen.
First the select statement:
<select id="department" name="department" class="input-xlarge" onchange="setDefault();">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
I created a function that I thought would allow me to set the value, depenting on what is selected.
<script>
function setDefault() {
if (department.val() == '1'){
alert('One');
}
$("#radio-0").prop("checked", true);
</script>
I thought that if the val of department (the select drop down) was equal to 1 then set this value.
The error that I get in the console window is
*Uncaught TypeError: undefined is not a function*
I know this should be simple but as a jQuery novice I know I'm probably making a simple mistake.
Overall the goal would be to set a series of radio buttons to a specific value depending on the drop down selection. For example, if Read only was selected, certain values would be set as a 1, 2 ,3 4 or 5 (for a radio button) and so on depending on the drop down selection.
Thanks

Use jQuery onchange function.
$(document).ready(function () {
$("#department").change(function () {
if(this.value=='1')
{
alert("one");
}
$("#radio-0").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<select id="department" name="department" class="input-xlarge">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
<input type="radio" id="radio-0">

I would recommend using javascript for this. It is such a small request that you don't really need an external libarary.
The HTML based from yours and including some radio buttons
<select id="department" name="department" class="input-xlarge" onchange="setDefault(this);">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select><br />
<input type="radio" name="selectedop" id="radio-1" /><br />
<input type="radio" name="selectedop" id="radio-2" /><br />
<input type="radio" name="selectedop" id="radio-3" /><br />
<input type="radio" name="selectedop" id="radio-4" /><br />
<input type="radio" name="selectedop" id="radio-7" />
Then you simply add this javascript in your head. It selects the radio based on the value by combining "radio-" and the value to make the id.
function setDefault(input) {
document.getElementById("radio-" + input.value).checked = true;
}
JsFiddle Example: http://jsfiddle.net/bpmf3cks/

Try
$('#department').on('change',function() {
if ($(this).val() == '1') alert($(this).val())
})
http://jsfiddle.net/5x0h5g73/1/

Related

Change the background colour of Dropdown list depending on values using jQuery [duplicate]

This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 5 years ago.
This the HTML code
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
HTML output
:
Script
$(document).ready(function() {
$("#colorchg").each(function() {
var color = $("#colorchg").val();
$(this).css("background", color);
});
$("#colorchg").change(function() {
var color = $("#colorchg").val();
$(this).css("background", color);
});
});
But it only changes the bg-color of the first instance
How should the script change in order to implement it in every dropdown list
Try this:
$(document).ready(function() {
$(".colorchg").each(function() {
$(this).css("background", $(this).val());
});
$(".colorchg").change(function() {
$(this).css("background", $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control colorchg">
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
By using classes, jQuery will find more than one element to use. ID's need to be unique, so it assumes it's only one element.
Instead of searching for the value again in the functions, you should use this, otherwise the backgrounds will change to whatever the first option is set to.
You can't use the same ID multiple times on a page - IDs need to be unique. If you try to find it, it'll only get the first one, since only one should exist. Instead use the class .form-control as your selector.
id need to be unique. Beside create a common function and trigger that function onchange of select.The value val() will give current selected option. Use that value as css property value
function changeBck(elem) {
$(elem).css("background", $(elem).val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-lg-6">37.sample 1 </label>
<select class="form-control" id="colorchg_1" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">38. sample 2</label>
<select class="form-control" id="colorchg_2" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>
<label class="col-lg-6">39. sample 3</label>
<select class="form-control" id="colorchg_3" onchange='changeBck(this)'>
<option></option>
<option value="green">YES</option>
<option value="red">NO</option>
<option value="gray">N/A</option>
</select>

Disable text input unless a selector option is chosen

I have a selector with a list of options. One of the options is 'other' in which case the user may enter their own option in a textbox below.
How can I make the textbox disabled and greyed out only to become active when the 'other' option is selected?
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
$('#list').change(function() {//on change of select
$('#otherbox').prop('disabled', $('option:selected', this).val() != '4');//check if value is not other then disable
}).change();//call on change manually so on load will run the change event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list" name="Optionlist">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Other</option>
</select>
<br>
<br>
<label for="Other">Other:</label>
<input type="text" name="Other" id="otherbox" />
Maybe a little something like this:
$(document).ready(function() {
$("#list").change(function() {
$("#otherbox").prop("disabled", this.value != "4");
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>
<html>
<head>
<body>
<select onchange="func(this)" id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox" disabled/>
<script>
function func(obj){
document.getElementById('otherbox').setAttribute('disabled',true);
if(obj.value == 4)
document.getElementById('otherbox').removeAttribute('disabled');
}
</script>
</body>
</html>
An implementation without Jquery

HTML form with checkbox options to select fieldset

I have a form that is like the following:
<label>
scale a<input type="radio" name="sellorbuy" value="Yes" id="rdYes" />
</label>
<label class="leftspace">
scale b<input type="radio" name="sellorbuy" value="No" id="rdNo" />
</label>
<p class="searchpg">Price</p>
<fieldset id="sell">
<select id="pricemin" name="minsell" class="form-control">
<option value="50000">Min Price</option>
<option value="100000">£100,000</option>
<option value="200000" >£200,000</option>
<option value="300000" >£300,000</option>
<option value="400000" >£400,000</option>
</select>
<select id="pricemax" name="maxsell" class="form-control">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
</select>
</fieldset>
<fieldset id="let" style="display:none;">
<select id="lpricemin" name="minbuy" class="form-control">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
</select>
<select id="lpricemax" name="maxbuy" class="form-control">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
</select>
</fieldset>
This switches fieldsets by using the following:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
The trouble I am having is the search form that is submitted and displayed on the next page so we carry over the contents of the form. If someone has selected the 'Scale B' then that is already toggled on the next page but the fieldset has not changed? Is there any way to change to the jquery to detect which checkbox is toggled and change the fieldset accordingly or even modify the switch to make it work better?
Created a fiddle to show how the form works https://jsfiddle.net/v3waaa20/1/
Some slight changes and triggering change on load can do the trick.
$("input[name='sellorbuy']").change(function () {
value = $("input[name='sellorbuy']:checked").val();
$("#sell").toggle(value == "Yes");
$("#let").toggle(value == "No");
}).change();

Validation in drop downs on submit button click using javascript

I have three drop-down fields. I want to validate them using JavaScript when the submit button is clicked to see if any of the values in the three drop-down fields are not selected.
On click of submit button it should display a warning message indicating that one of the three drop-downs have not been filled.
Based on the information in the comments from my previous answer, this should work for you. I have tested it but you can refine the JavaScript if statement to test each individually and report a different message for each as long as you you always return false; to make sure the submission gets halted
function validateForm() {
if (document.getElementById("ddOne").value == "" || document.getElementById("ddTwo").value == "" || document.getElementById("ddThree").value == "") {
alert("You need to fill in all three dropboxes and not just some");
return false;
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
<label>Dropdown 1</label>
<select id="ddOne">
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
<br />
<label>Dropdown 2</label>
<select id="ddTwo">
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
<br />
<label>Dropdown 3</label>
<select id="ddThree">
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
<br />
<input type="submit" value="Submit">
</form>
</body>
</html>
Instead of using JavaScript, have you tried taking advantage of the required attribute of the select HTML tag?
When used, a drop-down field should look somewhat like this:
<select required>
<option value="">None</option>
<option value="Opt1">Option 1</option>
<option value="Opt2">Option 2</option>
<option value="Opt3">Option 3</option>
<option value="Opt4">Option 4</option>
</select>
When setup this way, you cannot submit a button for the form body without having a value defined option selected for that field.

Hiding/showing the select box options in jquery?

i have below code snippet in jsp
<HTML>
<BODY>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<div id="action1" class="action1">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</div>
<div id="action2" class="action2">
<option value="4"> 4 </option>
</div>
<option value="5"> 5 </option>
</select>
</BODY>
</HTML>
on click of certain button, i want to hide the options with id as "action1" and display the options with Id as "action2". So i tried this
$('#action1').hide();
$('#action2').show();
But that did not work.Not getting whats the issue? In firebug when i tried to inspect the select box, i did not find any div tag(i.e
with ids action1/action2 ) above options.
Use below javascript function where showOptionsClass is the class given to each option you want to show. This will
work in cross browser.
function showHideSelectOptions(showOptionsClass) {
var optionsSelect = $('#selectId');
optionsSelect.find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').attr('selected', false).hide();
optionsSelect.find('option.' + showOptionsClass).unwrap().show()
.first().attr('selected', 'selected');
}
You may not have <div> elements within a <select>, see for example this stackoverflow on the topic, which references this bit of the HTML spec.
Further, hiding options isn't cross browser compatible (see this stackoverflow (second answer)), as #Voitek Zylinski suggests, you would probably be better off keeping multiple copies of the select and toggling between them, or if keeping the id attribute is required then maybe even adjusting the innerHtml (yuck...).
You could maybe approach it like:
markup
<select onchange="doOperation()" class="js-opt-a">
<option value="default"> Start..</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</select>
<select onchange="doOperation()" class="js-opt-b">
<option value="default">Start...</option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
js
function doOperation() { /*whatever*/}
$(".js-opt-a").hide();
$(".js-opt-b").show();​​
See for example this jsfiddle
Not exactly ideal though!
You can not use div to group but you can assign class to options to group them.
Live Demo
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>​
$('.action1').hide();
$('.action2').show();​
You can't group options inside a div. You can group them inside an <optgroup>, but I don't think that's what you're aiming for.
What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options.
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$('.action1').wrap('<span></span>').hide();
});
$("#show").click(function(){
$('.action1').unwrap('<span></span>').show();
});
});
</script>
</head>
<body>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>​
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Categories