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;
});
Related
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') {
....
}
...
}
I am using chosen drop down in asp.net. Is there a way to filter optgroup ?
There is a radio button list control with values US and UK. I want to filter drop down based on user's radio button selection. If the 'US' is selected then drop down should only show US optgroup records.
Here is the jsfiddle;
http://jsfiddle.net/7ngftsq2/
This is what i have tried so far with no luck;
('#rbDistDiv input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
var ddlDist = $('#VCSdistSelect_ddlDist'),
val = $(this).val(),
region = $('option:selected', this).text();
$('span > optgroup', ddlDist).unwrap();
if (val !== '%') {
$('optgroup:not([label="' + region + '"])', ddlDist).wrap('<span/>');
}
});
You should be able to do something similar to this:
$(".chosen").chosen({
width: '600px',
allow_single_deselect: true,
search_contains: true
});
let UK_optgroup = $("#optgroup-uk").clone();
let US_optgroup = $("#optgroup-us").clone();
let CA_optgroup = $("#optgroup-ca").clone();
function filterSelect(selectedRadio) {
switch(selectedRadio) {
case "US": return US_optgroup
case "UK": return UK_optgroup
case "CA": return CA_optgroup
}
}
$('[type="radio"]').on('change', function() {
// This is only here to clear the selected item that is shown on screen
// after a selection is made. You can remove this if you like.
$("#selected-item").html("");
// Everything from here down is needed.
$("#select")
.children()
.remove('optgroup');
$("#select")
.append(filterSelect(this.value))
.trigger("chosen:updated");
});
$("#select").on('change', function(event) {
$("#selected-item").html("Selected Item: <b>" + event.target.value + "</b>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet"/>
<table id="rbDistDiv" border="0">
<tbody>
<tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
<tr>
<td><input id="rbDistDiv_2" type="radio" name="rbDistDiv" value="CA"><label for="rbDistDiv_2">CA</label></td>
</tr>
</tbody>
</table>
<p id="selected-item"></p>
<select id="select" class="chosen">
<option value="" disabled selected>Select your option</option>
<optgroup id="optgroup-uk" label="UK">
<option value="Adrian">Adrian</option>
<option value="Alan">Alan</option>
<option value="Alan B">Alan B</option>
</optgroup>
<optgroup id="optgroup-us" label="US">
<option value="John">John</option>
<option value="Billy">Billy</option>
<option value="Chris">Chris</option>
</optgroup>
<optgroup id="optgroup-ca" label="CA">
<option value="Gabrielle">Gabrielle</option>
<option value="Maude">Maude</option>
<option value="Morgan">Morgan</option>
</optgroup>
</select>
Just hide/show them by the label when an change is made to the radio button.
$('[type="radio"]').on('change', function () {
$('select')
.val('') // reset value if selection already made
.find('optgroup') // find the groups
.hide() // hide them all
.filter('[label="' + this.value + '"]') // find the one that matches radio
.show() // show it
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="rbDistDiv" border="0">
<tbody><tr>
<td><input id="rbDistDiv_0" type="radio" name="rbDistDiv" value="US"><label for="rbDistDiv_0">US</label></td>
</tr><tr>
<td><input id="rbDistDiv_1" type="radio" name="rbDistDiv" value="UK"><label for="rbDistDiv_1">UK</label></td>
</tr>
</tbody></table>
<br>
<select name="VCSdistSelect$ddlDist" id="VCSdistSelect_ddlDist" class="chosen-select" data-placeholder="Select a Distributor" >
<option selected="selected" value=""></option>
<optgroup label="US">
<option value="123" division="US">Aaron</option>
</optgroup>
<optgroup label="UK">
<option value="655" division="UK">John</option>
</optgroup>
</select>
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>
<table id="selectsupp">
<tr>
<td>
<select id="category">
<option value="display" readonly="true">-Shop By Category-</option>
<option value="all">All</option>
<option value="preworkout">Pre Workout</option>
<option value="protein">Protein</option>
<option value="mass">Mass Gainer</option>
<option value="bcaa">BCAA</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="company">
<option value="display" readonly="true">-Shop By Company-</option>
<option value="all">All</option>
<option value="on">Optimum Nutrition</option>
<option value="mts">MTS</option>
<option value="mutant">Mutant Nutrition</option>
<option value="allmax">All Max</option>
</select>
</td>
<td>
<input type="submit" id="submit" name="search" value="Search" onclick="find()"/>
</td>
</tr>
</table>
<script>
function find(){
var category = document.getElementById('category');
var valueOfCategory = category.options[category.selectedIndex].value;
var company = document.getElementById('company');
var valueOfCompany = company.options[company.selectedIndex].value;
if (valueOfCategory === "all" && valueOfCompany === "all") {
alert "hello";
document.getElementsByTagName("select")[0].style.visibility = "hidden";
document.getElementsByTagName("select")[1].style.visibility = "hidden";
//display all suggested items
}
Hello fellow coders :) I am having some trouble with setting the visibility of a tag. When I submit i am trying to get rid of the 2 select options and the button also but for some reason It setting .style.visibility = "hidden" is not working. Any suggestions?
Two problems are there
alert "hello";
should be
alert("hello");
And there is } missing at the end of function. And I don't see closing of script tag also.
Well, if you'd bothered checking your browser's debug console, you'd have seen your syntax errors getting logged there:
alert "hello";
should be
alert("hello");
The debug console should be your FIRST stop anytime something on a web page isn't working.
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