I have a drop down box which once selected displays specific form elements, this works perfect but as soon as i add a div class to the elements (drop down boxes) the css class still shows even if that specific element isn't selected.
Is it possible to hide the css class along with the form element, below is my code.
Javascript
function check() {
var dropdown = document.getElementById("filtercriteria");
var current_value = dropdown.options[dropdown.selectedIndex].value;
if (current_value == "page_name") {
document.getElementById("contains").style.display = "block";
document.getElementById("term").style.display = "block";
document.getElementById("countries").style.display = "none";
document.getElementById("postcodes").style.display = "none";
document.getElementById("repeater").style.display = "none";
document.getElementById("visitor_type").style.display = "none";
document.getElementById("page_visits").style.display = "none";
document.getElementById("pvisits_value").style.display = "none";
}
HTML Drop down select Box
<select id="filtercriteria" onChange="check(this);" >
<option value="select">Select</option>
<option value="page_name">Page Name</option>
<option value="postcode">Postcode</option>
<option value="country">Country</option>
<option value="search_term">Search Term</option>
<option value="referrer">Refferer</option>
<option value="country">Country</option>
<option value="search_term">Search Term</option>
<option value="referrer">Referrer</option>
<option value="page_visits">Page Visits</option>
<option value="repeater">Repeater</option>
<option value="owner">Owner</option>
<option value="visitor_type">Visitor Type</option>
</select>
First Hidden Element with the Div Class that shows even if this option isn't selected.
<div id="pagename">
<div class="select-div">
<select id="contains" name="contains" display="none" class="hideme">
<option value="contains">contains</option>
<option value="exact">exact</option>
</select>
</div>
<input name="term" id="term" type="text" class="hideme" display='none' />
</div>
Any suggestions would be appreciated.
http://jsfiddle.net/isherwood/u2puF/2
Related
Tried to create an Others option in a drop down menu, which by doing so, activates a textbox to type in.
However, my current method of doing this causes the remaining options to be invisible when clicked, and the textbox does not appear when the Others option is clicked.
function disappear(val) {
var textbox = document.getElementById('issue');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
you are selecting the wrong element
var textbox=document.getElementById('textbox');
function disappear(val){
var textbox=document.getElementById('textbox');
if(val=='other'){
textbox.style.display='block';
}
else{
textbox.style.display='none';
}
}
#textbox{
width:90px;
height:60px;
background-color:red;
display:none;
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<div id="textbox"></div>
that's how you must do it:
var textbox=document.getElementById('textbox');
You're really close! The only thing left is to change the id in the document.getElementById to the correct element and add the input field with the styling.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
textbox.style.display = 'none';
}
}
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<input id="textbox" type="text" style="display: none;">
Should your textbox actually be a textarea element? Note: if it's meant to be a div it won't appear on the page (unless you style it) because its content is empty.
Use CSS to initialise the textbox display to none.
In the function you've picked up the select element with your query, and not the textbox element which is why the options are disappearing when you set the display to none. Maybe add an additional check to see if the style is set to block before you set the display to none.
function disappear(val) {
var textbox = document.getElementById('textbox');
if (val == 'other') {
textbox.style.display = 'block';
} else {
if (textbox.style.display === 'block') {
textbox.style.display = 'none';
}
}
}
#textbox { display: none; }
<select name="issue" id="issue" onchange='disappear(this.value)'>
<option disabled selected></option>
<option value="bug">Bug</option>
<option value="lacking">Lack of Use</option>
<option value="other">Other</option>
</select>
<textarea id="textbox"></textarea>
here's the situation
I have a select element in my html code, with many option. One of these options is "Other". What I want is, when I select "Other", without refreshing the page, display an input element right under the select one with JS. The problem is that I have to refresh the page to see the change. Can you help me? :)
There's my code :
<label for="select-tribunal" class="form-label">Cadre Légal</label>
<select id="select-tribunal" required class="form-select" aria-label="Default select example">
<?php
foreach ($tribunaux as $tribunal){
echo '<option value="'.$tribunal['id'].'">'.$tribunal['nom'].'</option>';
}
?>
<option value="0">Autre Tribunal</option>
</select>
<input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">
<script>
var tribunal = document.getElementById("select-tribunal");
if (tribunal.options[tribunal.selectedIndex].value === '0') {
document.getElementById('tribunal').style.visibility = 'visible';
} else {
document.getElementById('tribunal').style.visibility = 'hidden';
}
</script>
Thanks in advance :)
You have to add an eventlistener.
let tribunal = document.getElementById("select-tribunal");
tribunal.addEventListener('change', showInput);
showInput({
target: tribunal
});
function showInput(event) {
if (event.target.value === '0') {
document.getElementById('tribunal').style.visibility = 'visible';
} else {
document.getElementById('tribunal').style.visibility = 'hidden';
}
}
<label for="select-tribunal" class="form-label">Cadre Légal</label>
<select id="select-tribunal" required class="form-select" aria-label="Default select example">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="0" selected>Autre Tribunal</option>
</select>
<input type="text" class="form-control" id="tribunal" style="visibility: hidden" placeholder="Entrez le nom du tribunal">
Since php is running on server the page have to reload in order to see the changes you need to use JavaScript for for this task since you want to see the changes without reload
var select = document.querySelector("#mySelect");
var input = document.querySelector("#myInput");
select.addEventListener("change", function(event){
if(event.target.value === "other"){
input.style.display="block"
}else{
input.style.display="none"
}
})
<select id="mySelect">
<option value="a">A</option>
<option value="a">B</option>
<option value="c">C</option>
<option value="other">Other</option>
</select>
<input style="display: none" type="text" id="myInput">
I have the following two select drop-downs, this one for Office location:
<label class="label_select" for="office">Office<span class="required"><font color="red">*</font></span>
</label>
<select class="select" name="office" onchange="divisionSelectHandler(this)" required>
<option selected disabled style="display:none;" value="">Select Office</option>
<optgroup label ="Arizona">
<option value="Glendale">Glendale</option>
<option value="Mesa">Mesa</option>
<option value="AZRemote">Remote</option>
<option value="Tucson">Tucson</option>
<option value="Yuma">Yuma</option>
</optgroup>
<optgroup label="Oregon">
<option value="ORRemote">Remote</option>
<option value="Salem">Salem</option>
</optgroup>
<optgroup label="Utah">
<option value="Orem">Orem</option>
<option value="UTRemote">Remote</option>
<option value="Taylorsville">Taylorsville</option>
<optgroup>
</select>
and this one for Division:
<label class="label_select" for="division">Division<span class="required"><font color="red">*</font></span>
</label>
<select class="select" name="division" id="divisionstd" required>
<option selected disabled style="display:none;" value="">Select Division</option>
<option value="EarlyIntervention">Early Intervention</option>
<option value="Employment_Services">Employment Services</option>
<option value="Family_Services">Family Services</option>
<optgroup label="OMG-Accounting">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>
<option value="HR">OMG-HR</option>
<option value="Residential_Services">Residential</option>
</select>
What I am trying to do is hide certain Divisions based on the Office that is selected. For example, if a user selects "Glendale" from the office drop-down, I would like to hide the OMG-Accounting options from the Divisions drop-down. I am just learning JS and have something that hides the whole Divisions drop-down, but how can I hide individual options? JS:
<script>
function hide(){
var division = document.getElementById('divisionstd');
division.style.visibility = 'hidden';
}
function show(){
var division = document.getElementById('divisionstd');
division.style.visibility = 'visible';
}
function divisionSelectHandler(select){
if(select.value == 'Mesa'){
hide();
}}
</script>
Add id or name or class attribute to your optgroup
<optgroup label="OMG-Accounting" name="test54" id="test54">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>
JS :
function divisionSelectHandler(select){
if(select.value == 'Glendale'){
var ele = document.getElementById('test54')
ele.style.display = 'none'
}
}
OR
change html like this one.Assign unique lable to each optgroup
e.g. omgaccounting
<optgroup label="omgaccounting">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>
JS :
var arrEle = document.querySelectorAll('optgroup[label="omgaccounting"]');;
arrEle[0].style.display = 'none'
You can hide multiple optgroup in this way using class,label or name
$("select[name=office]").on("change", function() {
var getValue = $(this).val();
var targetGroup = $("select[name=division] optgroup[label='OMG-Accounting']");
(getValue=="Glendale") ? targetGroup.hide() : targetGroup.show();
});
working fiddle : https://jsfiddle.net/8et5raex/
$("select[name=division] optgroup[label='OMG-Accounting']");
targets optgroup with label='OMG-Accounting' under selection box with name division
For example, if a user selects "Glendale" from the office drop-down, I would like to hide the OMG-Accounting options from the Divisions drop-down
Try this in your existing code,
function divisionSelectHandler(select){
if(select.value == 'Glendale'){
$('divisionstd optgroup[label="OMG-Accounting"]').hide();
}
}
Select specific option group and hide it, Right now you are hiding entire select element.
Other options
1) Hide by option VALUE
$('divisionstd option[value="Family_Services"]').hide();
2) Hide by option TEXT
$('divisionstd option[text="OMG-HR"]').hide();
3) Hide OptionGroup by label
$('divisionstd optgroup[label="OMG-Accounting"]').hide();
In my registration page, I'm gonna use two drop-down select that one of them should be hidden if its Negative and if its positive new drop-down will open to choose ...
In mysql table I've table as diabetes name with enom
enum('negative', 'insulin', 'drug', 'ndm', 'mody', '')
Here's my code:
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
For example: If Diabetes is negative value is negative as default then Diabetes Type is hidden
and
If Diabetes is positive then Diabetes type will be appeared to choose items.
those values like insulin, drug, mdm, mody should be inserted into this:
value="positive"
How can I make it through java script?
I can't add class or div or span. Is it possible just through JavaScript using ??
Thank you so much
Use jquery, it is comparatively easier.
$(document).ready(function(){
$("#diabetestype").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").show();
}else{
$("#diabetestype").hide();
}
});
});
To make this code workable, you need to add value of Positive option also. So instead value="" change it to value="positive".
You can even hide the label also:
$(document).ready(function(){
$("#diabetestype").closest("div").hide();
$("#diabetes").on("change", function(){
var v = $(this).val();
if(v=="positive"){
$("#diabetestype").closest("div").show();
}else{
$("#diabetestype").closest("div").hide();
}
});
});
<div><label for="diabetes">Diabetes:</label>
<select id="diabet" name="diabet" onchange="checkDiabet();">
<option value="negative">Negative</option>
<option value="positive" id="isDiabet">Positive</option>
</select>
</div>
<div id="type" style="display: hidden;">
<label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
<script>
function checkDiabet() {
var isDiabet = document.getElementById("isDiabet").selected;
if (isDiabet == true) { document.getElementById("type").removeAttribute("style"); }
else { document.getElementById("type").style.display = "none"; }
}
</script>
First, set the first select to fire the function checkDiabet() by the attribute onchange. Then give the option an id, which needs to be checked, so you can access it easily.
Then, set the second select to display: none This could be done in a CSS header or file, or like in this case inline. (div style=""), also add an id to access it easily. (div id="type")
Now comes the function checkDiabete(). It checks if the select is selected (can be true or false (bool)). Is selected => show (div id="type"), if not, hide this div (and all of it's contents)
(if is already hidden, it then overwrites the (style="display: none;") with (style="display: none;))
That's it! :)
Try this:
function SelectDiabetes() {
var d = document.getElementById("diabetes").value;
var dType = document.getElementById("diabetestypebox");
if(d == "negative")
dType.style.display = "none";
else
dType.style.display = "block";
}
SelectDiabetes();
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="SelectDiabetes(this.value);">
<option value="negative">Negative</option>
<option value="positive">Positive</option>
</select>
</div>
<div id="diabetestypebox"><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Call a js function onchange of select id diabetes
<div><label for="diabetes">Diabetes:</label>
<select id="diabetes" name="diabetes" onchange="toggleTypes()">
<option value="negative">Negative</option>
<option value="">Positive</option>
</select>
</div>
<div><label for="diabetestype">Diabetes Type:</label>
<select id="diabetestype" style="display:none" name="diabetestype">
<option value="insulin">Insulin</option>
<option value="drug">Drug</option>
<option value="ndm">NDM</option>
<option value="mody">MODY</option>
</select>
</div>
Use the following javascript
function toggleTypes(){
var el=document.getElementById('diabetes');
var medElem=document.getElementById('diabetestype');
if(el.value=='positive') {
medElem.style.display='block';
} else {
medElem.style.display='none';
}
}
I need some JavaScript code to validate the page. Here is the html,
<select id="sel">
<option value="0" selected="selected">Please select</option>
<option value="first">Link 1</option>
<option value="second">Link 2</option>
<option value="third">Link 3</option>
<option value="last">No Link</option>
</select>
<div class="sample" style="display:none;">Sample Text</div>
<input type="button" value="submit" class="inputclass" />
Need some JavaScript code,
when user clicks first or last option, show the div and hide the button
when user clicks any of the link, hide the div and show the button
P.S :
Options in the Select will generate dynamically from the database.
My page will only run in JavaScript, hence no need of Jquery.
Please help...
I think this is the code what you need:
The JS part:
function getSelection(e) {
var selection = document.getElementsByTagName("option");
var index=document.getElementById("sel").selectedIndex;
var text = document.getElementById("sample");
var button = document.getElementById("input");
var option=document.getElementById("sel").options;
if (option[index].value == "first" || option[index].value == "last") {
text.style.display = "block";
button.style.display = "none";
} else {
if (text.style.display != "none") {
text.style.display = "block";
button.style.display = "none";
}
else {
text.style.display = "none";
button.style.display = "block";
}
}
return false;
}
document.getElementById("input").onclick = function() { getSelection() };
And the HTML (i slightly modified the original one to have access more efficiently to html elements):
<select id="sel">
<option value="0" selected="selected">Please select</option>
<option value="first">Link 1</option>
<option value="second">Link 2</option>
<option value="third">Link 3</option>
<option value="last">No Link</option>
</select>
<div id="sample" style="display:none;">Sample Text</div>
<input type="button" value="submit" id="input"/>
...and the Fiddle :
http://jsfiddle.net/eaRwa/2/