The display of my dropdown menus are quite not working - javascript

I have javascript function where if values "abc", "abcd" or "abcde" has been chosen from the dropdown menu "optionDrop", then display the other dropdown menu "numberDrop", else output "N/A". The problem is that the "numberDrop" down menu is not appearing at all. What have I done wrong?
Below is javascript function:
function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var noOfAnswers = document.getElementById("noOfAnswers");
var numberDrop = document.getElementsByName("numberDrop");
if (optionDrop.value = "abc" || optionDrop.value = "abcd" || optionDrop.value = "abcde"){
numberDrop.style.display = "block";
}else{
noOfAnswers.innerHTML = "N/A";
}
}
Below is html dropdown menus is form:
<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Option Type:</td>
<td>
<select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td id="noOfAnswers">
<select name="numberDrop" id="numberDropId">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
CSS code:
/*css for QandATable.php*/
#numberDropId{
display:none;
}

Try:
if (optionDrop.value === "abc")
=== is exact match of same type. So it would have to match abc. = is for assignment.

Change your javascript function as bellow.
function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var noOfAnswers = document.getElementsByName("noOfAnswers");
var numberDrop = document.getElementsByName("numberDrop");
if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
numberDrop[0].style.display = "block";
}else{
noOfAnswers.innerHTML = "N/A";
}
}
Good luck.
Prasad

Related

How do I display certain ID and hide the other ID based from a dropdown selection?

Please help. I need to show one text field and hide the other text field based from a drop down selection. My problem is that only the first text field is being displayed. Also, the text field does not hide if I do a different selection. Thanks much!!! :)
Here is my script:
<script>
function showHide() {
let MyChoice = document.getElementsByName('xactivitytype');
if (MyChoice.value = 'SIM Replacement') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value = 'Change Of Plan') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value = 'Replacement Of Issued Unit') {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'block';
} else {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'none';
}
}
</script>
HTML:
<!--- NEED TO SELECT FIRST HERE ----->
<select name="xcategory" id="dbType" style="font-size:11px;font-family:Tahoma;color:#22215b;font-weight:bold;">
<option value="Admin">Admin
<option value="Contractors">Contractors
</select><font color="red">*</font>
<!--- DROPDOWN WILL DEPEND ON THE SELECTION ABOVE ----->
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Admin">
<option value="New Activation">New Activation</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Change Of Plan">Change Of Plan</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
<option value="Non-Service Related Concerns">Non-Service Related Concerns</option>
</select>
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Contractors">
<option value="">Please select</option>
<option value="New Activation/New Handset">New Activation/New Handset</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
</select>
<tr id="hidden-panel"><td width="240" align="right" valign="top" style="padding-right:10px;"><b>Service Number:</b></td><td width="750">
<input type="text" name="xServiceNumber">
</td></tr>
<tr id="hidden-panel2"><td width="240" align="right" valign="top" style="padding-right:10px;"><b>IMSI:</b></td><td width="750">
<input type="text" name="xIMSI">
</td></tr>
CSS:
<style>
#hidden-panel {
display: none;
}
#hidden-panel2 {
display: none;
}
</style>
There are 2 mistakes I see in your code.
let MyChoice = document.getElementsByName('xactivitytype'); Here the getElementsByName method returns an array, so you need to do document.getElementsByName('xactivitytype')[0] or document.getElementsByName('xactivitytype')[1]
In your if else-if block you are using assignment operator = instead of comparison operator ===.
Here is an example with the fixes I mentioned.
function showHide() {
const idx = document.getElementById('dbType').selectedIndex ;
const MyChoice = document.getElementsByName('xactivitytype')[idx];
if (MyChoice.value === 'SIM Replacement') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value === 'Change Of Plan') {
document.getElementById('hidden-panel').style.display = 'block';
document.getElementById('hidden-panel2').style.display = 'none';
} else if (MyChoice.value === 'Replacement Of Issued Unit') {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'block';
} else {
document.getElementById('hidden-panel').style.display = 'none';
document.getElementById('hidden-panel2').style.display = 'none';
}
}
<style>
#hidden-panel {
display: none;
}
#hidden-panel2 {
display: none;
}
</style>
<!--- NEED TO SELECT FIRST HERE ----->
<select name="xcategory" id="dbType" style="font-size:11px;font-family:Tahoma;color:#22215b;font-weight:bold;">
<option value="Admin">Admin
<option value="Contractors">Contractors
</select><font color="red">*</font>
<!--- DROPDOWN WILL DEPEND ON THE SELECTION ABOVE ----->
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Admin">
<option value="New Activation">New Activation</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Change Of Plan">Change Of Plan</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
<option value="Non-Service Related Concerns">Non-Service Related Concerns</option>
</select>
<select onChange=showHide() name="xactivitytype" class="DEPENDS ON xcategory BEING Contractors">
<option value="">Please select</option>
<option value="New Activation/New Handset">New Activation/New Handset</option>
<option value="SIM Replacement">SIM Replacement</option>
<option value="Transfer To A Regular Account Type">Transfer To A Regular Account Type</option>
<option value="Replacement Of Issued Unit">Replacement Of Issued Unit</option>
</select>
<table>
<tr id="hidden-panel">
<td width="240" align="right" valign="top" style="padding-right:10px;">
<b>Service Number:</b></td><td width="750">
<input type="text" name="xServiceNumber">
</td>
</tr>
<tr id="hidden-panel2">
<td width="240" align="right" valign="top" style="padding-right:10px;">
<b>IMSI:</b>
</td>
<td width="750">
<input type="text" name="xIMSI">
</td>
</tr>
</table>
You must use == or === for comparing values, not just =. In your case, you should even use a switch statement.
First you have a problem with equality operator. Notice that = is used for assignment and == for equality check.
And another problem is that document.getElementsByName('xactivitytype') returns Array of NodeList And you need to use index to get the value such as:
function showHide() {
let MyChoice = document.getElementsByName('xactivitytype');
if (MyChoice[0].value == 'SIM Replacement') {
....
}
...
}

javascript shows all associated DIVs on a dropdown box select

I am new to javascript and must have looked at almost all of the previous questions here and elsewhere related to this question and none seem to do the trick because they use asp, php, Ajax etc.
I use jQuery code for several other items on the page and have found that their css can cause issues with my pages and am not keen on using it either.
In my case, is there a way to select a country from a drop down box and then display a dropdown box with the states or provinces for that country. My code is shown below but when I run it, it shows all DIVs and not just the DIV that applies to the country selected. If a country has no states/province it will display nothing but passes a value of 0.
I'd like to know what is wrong with this code.
Second question is, the page starts with a default country and its states/provinces but since I use onChange on the country select, the javascript would not be triggered because initially there is no change. Regardless, even when I do change the country from its default, all DIVs are displayed anyway.
Is it possible to show the states/provinces for the default country and still use javascript for any change made to the default selection. It does not show this in the sample below, but the values for the countries and the associated states/provinces come from a database and can therefore not be incorporated in the javascript.
Any help or suggestions will be greatly appreciated.
<TABLE>
<TR><TD>Country</DIV></TD>
<TD><SELECT NAME="countryid" onChange="showstate(this.options[this.selectedIndex].value)">
<OPTION VALUE="NONE">Select a country</OPTION>
<OPTION VALUE="CA" SELECTED>Canada</OPTION>
<OPTION VALUE="US">United States</OPTION>
<OPTION VALUE="ES">Spain</OPTION>
</SELECT></TD>
</TR>
<script>
function showstate(country) {
if (country == "CA") {
hiddenDivUS.style.display='none';
hiddenDivNONE.style.display='none';
hiddenDivCA.style.display='block';
}
else {
if (country == "US") {
hiddenDivCA.style.display='none';
hiddenDivNONE.style.display='none';
hiddenDivUS.style.display='block';
}
else {
hiddenDivCA.style.display='none';
hiddenDivUS.style.display='none';
hiddenDivNONE.style.display='block';
}
}
</script>
<DIV ID="hiddenDivNONE" STYLE="display:none">
<TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
<TD><INPUT TYPE="hidden" NAME="provid" VALUE="0"></TD>
</TR>
</DIV>
<DIV ID="hiddenDivCA" STYLE="display:none">
<TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="101">British Columbia</OPTION>
.......
<OPTION VALUE="165">Yukon Territories</OPTION>
</SELECT></TD>
</TR>
</DIV>
<DIV ID="hiddenDivUS" STYLE="display:none">
<TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="201">Alaska</OPTION>
.......
<OPTION VALUE="265">Wyoming</OPTION>
</SELECT></TD>
</TR>
</DIV>
</TABLE>
Instead of listing the proper DIV it shows all three of them
First off, careful with your capitals.
Secondly try to keep all js at the bottom of the page.
This code is using ES6 so you might wanna check if it will work in all browsers but you can see whats going on.
el.classList is supported by most browsers however add,remove and toggle are not (were not.. not sure now)
I have used some regex to grab all elements using the id state_ so we can hide them, then we target the exact one to make it visible, you can probably clean that up also.
<style>
.hidden {
display: none;
}
</style>
<select name="countryid" onChange="showState(event)">
<option value="">Select a country</option>
<option value="ca">Canada</option>
<option value="us">United States</option>
<option value="es">Spain</option>
</select>
<div id="state_ca" class="hidden">
This is hidden unless Canada is selected.
</div>
<div id="state_us" class="hidden">
This is hidden unless America is selected.
</div>
<script>
function showState(event) {
const countryCode = event.target.value;
const states = document.querySelectorAll('[id^=state_]');
const el = document.getElementById(`state_${countryCode}`);
states.forEach(el => {
if (el.classList.contains('hidden')) {
return;
}
el.classList.add('hidden');
});
if (el) {
el.classList.remove('hidden');
}
}
</script>
according to me this can be the answer to your problem. You can make a few changes in the code which I have not done.
function addStates() {
var selectCountry = document.getElementById("selectCountry").value;
console.log(selectCountry);
var selectState = document.getElementById("selectState");
if (selectCountry == "india") {
var option1 = document.createElement("option");
option1.value = "punjab";
option1.text = "Punjab";
selectState.add(option1);
var option2 = document.createElement("option");
option2.value = "karnataka";
option2.text = "Karnataka";
selectState.add(option2);
} else if (selectCountry == "usa") {
var option1 = document.createElement("option");
option1.value = "florida";
option1.text = "Florida";
selectState.add(option1);
var option2 = document.createElement("option");
option2.value = "california";
option2.text = "California";
selectState.add(option2);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div>
<span>Select a country: </span>
</div>
<div>
<select onchange="addStates()" id="selectCountry">
<option value="" selected disabled>Please select a country</option>
<option value="india">India</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div>
<div>
<span>Please select a state: </span>
</div>
<div>
<select id="selectState">
</select>
</div>
</div>
</body>
</html>
I figured out how to get the desired result (see code below)
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script>
function showStates(country)
{
if (country == "101")
{ document.getElementById('CAprov').style.display='block';
document.getElementById('Default').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('NoProv').style.display='none';
}
else if (country == "102")
{ document.getElementById('CAprov').style.display='none';
document.getElementById('Default').style.display='none';
document.getElementById('USstate').style.display='block';
document.getElementById('NoProv').style.display='none';
}
else
{ document.getElementById('CAprov').style.display='none';
document.getElementById('USstate').style.display='none';
document.getElementById('Default').style.display='none';
document.getElementById('NoProv').style.display='block';
}
return false;
}
</script>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
<FORM METHOD="post">
<TABLE>
<TR><TD>Country</TD>
<TD><SELECT NAME="country" id="country" onChange="showStates(this.options[this.selectedIndex].value);">
<OPTION VALUE="101" SELECTED>Canada</OPTION>
<OPTION VALUE="102">United States</OPTION>
<OPTION VALUE="314">Germany</OPTION>
</SELECT></TD></TR>
<TR ID="Default" STYLE="display: block;"><TD>Province</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD></TR>
<TR ID="CAprov" STYLE="display: none;"><TD>Province</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select province</OPTION>
<OPTION VALUE="139">Newfoundland/Labrador</OPTION>
<OPTION VALUE="143">Nova Scotia</OPTION>
<OPTION VALUE="134">New Brunswick</OPTION>
<OPTION VALUE="149">Prince Edward Island</OPTION>
</SELECT></TD></TR>
<TR ID="USstate" STYLE="display: none;"><TD>State</TD>
<TD><SELECT NAME="provid">
<OPTION VALUE="0">Select state</OPTION>
<OPTION VALUE="102">Alabama</OPTION>
<OPTION VALUE="105">Arizona</OPTION>
<OPTION VALUE="106">Arkansas</OPTION>
<OPTION VALUE="108">California</OPTION>
</SELECT></TD></TR>
<TR ID="NoProv" STYLE="display: none;"><TD>Prov/State</TD>
<TD><INPUT TYPE="hidden" NAME="provid" VALUE="0"> </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Hidden div appear on table option select

I have a page with a form and questions of these forms are asked on two separate tables. I want to make the second table appear only if One, Two or Three is selected from the first table, and be invisible by default. If Zero is selected again, table 2 disappears again.
I got it to partially work with the code below, however I think my script is cancelling each other out. I can get it to work with One, Two or Three, but not all three selections. In this case, table 2 only appears when I select "Three", and nothing happens when Zero, One and Two is selected.
How would I go about changing the script to let it appear when One, Two or Three are selected and disappear when Zero is selected once again.
<table>
<tr>
<td>Numbers</td>
<td>
<select id="numbers" name="numbers">
<option value="Zero" selected>0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
</select>
</td>
</tr>
</table>
<span id="animals" style="display: none;">
<table>
<tr>
<td>Animal</td>
<td>
<select id="animal" input name="animal">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</td>
</tr>
</table>
</span>
<script>
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'One' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'Two' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
document.getElementById('numbers').addEventListener('change', function () {
var style = this.value == 'Three' ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});
</script>
using Array include, check code snippet.
<html>
<body>
<table>
<tr>
<td>Numbers</td>
<td>
<select id="numbers" name="numbers">
<option value="Zero" selected>0</option>
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three">3</option>
</select>
</td>
</tr>
</table>
<span id="animals" style="display: none;">
<table>
<tr>
<td>Animal</td>
<td>
<select id="animal" input name="animal">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Rabbit">Rabbit</option>
</select>
</td>
</tr>
</table>
</span>
<script>
function checkVals(val){
if(!val) {
val = document.getElementById('numbers').value;
}
var allowed = ["One", "Two", "Three"];
var check = allowed.includes(val);
if(check){
document.getElementById('animals').style.display = 'block';
}else{
document.getElementById('animals').style.display = 'none';
}
}
document.getElementById('numbers').addEventListener('change', function () {
var val = this.value;
checkVals(val);
});
window.onload="checkVals()";
</script>
</body>
</html>
You do not need to write three event listeners. Just one can do this.
document.getElementById('numbers').addEventListener('change', function () {
var style = (this.value == 'One' || this.value == 'Two' || this.value =='Three') && (this.value != 'Zero') ? 'inline' : 'none';
document.getElementById('animals').style.display = style;
});

Traversing through table rows and disabling input in second column

please have a look at the below code.
<table>
<tr>
<td>
<select name='td1'>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>
</td>
<td>
<select name='td2'>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>
</td>
</tr>
</table>
JavaScript:
<script>
document.getElementsByTagName("tr").each(function(){
$(this).getElementsByTagName("td")[1].getElementsByTagName("select").disabled=true;
})
</script>
Requirement is
1. By default, the select field in the second column(i.e, second td's select) must be disabled.
2. the second select field can only be enabled only when the user selects third option in the first select field.
3. the solution must be in pure javascript( not using jquery)
Thanks in Advance.
Array.from(document.querySelectorAll('tr')).forEach(tr => {
const secondSelect = tr.children[1].querySelector('select');
secondSelect.disabled = true;
tr.querySelector('td select').addEventListener('change', function() {
secondSelect.disabled = (this.value != 3);
});
});
This code will work only for one row having two select option,which is perfectly suitable for your example.
var selectTag = document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('select')
selectTag[1].disabled = true;
selectTag[0].addEventListener("change", function(){
if(selectTag[0].value == 3){
selectTag[1].disabled = false;
}
else{
selectTag[1].disabled = true;
}
});
for disabeling the select you just need to add the disabled attribute using setAttribute , or element.disabled = true , then listen for the change of the other select and check its value, if it's equal to 3 remove the disabled,
let td2 = document.querySelector('[name=td2]');
td2.disabled = true ;
let td1 = document.querySelector('[name=td1]');
td1.addEventListener('change', function() {
if (+this.value === 3) // the + sign is a shorthand for parseInt
td2.disabled = false ;
else
td2.disabled = true ;
})
<table>
<tr>
<td>
<select name='td1'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</td>
<td>
<select name='td2'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</td>
</tr>
</table>

How to fill in a text field with drop down selection

I have a drop down with different strings, I want a text box to be filled in with the string of the drop down selected.
I am writing this in html
<td align="right">
<select name="xyz" size="1">
<option value=""></option>
<?php foreach($comments as $comment): ?>
<?if($comment->x!= 0):?>
<option value="<?=$comment->x;?>"<?=($comment->x == $postData["xyz"] ? 'selected="selected"':"")?>>
<?=$comment->y;?>
</option>
<?endif;?>
<?php endforeach; ?>
</select>
<textarea name="xz" cols="36" rows="3"><?=$postData["xz"];?></textarea>
</td>
Something like this jsfiddle demo?
HTML:
<textarea id="mytext"></textarea>
<select id="dropdown">
<option value="">None</option>
<option value="text1">text1</option>
<option value="text2">text2</option>
<option value="text3">text3</option>
<option value="text4">text4</option>
</select>
JavaScript:
<script type="text/javascript">
var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function(){
mytextbox.value = mytextbox.value + this.value; //to appened
//mytextbox.innerHTML = this.value;
}
</script>

Categories