We Keep Coding

Why isn't the second selection disabled when i pick all products in the first one?

https://jsfiddle.net/a8r057du/
I don't understand why I don't disable the select "A" when I select the all products option
<form method="post" action="shop.php">
<select name='filterp'>
<option defaultSelected>Please select an option</option>
<option value="allp" isSelect="disabled()">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function disabled()
{
document.getElementsById("A").disabled=false;
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >

you have isSelect="disabled()" in your code which doesnt do anything because its not an actual method
to disable the select if the option is selected, you need to use onchange or the change eventListener and check if the option you clicked is the "all products" option
js code :
function change(value){
if(value === "allp"){
document.getElementById("A").disabled = true;
}
}
here, i used an if statement to check if the value is "allp" which is the "all products" option and disable the select element
another problem is you havedocument.getElementById("A").disabled = false; , it should be true
full code:
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>
and you also used document.getElementsById which is wrong, it should be getElementById

thank you very much you saved me
<form method="post" action="shop.php">
<select name='filterp' onchange="selectOnchange(value)">
<option defaultSelected>Please select an option</option>
<option value="allp">All Products</option>
<option value="milan">Products Milan</option>
<option value="juve" >Products Juventus</option>
</select>
<script>
function selectOnchange(value){
if(value === "allp"){
document.getElementById("A").disabled= true;
}
}
</script>
<select name="A" id="A">
<option defaultSelected>Please select an option</option>
<option id="mesh" value="mesh">mesh</option>
<option id="shorts" value="shorts">shorts</option>
<option id="socks" value="socks">socks</option>
</select>
<input type="submit" value="Filter" id="filtrogo" >
</form>

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

Using jQuery to build on existing functionality to code to also check if any input boxes have values

I really need your help here. Just a heads up that I am newcomer to the jQuery library.
That out of the way, I would like to get some help to so as to build onto my existing code (the codes existing purpose in my post is to check and see if any of the select boxes have any selected option values, attached to an on change event, so if any of the select boxes have any selected option values then enable the search button, if not, then just keep it nicely disabled.
Now, here's where it gets really tricky for me, how can the existing code be modified so as to also check (in parellel to the code below) to check and see if any input boxes also have any input values,
So the expected outcome for a typical scenario is this, if the user has made a selection in any of the select boxes or has typed in any text in the form, then enable the search button, if the form contains no selected options and all of the input boxes are empty, then disable the #search button.
Here's both the HTML Markup and Code in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript">
window.onload = function() {
$('#myform').on('change', function() {
var form = $(this);
form.find('#search').prop('disabled', form.find('select option:selected').filter(function() {
return this.value.length;
}).length === 0)
}).change();
}
</script>
</head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>

Have generalized function to test all the input;
Consider $(':input:not([type="button"])') to select all the inputs excluding button
window.onload = function() {
var validateForm = function() {
return $(':input:not([type="button"])').filter(function() {
return this.value !== '';
}).length;
}
$('#myform').on('change keyup', ':input', function() {
$('#search').prop('disabled', !validateForm());
}).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<br>Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br>
<br>Vegetable
<input type="input" id="veggie">
<br>
<br>Number
<input type="input" id="number">
<br>
<br>
<input type="button" value="search" id="search" disabled>
</form>

Click on label, to select one option

Exists a method for click in label and select one specific option into select?
I don't like use JS
Follow the code:
<label for="a">State</label>
<select name="">
<option value="">teste</option>
<option value="">teste X</option>
<option value="" id="a">teste A</option>
</select>
Thanks!

html:
<label data-value="c">C</label>
<select name="" id="myselect">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
jQuery:
$(document).on("click", "label", function(evt) {
evt.preventDefault();
$("#myselect").val($(this).data("value"));
});

button to clear all select fields

<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
</form>
I want to select the first field of all the Select (so set the value "all" to all the Select) clicking a button

Your form should have a reset button
<form method="post" action="asdasd" class="custom" id="search">
<select name="sel1" id="sel1">
<option value="all">all</option>
<option value="val1">val1</option>
<option value="val2" selected="selected">val2</option>
</select>
<select name="sel2" id="sel2">
<option value="all">all</option>
<option value="val3">val3</option>
<option value="val4" selected="selected">val4</option>
</select>
<input type="button" name="Reset" />
</form>
After adding a reset button input element to your form below code should reset all select fields.
jQuery( "input[name=Reset]" ).click( function(){ //jQuery click event
jQuery( "select" ).each(function() { //for each select type
$(this).val( "all" );
});
});

You have to add attribute selected to the first option of all select box.
$("select option:first").attr('selected','selected');
See my fiddle
Hope it helps.

You don't need to use jquery. This can be done by JavaScript
document.getElementById("sel1").selectedIndex = 0;
Here is my JSFiddler demo for complete code.
This is jQuery way to achieve above
$("select").val("0");
Or to be more specific
$("#sel1 , #sel2").val("0");