We Keep Coding

JavaScript: Show If Any Option Has Assigned Value

I'm new to this forum. I tried checking some previous solutions, but they didn't quite fit. I have conditional dropdown boxes that work as intended. However, I only want the SHOW ME WHERE TO GO button to show once the user selects from one of the secondary (child) menus. It doesn't matter which option they select so long as it isn't the default value showing in the box.
I tried to set it up so that all the secondary menus are in an array that gets checked over in the function. Basically if whatever option is selected and is assigned a value, the button should show.
Here is my code. What am I doing wrong? I'm just learning JavaScript, so please bear with me.
<select id="TransactionType" onchange="check();">
<option selected="selected" value="">I am a...</option>
<option value="DH">Drop and Hook</option>
<option value="Live">Live Unload</option>
<option value="LTL">LTL</option>
<option value="FedEx">FedEx Ground/Express</option>
<option value="Visitor">Visitor</option>
</select>
<br>
<br>
<select id="DHOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Describe your transaction...</option>
<option value="LILO">Load In - Load Out</option>
<option value="LIEO">Load In - Empty Out</option>
<option value="EILO">Empty In - Load Out</option>
<option value="EIEO">Empty In - Empty Out</option>
<option value="BILO">Bobtail In - Load Out</option>
<option value="PUP">Pup Trailers/Containers</option>
<option value="CONT">Containers</option>
</select>
<select id="LUOps" style=display:none; onchange="showbtn();">
<option selected="selected" value="">Where will you be unloaded?</option>
<option value="WH1">Warehouse 1 / 100 Level Docks</option>
<option value="WH2">Warehouse 2 / 200 Level Docks</option>
<option value="WH3">Warehouse 3 / 300 Level Docks</option>
<option value="WH4">Warehouse 4 / 400 Level Docks</option>
</select>
<select id="LTLOps" style=display:none;>
<option selected="selected" value="">Where do I go?</option>
<option value="327">Dock Door 327</option>
</select>
<select id="FEDEXOps" style=display:none;>
<option selected="selected" value="">Describe your transaction...</option>
<option value="RETURNS">Returns Load In - Load Out</option>
<option value="EMPTY">Empty In - Load Out</option>
</select>
<select id="VISITOROps" style=display:none;>
<option selected="selected" value="">What is the purpose of your visit?</option>
<option value="MAINT">Delivery for Maintenance</option>
<option value="VEND">Canteen/Vending</option>
<option value="GARBAGE">Garbage Pickup</option>
<option value="OFFICE">Visit Transportation Office</option>
</select>
<br>
<br>
<button id="submit" type="button" style=display:none;>SHOW ME WHERE TO GO</button>
function check() {
var dropdown = document.getElementById("TransactionType");
var current_value = dropdown.options[dropdown.selectedIndex].value;
if (current_value == "DH") {
document.getElementById("DHOps").style.display = "block";
document.getElementById("LUOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
}
if (current_value == "Live") {
document.getElementById("LUOps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
}
if (current_value == "LTL") {
document.getElementById("LTLOps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LUOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
}
if (current_value == "FedEx") {
document.getElementById("FEDEXOps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LUOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("VISITOROps").style.display = "none";
}
if (current_value == "Visitor") {
document.getElementById("VISITOROps").style.display = "block";
document.getElementById("DHOps").style.display = "none";
document.getElementById("LUOps").style.display = "none";
document.getElementById("LTLOps").style.display = "none";
document.getElementById("FEDEXOps").style.display = "none";
}
}
function showbtn (){
var childboxes = [document.getElementById("DHOps"), document.getElementById("LUOps"), document.getElementById("LTLOps"), document.getElementById("FEDEXOps"), document.getElementById("VISITOROps")];
if (document.getElementsById(childboxes).onchange = true) {
document.getElementById("submit").style.display = "block";
}
}

Your code is almost working. There is an error in the showbtn() function at the top that is stopping javascript running, so the line document.getElementById("submit").style.display = "block" is not reached. I have simplified this function and it now displays the button as you wish (see fiddle work example link below). The code change is only in the Javascript showbtn() function as so:
function showbtn (){
document.getElementById("submit").style.display = "block";
}
See Fiddle working

There are a couple of issues I see on your code.
In your showbtn() function, your using the getElementsById function, but as far as I am aware, this doesn't exist. Were you trying to execute getElementsByName instead?
Either way, that would return a NodeList that you'd have to iterate over, and I see that you're trying to check the onchange, which in itself is an assignable property. That wouldn't work as expected.
I feel like you could simplify your logic by checking if at least one of your <select> tags has a selected value that isn't "".
Below is a simple suggestion - you can simplify if you want to by creating easier-to-select elements (either by names or class names, which would work with getElementsBy<Name|ClassName>)
// Array of select IDs.
var arrayOfSelects = ['DHOps', 'LUOps', 'LTLOps', 'FEDEXOps'];
// Iterate on each one.
for (let select of arrayOfSelects) {
var e = document.getElementById(select);
// Checking if there is a selected value that isn't null, undefined, 0 or empty.
if (e.value) {
document.getElementById("submit").style.display = "block";
break;
}
}

Why ID is not taking while two selection boxes in the form?

I have two selection boxes in the form listing below, Both have different id "language" and "time". Now the problem is my script is not showing error correctly. I put Border color to show error.
Can someone help me with this?
<div class="field_wrap">
<select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
<option value="0" disabled selected>Prefered Language</option>
<option value="1">English</option>
<option value="2">Hindi</option>
<option value="3">Tamil</option>
<option value="4">Malayalam</option>
</select></div>
<div class="field_wrap">
<select name="time" id="time" onblur="validateSelect(time)" class="select_promo">
<option value="0" disabled selected>Time to Contact</option>
<option value="1">8 - 10 AM</option>
<option value="2">10 - 12 AM</option>
<option value="3">12 - 2 PM</option>
<option value="4">2 - 5 PM</option>
<option value="5">5 - 8 PM</option>
</select></div>
</div>
My Script :
function validateSelect(language) {
var myValue = document.getElementById('language').value;
if(myValue > 0) {
document.getElementById('language').style.borderColor ='#80c75a';
document.getElementById('languageError').style.display = "none";
return true;
} else {
document.getElementById('language').style.borderColor ='#e35152';
return false;
}
}
function validateSelect(time) {
var myValue = document.getElementById('time').value;
if(myValue > 0) {
document.getElementById('time').style.borderColor ='#80c75a';
document.getElementById('timeError').style.display = "none";
return true;
} else {
document.getElementById('time').style.borderColor ='#e35152';
return false;
}
}
// Validate Select
if (!validateSelect(document.getElementById('language'))) {
document.getElementById('languageError').style.display = "block";
error++;
}
if (!validateSelect(document.getElementById('time'))) {
document.getElementById('timeError').style.display = "block";
error++;
}

You have some errors in your code:
you declare function validateSelect twice
you pass there an element while an element id is expected in the function
onblur event handler in your selects should accept parameter in quotes
Here is what your javascript should look like:
function validateSelect(id){
var el = document.getElementById(id),
myValue = el.value;
if(myValue > 0){
el.style.borderColor ='#80c75a';
document.getElementById(id+'Error').style.display = "none";
return true;
}else{
el.style.borderColor ='#e35152';
return false;
}
}
// Validate Select
validateSelect('time');
validateSelect('language');
Your onblurs should look like:
onblur="validateSelect('language')" and onblur="validateSelect('time')"
Check fiddle: JS Fiddle

How to disable drop down when selecting one in php

could someone help me fix my code?
My problem is how to disable another drop box when selected one?
I am using PHP and JavaScript programming language.
I hope that anyone can help me because it is very important.
Here's my code:
<head>
<script type = "text/javascript">
function disableDrop(){
if(frmMain.sltMain.options[1].selected){
frmMain.sltSecondary.disabled = true;
}
else{
frmMain.sltSecondary.disabled = false;
}
}
</script>
</head>
<form ID = "frmMain">
<select ID = "sltMain" onchange = "disableDrop();">
<option value = "onetime" selected>One-Time</option>
<option value = "recurring">Recurring</option>
</select>
<select ID = "sltMain" onchange = "disableDrop();">
<option value = "onetime">One-Time</option>
<option value = "recurring" selected>Recurring</option>
</select>
</form>

Try This : Demo
HTML CODING :
<select ID = "sltMain" onchange = "disableDrop(this);">
<option value = "onetime" selected>One-Time</option>
<option value = "recurring">Recurring</option>
</select>
<select ID = "sltSecondary" onchange = "disableDrop1(this);">
<option value = "onetime">One-Time</option>
<option value = "recurring" selected>Recurring</option>
</select>
</form>
JAVASCRIPT:
function disableDrop(elem) {
if(elem.value == 'recurring'){
document.getElementById('sltSecondary').disabled = true;
}
else{
document.getElementById('sltSecondary').disabled = false;
}
}
function disableDrop1(elem) {
if(elem.value == 'onetime'){
document.getElementById('sltMain').disabled = true;
}
else{
document.getElementById('sltMain').disabled = false;
}
}

whre is the "sltSecondary" ID ??
the second item has the same id i think you mean
<form ID = "frmMain">
<select ID = "sltMain" onchange = "disableDrop();">
<option value = "onetime" selected>One-Time</option>
<option value = "recurring">Recurring</option>
</select>
<select ID = "sltSecondary" onchange = "disableDrop();">
<option value = "onetime">One-Time</option>
<option value = "recurring" selected>Recurring</option>
</select>
</form>

how to show 2 select options value in another element?

I am have been searched too much on net but nothing found.
I have 2 select options tag.
I want to show option value in the input tag by multiplying option tag value whatever it is.
and selecting 2nd option tag I want to assign 2nd option tag value to 1st option tag value.
and I also want to multiply that values as the 1st options value have before.
how to do this?
here is my code.
My 1st options tag.
<select name="" id="test">
<option selected="" value="0" disabled='disabled'>Select Duration</option>
<option value="1">1/month</option>
<option value="2">2/month</option>
<option value="3">3/month</option>
<option value="6">6/month</option>
<option value="12">12/month</option>
</select>
<input type="text" data-val="9" id="price_value" style="border:1px solid #0a0; padding:1px 10px; color: #f90;" value="0" size="5"/><br>
Here is 2nd option tag.
<select id="plan">
<option value='Basic'>Basic</option>
<option value='Standard'>Standard</option>
<option value='Professional'>Professional</option>
<option value='Enterprice'>Enterprise</option>
</select>
here is JS.
$('#test').on('change',function(e){
var input = $(this).next('input[type="text"]');
var value = $(this).find('option:selected').val();
input.val( input.data('val') * parseInt(value) );
});
$('#plan').on('change',function(e) {
var plan = $(this).find('option:selected').val();
var price_value = $('#price_value');
if (plan == "Basic") {
price_value.removeAttr('data-val');
price_value.attr('data-val','9');
}
else if (plan == "Standard"){
price_value.removeAttr('data-val');
price_value.attr('data-val','19');
}
else if (plan == "Professional"){
price_value.removeAttr('data-val');
price_value.attr('data-val','29');
}
else if (plan == "Enterprice") {
price_value.removeAttr('data-val');
price_value.attr('data-val','59');
}
});
Here is Demo

Changes
Use $(this).val() instead of $(this).find('option:selected').val() to fetch select value. or even better use this.value
use .data() to set value like price_value.data('val', 9); instead of price_value.attr('data-val','9');
No need to use price_value.removeAttr('data-val');
Code
$('#test').on('change',function(e){
var input = $(this).next('input[type="text"]');
var value = $(this).val(); //Or this.value
input.val( input.data('val') * parseInt(value, 10) );
});
$('#plan').on('change',function(e) {
var plan = $(this).val();
var price_value = $('#price_value');
if (plan == "Basic") {
price_value.data('val',9);
}
else if (plan == "Standard"){
price_value.data('val',19);
}
else if (plan == "Professional"){
price_value.data('val',29);2
}
else if (plan == "Enterprice") {
price_value.data('val',59);
}
$('#test').trigger('change'); //Trigger $('#test') change event
});
DEMO

This solution would work if you are okay with changing your HTML a bit:
<select id="plan">
<option value='9'>Basic</option>
<option value='19'>Standard</option>
<option value='29'>Professional</option>
<option value='59'>Enterprise</option>
</select>
Then simply use:
$('#test, #plan').on('change',function() {
var valueOne = $('#test').val();
var valueTwo = $('#plan').val();
$('#price_value').val(parseInt(valueOne) * parseInt(valueTwo));
});
That's all!

Change style of text field based on the selection of a combo box using Javascript

I would like to change the style of a text field based on the value selected in a combo box. Specifically, what I'd like to do is make the txtDepartment field gray and marked as "read only" if the option value selected in cboSource is 1. I've tried the code below, but I imagine my style code at least is wrong, if not other things. Any help appreciated. Thanks!
<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
<script>
function displayDepartment(obj)
{
var selectedValue = obj.value;
var txtDepartment = document.getElementById("txtDepartment");
if (selectedValue == "1")
{
txtDepartment.style.display = "Disabled style='background-color:#E8E8E8'";
}
}
</script>

txtDepartment.style.backgroundColor = "#E8E8E8";
txtDepartment.disabled = 'disabled';
with jQuery your whole function gets a lot smaller:
function displayDepartment(obj)
{
if($(obj).value=="1") {
$("#txtDepartment").css('background-color','#E8E8E8');
$("#txtDepartment").disabled ='disabled'
}
}

First, use onchange on cboSource.
Then:
if(selectedValue == "1")
txtDepartment.disabled = 'disabled';

Set the disabled attribute for your element
// on
txtDepartment.setAttribute("disabled","disabled")
// off
txtDepartment.removeAttribute("disabled")

possible solution using jQuery:
<style>
.disabled {
background-color:#E8E8E8;
}
</style>
<script language="javascript">
$(document).ready(function() {
var txtDepartment = $("#txtDepartment");
var cboSource = $("#cboSource");
cboSource.change(function() {
txtDepartment.removeClass().removeAttr("disabled");
if (cboSource.val() == 1) {
txtDepartment.addClass("disabled").attr("disabled", true);
}
});
});
</script>
<select name="cboSource" id="cboSource">
<option value = 0>Choose</option>
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>

In my opinion onclick is more suitable as on change has different meaning for different browser
Try this
<select name="cboSource" id="cboSource" onClick="displayDepartment(this);">
<option value = 1>Source 1</option>
<option value = 2>Source 2</option>
</select>
<input name="txtDepartment" type="text" id="txtDepartment" size="6" maxlength="6"></p>
<script>
function displayDepartment(obj)
{
var txtDepartment = document.getElementById("txtDepartment");
txtDepartment.disabled = false;
txtDepartment.style = "";
if (obj.value == "1")
{
txtDepartment.style = "background-color:#E8E8E8";
txtDepartment.disabled = true;
}
}
</script>