Develop Reference

How to disable & Enable input element with html selector option

I want to make input element name="sellprice" enable if i select value sell option else input element will be disabled.
<select id="selling" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
Here is my Javascript Code, I have try this below code but it's not working.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "free"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});

Please have a look I hope it's useful for you.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "sell"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});

I want to make input element name="sellprice" enable
- that is not an input, it's a dropdown
If i select value sell option else input element will be disabled. - from your current explanation i understand that you want to disable the drop-down if the third option is selected
If the third option is selected, the drop-down will be disabled.
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#mounth').prop( "disabled", true );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't Want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
If you want to disable the input if the third option is selected, the following code will do it
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#textInput').prop( "disabled", true );
} else {
$('#textInput').prop( "disabled", false );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="" selected="selected">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 ">
</div>

<select id="mounth" onchange="myOnChangeFunction()" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
in js
<script>
function myOnChangeFunction() {
var val = document.getElementById("mounth").value;
if(val === "sell"){
document.getElementById('4').disabled = false;
}else{
document.getElementById('4').disabled = true;
}
}
</script>

Div doesn't hide on-change

Hi I'm having a hard time hiding my div. my CampusID div doesnt hide. Any help / suggestion would be greatly appreciated
$(document).ready(function() {
$('#Type').change(function() {
if ($('#type').val() == '1') {
$('#CampusID').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input form-control" id="Type" name="Type" required>
<option value="1">Student</option>
<option value="2">Employee</option>
</select>
<div class="form-group" id="CampusID">
<label>Campus</label>
<select class="input form-control" id="CampusID" name="CampusID">
<option value="CampusID">---Select Campus---</option>
</select>
</div>

selectors are case-sensitive, type should be Type in if
if($('#Type').val() == '1') {
or even
if( $(this).val() == '1') {

Typo
if($('#type').val() == '1') {
should be
if($('#Type').val() == '1') {

You had one Typo in your code (you selected $("type"), but it should have been $("Type")) and additionally you closed the $(document).ready() twice with });
As for the future I would advice you to use camelCase for IDs instead of PascalCase, which is typically used for class names in Javascript.
<select class="input form-control" id="type" name="type" required>
<option value="1">Student</option>
<option value="2">Employee</option>
</select>
<div class="form-group" id="CampusID">
<label>Campus</label>
<select class="input form-control" id="CampusID" name="CampusID">
<option value="CampusID">---Select Campus---</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#type').change(function () {
if ($(this).val() == '1') {
$('#CampusID').hide();
}
});
});
</script>

Disabling select options within modal window based on previous select options being disabled?

I have multiple select dropdown in a modal window that prepopulates based on identical select dropdowns on the main page (I am using Foundation 4). On both dropdown menus, there is a certain combination that the user cannot pick. I have all this working, except when the modal window comes up the user can make an illegal selection at first, unless they change the option and then try to change it again. I need it to make the illegal option greyed out when the modal window pops up, and not after they change the selection on the modal window like I have it now. Can anyone help me?
Here is the HTML:
<!-- THE ON-PAGE DROPDOWN -->
<div id="choose">
<h1><strong>Choose your FREE bag of Coffee</strong></h1>
<!--START BLENDS-->
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="blend1" id="blend1">
<option value="">Choose Blend</option>
<option value="">—————</option>
<option value="1"> Light</option>
<option value="2">Medium</option>
<option value="3">Dark</option>
<option value="4">Robust</option>
<option value="5">French Vanilla</option>
<option value="6">Caramel Vanilla</option>
<option value="7">Hazelnut & Cinnamon</option>
<option value="8">Passionata — Chocolate Truffles</option>
</select>
</div>
</div>
<!--END BLENDS-->
<fieldset>
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="grind1" id="grind1">
<option value="">Choose Grind</option>
<option value="">—————</option>
<option value="1">Ground</option>
<option value="2">Whole Bean</option>
</select>
</div>
</div>
<div class="clearfix"></div>
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="type1" id="type1">
<option value="">Choose Type</option>
<option value="">—————</option>
<option value="1">Regular</option>
<option value="2">Decaf</option>
</select>
</div>
</div>
</fieldset>
</div>
<!-- END OF MAIN PAGE DROPDOWN -->
<!-- MODAL WINDOW HTML -->
<div class="choice" >
<select name="blend2" id="blend2">
<option value="">Choose Blend</option>
<option value="">—————</option>
<option value="1">Light</option>
<option value="2">Medium</option>
<option value="3">Dark</option>
<option value="4">Robust</option>
<option value="5">French Vanilla</option>
<option value="6">Caramel Vanilla</option>
<option value="7">Hazelnut & Cinnamon</option>
<option value="8">Chocolate Truffles</option>
</select>
</div>
<div class="choice2">
<select name="grind2" id="grind2">
<option value="">Choose Grind</option>
<option value="">—————</option>
<option value="1">Ground</option>
<option value="2">Whole Bean</option>
</select>
<select name="type2" id="type2">
<option value="">Choose Type</option>
<option value="">—————</option>
<option value="1">Regular</option>
<option value="2">Decaf</option>
</select>
</div>
Here is the JS/jQuery:
<script>
$("#blend1").change(function () {
if ($(this).val() == "1") {
$("#blend2").val("1");
}
if ($(this).val() == "2") {
$("#blend2").val("2");
}
if ($(this).val() == "3") {
$("#blend2").val("3");
}
if ($(this).val() == "4") {
$("#blend2").val("4");
}
if ($(this).val() == "5") {
$("#blend2").val("5");
}
if ($(this).val() == "6") {
$("#blend2").val("6");
}
if ($(this).val() == "7") {
$("#blend2").val("7");
}
if ($(this).val() == "8") {
$("#blend2").val("8");
}
});
$("#grind1").change(function () {
if ($(this).val() == "1") {
$("#grind2").val("1");
}
if ($(this).val() == "2") {
$("#grind2").val("2");
}
});
$("#type1").change(function () {
if ($(this).val() == "1") {
$("#type2").val("1");
}
if ($(this).val() == "2") {
$("#type2").val("2");
}
});
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("select[name='grind1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type1'] option[value=2]").attr('disabled', false);
}
});
$("select[name='type1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind1'] option[value=2]").attr('disabled', false);
}
});
});
</script>
<!-- NO BONUS UPSELL -->
<script language="javascript" type="text/javascript">
$.noConflict();
$(document).ready(function() {
$("select[name='grind2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type2'] option[value=2]").attr('disabled', false);
}
});
$("select[name='type2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind2'] option[value=2]").attr('disabled', false);
}
});
});
</script>
If anyone could help me, that would be fantastic!

Select list auto update on any kind of change?

I have a jQuery that when you click on a select option it will show the next one, but you have to click, you cant just use the down arrow or "tab" to the next option. I am wondering what options do I have to make this work?
Here is my jQuery:
function typefunction()
{
var itemTypes = jQuery('#type');
var select = this.value;
itemTypes.change(function () {
if ($(this).val() == '1-Hand') {
$('.1-Hand').show();
$('.2-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.1-Hand').hide();
if ($(this).val() == '2-Hand') {
$('.2-Hand').show();
$('.1-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.2-Hand').hide();
if ($(this).val() == 'Armor') {
$('.Armor').show();
$('.2-Hand').hide();
$('.off').hide();
$('.1-Hand').hide();
}
else $('.Armor').hide();
if ($(this).val() == 'Off-Hand') {
$('.Off').show();
$('.2-Hand').hide();
$('.1-Hand').hide();
$('.Armor').hide();
}
else $('.Off').hide();
if ($(this).val() == '1-Hand') {
$('.one-hand-dps').show();
$('.item-armor').hide();
$('.two-hand-dps').hide();
}
else $('.one-hand-dps').hide();
if ($(this).val() == '2-Hand') {
$('.two-hand-dps').show();
$('.one-hand-dps').hide();
$('.item-armor').hide();
}
else $('.two-hand-dps').hide();
if ($(this).val() == 'Armor') {
$('.item-armor').show();
$('.one-hand-dps').hide();
$('.two-hand-dps').hide();
}
else $('.item-armor').hide();
});
}
And the HTML:
<div class="input-group item">
<span class="input-group-addon">Type</span>
<select id="type" name="type" class="form-control" onclick="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
</div>
<div class="input-group item">
<span class="1-Hand input-group-addon" style="display: none;">Sub-Type</span>
<select class="1-Hand form-control" name="sub[1]" style="display: none;">
<option value="All 1-Hand Item Types">All 1-Hand Item Types</option>
<option>Axe</option>
<option>Ceremonial Knife</option>
<option>Hand Crossbow</option>
<option>Dagger</option>
<option>Fist Weapon</option>
<option>Mace</option>
<option>Mighty Weapon</option>
<option>Spear</option>
<option>Sword</option>
<option>Wand</option>
</select>
</div>
<div class="input-group">
<span class="2-Hand input-group-addon" style="display: none; ">Sub-Type</span>
<select class="2-Hand form-control" name="sub[2]" style="display: none;">
<option>All 2-Hand Item Types</option>
<option>Two-Handed Axe</option>
<option>Bow</option>
<option>Diabo</option>
<option>Crossbow</option>
<option>Two-Handed Mace</option>
<option>Two-Handed Mighty Weapon</option>
<option>Polearm</option>
<option>Staff</option>
<option>Two-Handed Sword</option>
</select>
</div>
<div class="input-group">
<span class="Armor input-group-addon" style="display: none;">Sub-Type</span>
<select class="Armor form-control" name="sub[3]" style="display:none;">
<option>All Armor Item Types</option>
<option>Amulet</option>
<option>Belt</option>
<option>Boots</option>
<option>Bracers</option>
<option>Chest Armor</option>
<option>Cloak</option>
<option>Gloves</option>
<option>Helm</option>
<option>Pants</option>
<option>Mighty Belt</option>
<option>Ring</option>
<option>Shoulders</option>
<option>Spirit Stone</option>
<option>Voodoo Mask</option>
<option>Wizard Hat</option>
</select>
</div>
<div class="input-group">
<span class="Off input-group-addon" style="display: none;">Sub-Type</span>
<select class="Off form-control" name="sub[4]" style="display:none;">
<option>All Off-Hand Item Types</option>
<option>Mojo</option>
<option>Source</option>
<option>Quiver</option>
<option>Shield</option>
</select>
</div>

If you use onclick attribute in the select, then it stands to a reason that it requires a mouse click in order to work. Try using onchange for instance and keyboard usage should also work.
<select id="type" name="type" class="form-control" onchange="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
Also see this question, for more details about how to handle both clicks and keys immediately.

How can I show a hidden div when a select option is selected?

I want to use plain JavaScript. I have a drop down list (<select> with a number of <option>s). When a certain option is selected I want a hidden div to display.
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
Then I'm trying it with this vanilla JavaScript code:
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use?

try this:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>

Try handling the change event of the select and using this.value to determine whether it's 'Yes' or not.
jsFiddle
JS
document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('hidden_div').style.display = style;
});
HTML
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>

I think this is an appropriate solution:
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script>

You should hook onto the change event of the <select> element instead of on the individual options.
var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
Demo

Being more generic, passing values from calling element (which is easier to maintain).
Specify the start condition in the text field (display:none)
Pass the required option value to show/hide on ("Other")
Pass the target and field to show/hide ("TitleOther")
function showHideEle(selectSrc, targetEleId, triggerValue) {
if(selectSrc.value==triggerValue) {
document.getElementById(targetEleId).style.display = "inline-block";
} else {
document.getElementById(targetEleId).style.display = "none";
}
}
<select id="Title"
onchange="showHideEle(this, 'TitleOther', 'Other')">
<option value="">-- Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Other">Other --></option>
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title"
style="display:none;"/>

Check this code. It awesome code for hide div using select item.
HTML
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<div id="div1" style="display:block;">
<input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
<input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
<input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
<input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
<datalist id="cars">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</datalist>
</div>
JS
<script>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == "1")
{
displayDiv(prefix,"1");
}
if(selectedOption == "2")
{
displayDiv(prefix,"2");
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
</script>

<select id="test" name="form_select" onchange="showDiv()">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
function showDiv(){
getSelectValue = document.getElementById("test").value;
if(getSelectValue == "1"){
document.getElementById("hidden_div").style.display="block";
}else{
document.getElementById("hidden_div").style.display="none";
}
}
</script>

you can use the following common function.
<div>
<select class="form-control"
name="Extension for area validity sought for"
onchange="CommonShowHide('txtc1opt2', this, 'States')"
>
<option value="All India">All India</option>
<option value="States">States</option>
</select>
<input type="text"
id="txtc1opt2"
style="display:none;"
name="Extension for area validity sought for details"
class="form-control"
value=""
placeholder="">
</div>
<script>
function CommonShowHide(ElementId, element, value) {
document
.getElementById(ElementId)
.style
.display = element.value == value ? 'block' : 'none';
}
</script>

function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>

take look at my solution
i want to make visaCard-note div to be visible only if selected cardType is visa
and here is the html
<select name="cardType">
<option value="1">visa</option>
<option value="2">mastercard</option>
</select>
here is the js
var visa="1";//visa is selected by default
$("select[name=cardType]").change(function () {
document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})