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>

Disabled Button when both field are selected at [0] position (Empty) from dropdown menu in JS or jQuery

I want to disable the buttons when I select empty fields from dropdown menu. If I select some value from the value then the button should be enabled. Only in case I have selected the 2 fields as empty ([0] position), then only the button should be disabled. I want to use jQuery or JS for this.
Currently I was doing this -- but it is not working.
if ($('#roleid :selected').text()== "" && $('#userGroupId :selected').text()== "")
{
document.getElementById('updaterole').disabled = true;
document.getElementById('updateUserGroup').disabled =true;
}

try this below
if ($('#roleid').val()== "" && $('#userGroupId').val()== "")
{
document.getElementById('updaterole').disabled = true;
document.getElementById('updateUserGroup').disabled =true;
}

try this:
if ($('#roleid').filter(':selected').text() == "" && $('#userGroupId').filter(':selected').text() == "")
{
$('updaterole').prop("disabled", true);
$('updateUserGroup').prop("disabled", true);
}

$(".myddl").on("change", function () {
var flag=false;
$("select.myddl").each(function() {
if($(this).val()){
flag=true;
return false
}else{
flag=false;
}
});
if(!flag){
document.getElementById('updaterole').disabled = true;
document.getElementById('updateUserGroup').disabled =true;
}else{
document.getElementById('updaterole').disabled = false;
document.getElementById('updateUserGroup').disabled =false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="first" class="myddl">
<option value="">-- Select value --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="second" class="myddl">
<option value="">-- Select value --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</br></br>
<button id="updaterole" disabled>Button1</button>
<button id="updateUserGroup" disabled>Button2</button>

Below code fires on change of dropdowns:
$('form select').on('change', function() {
if ($("#ddl1 option:selected").text() == "" && $("#ddl2 option:selected").text()=="") {
$(':input[type="submit"]').prop('disabled', true);
}
else{
$(':input[type="submit"]').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="ddl1">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<select id="ddl2">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<form>
HTML Code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="ddl1">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<select id="ddl2">
<option value="0">Select</option>
<option value="1"></option>
<option value="2">First Option</option>
</select>
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<input type="submit" name="btnGo" id="btnGo" value="Button1" class="btn disabled" style="width: 70px;" />
<form>

How display listbox option based on a variable value using jquery?

I have a select box with options now I want to show only those options which value id is greater than the user input value.
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something</option>
<option value="14" hidden>Something</option>
<option value="20" hidden>Something</option>
</select>
this is my select box. User will input a value based on that i want only the options which value is greater then the user input to show. Please help me on this.

You need to use .filter() to filtering options tag. In callback of function check that value of every option is greater than user input value.
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
var userInput = 13;
$(".form-control > option").filter(function(){
return this.value > userInput;
}).show();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>

You cn try this:
$(document).ready(function(){
$("#txtUserInput").keyup(function(){
getUserInput(this);
});
});
function getUserInput(_this){
var userInput=parseInt($.trim($(_this).val()));
if(userInput!=null && userInput != isNaN){
$("#dtime option").each(function(){
var option=parseInt($.trim($(this).val()));
if(option!=0 && option<userInput){
$(this).css("display","none");
}
else{
$(this).css("display","block");
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtUserInput" />
<br/><br/>
<select class="form-control" required="" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" hidden>Something 13</option>
<option value="14" hidden>Something 14</option>
<option value="20" hidden>Something 20</option>
</select>
<br/>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<select class="form-control" id="dtime" name="time">
<option value="0" >Select Time</option>
<option value="13" >Something</option>
<option value="14" >Something</option>
<option value="20" >Something</option>
</select>
<input id="inputData" value="0">
</html>
here is jquery code
$("#inputData").on('blur', function(){
var inputd = parseInt($(this).val());
$("#dtime option").each(function(){
if(parseInt($(this).val()) <= inputd ){
$(this).hide();
}
});
});

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

Javascript - Toggle html5 required="" attribute based on form selection

I have a script that's almost complete but I can't figure out the last piece. The Javascript makes the check box appear or disappear based on the drop down selection (this is working great). But I'm trying to make the check box "Required" if the checkbox is present (the part I can't figure out).
I'm using the htm5 required="" attribute on the check box field, but the form still tries to validate it even with the 3rd option selected, which hides the check box altogether.
Is there a way to toggle on/off the required="" in coordination with the selection of the drop down, or any other suggestions?
<script>
function getTerms(select){
var selectedString = select.options[select.selectedIndex].value;
if(selectedString == "1" || selectedString == "2")
{
document.getElementById("terms_target").style.display = "block";
}else {
document.getElementById("terms_target").style.display = "none";
}
}
</script>
<form action="process_affiliate.php" method="post" onchange="getTerms(this)" >
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

Here is a newer version using addEventListener
window.addEventListener("DOMContentLoaded", () => {
const sel = document.querySelector("[name=InquiryType]"),
terms = document.getElementById("terms_target"),
form = document.getElementById("myForm"),
agree = form.checked; // checked is a poor name for a field
toggleAgree = () => {
const show = ["1", "2"].includes(sel.value);
terms.hidden = !show;
agree.required = show;
};
sel.addEventListener("change", toggleAgree)
toggleAgree(); // initialise
})
<form action="process_affiliate.php" id="myForm" method="post">
<select name="InquiryType" required>
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" hidden>
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>
Older version
window.onload=function() {
var sel = document.getElementsByName("InquiryType")[0];
sel.onchange=function() {
var selectedString = this.value,
show = selectedString == "1" || selectedString == "2",
terms = document.getElementById("terms_target"),
checked=document.getElementsByName("checked")[0];
terms.style.display = show?"block":"none";
if (show) checked.setAttribute("required","required");
else checked.removeAttribute("required");
}
sel.onchange(); // initialise
}
<form action="process_affiliate.php" method="post">
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>