Show/hide div according to select option in javascript - javascript

Searched the internet. Learnt how to do this. Implemented it. But it doesn't work.
I want to show the div student when student is selected and the div teacher when teacher is selected. This is a part of a jsp file.
HTML code :
<table>
<tr>
<td>
<select id="userType">
<option value="student">STUDENT</option>
<option value="teacher">TEACHER</option>
<option value="admin">ADMIN</option>
</select>
</td>
</tr>
<table>
Javascript code:
<script type="text/javascript">
var elem = document.getElementById('userType');
elem.onchange = function() {
var studentDiv = document.getElementById('student');
var teacherDiv = document.getElementById('teacher');
studentDiv.style.display = (this.value.equals("student")) ? 'block':'none';
teacherDiv.style.display = (this.value.equals("teacher")) ? 'block':'none';
};
</script>
I've been trying to get this right since morning. Tried other methods as well. Nothing works. What am I doing wrong?

Change equals to == in your code and it works DEMO
var elem = document.getElementById('userType');
elem.onchange = function() {
var studentDiv = document.getElementById('student');
var teacherDiv = document.getElementById('teacher');
studentDiv.style.display = (this.value == "student") ? 'block' : 'none';
teacherDiv.style.display = (this.value == "teacher") ? 'block' : 'none';
};

You may get value of selected option like below:
JSFIDDLE
<script type="text/javascript">
var elem = document.getElementById('userType');
elem.onchange = function() {
var studentDiv = document.getElementById('student');
var teacherDiv = document.getElementById('teacher');
studentDiv.style.display = this.options[this.selectedIndex].value == "student" ? 'block':'none';
teacherDiv.style.display = this.options[this.selectedIndex].value == "teacher" ? 'block':'none';
};
</script>

try this
studentDiv.style.display = (this.value==="student") ? 'block':'none';
teacherDiv.style.display = (this.value==="teacher") ? 'block':'none';

Two problems immediately pop out:
You are trying to select items that do not have id's defined.
You are calling a non-existent ".value" on the element value property.
These errors will be reported in your browser developer tools. Use them.

Related

How to show / hide same option from other dropdown using jQuery or Javascript

I have 4 dropdown list <td> <select class="encoderSelect" id="encoder1"><option value="None">-- Select User Command --</option><option value="1920*1080">1920*1080</option> <option value="320*240 to 1280* 720">320*240 to 1280*720</option> <option value="720*480">720*480</option> <option value="320*240 to 1920*1080">320*240 to 1920*1080</option> </select></td>
there is another 3 dropdown also there id is like encoder2,encoder3 and encoder4. I want to hide a the options if it is selected in any 4 of this list. I used this code by call class name but its not worked.
$('.encoderSelect').change(function(){
var optionval = $('.encoderSelect').val();
console.log(optionval);
$(".encoderSelect option[value='"+optionval+"']").hide();
});
$('.encoderSelect').on("change", function(){
$('.encoderSelect:selected', this).hide().siblings().show();
}).trigger('change'); // this code also tried but not worked
can I implement this using class.? or I must go by using id..?
$('#encoder1').on("change", function(){
var selected = $('#encoder1').val();
for (var i = 0; i<$('#encoder1').children().length; i++) {
var element = $('#encoder1 option:eq('+i+')');
if ($(element).text() === selected) {
$(element).hide();
} else {
$(element).show();
}
}
});
demo
Please try this. I hope it works fine and helps your project.
<script>
$(document).ready(function() {
$('select.encoderSelec').on('change', function(event) {
var prevValue = $(this).data('previous');
$('select.encoderSelec').not(this).find('option[value="'+prevValue+'"]').show();
var value = $(this).val();
$(this).data('previous',value); $('select.encoderSelec').not(this).find('option[value="'+value+'"]').hide();
});
});
</script>
Demo

Can i call another function inside the GetElement in Javascript

I am trying to call another function inside the getElement but it is not working everything when i change my selection. When i select Car, in the textbox my varxumb should populate. Any idea...
document.getElementById("mycall1").insertRow(-1).innerHTML = '<td><select id = "forcx" onchange="fillgap()"><option>Select</option><option>Force</option><option>Angle</option><option>Area</option></select></td>';
function fillgap() {
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
if (forcxlist == "Force") {
document.getElementById("result1").value = xnumb;
}
}
I don't know how this "Force" value is coming to check.
you can try these solutions.
if (forcxlist == "Force")
instead use
var forcxlistText = forcxlist.options[forcxlist.selectedIndex].text;
if (forcxlistText == "Force")
or use value technique
<div id ="mycall1">
</div>
<div id ="result1">
</div>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx" onchange="fillgap(this.value)"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
function fillgap(value){
var xnumb = 20;
if (value == "2"){
document.getElementById("result1").innerHTML = xnumb;
}
}
</script>
or use
<div id ="mycall1">
</div>
<input type="text" id="result1" value=""/>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
document.getElementById("forcx").onchange = function (){
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
var forcxlistValue = forcxlist.options[forcxlist.selectedIndex].value;
if (forcxlistValue == "2"){
document.getElementById("result1").value = xnumb;
}
}
</script>
The forcxlist variable is an element object, returned by the document.getElementById method. Afterwards, you are checking if this element object is equal to "Force", which is a string (meaning the contents of your if block will never be executed). Did you mean to check if the contents of that object are equal to Force?
Instead of
if (forcxlist == "Force"){
use
if (forcxlist.innerHTML == "Force"){
I hope this helps!
Can't use innerHTML so i changed it to .value
document.getElementById("result1").value = xnumb;
There are a couple issues here.
First, you are expecting forcxlist to be a string, not an element, so you need to use .value to get the selected value of the dropdown.
Second, you should do your comparison with === not ==, as this ensures type equality as well, and is best practice.
I would also recommend building your select using HTML elements. It keeps things cleaner, is more readable, and is easier to maintain.
Since you are using the same id for the select, you would have to change the selector in your fillgap handler to var forcxlist = e.target.value;, this way the event will fire based on only the select that you are interacting with, regardless of how many rows you have in the table.
Updated code is below, and an updated working fiddle here. As per your comment about adding additional rows, the fiddle has this working as well.
<input type="button" value="Add Row" onclick="addDropDown()">
<table id="mycall1"></table>
<script>
function addDropDown() {
var tbl = document.getElementById("mycall1");
var newRow = tbl.insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.appendChild(createDropDown("forcx", fillgap));
}
function createDropDown(id, onchange) {
var dd = document.createElement('select');
dd.id = id;
dd.onchange = onchange;
createOption("Select", dd);
createOption("Force", dd);
createOption("Angle", dd);
createOption("Area", dd);
return dd;
}
function createOption(text, dropdown) {
var opt = document.createElement("option");
opt.text = text;
dropdown.add(opt);
}
function fillgap() {
var xnumb = 20;
var forcxlist = e.target.value;
if (forcxlist === "Force") {
document.getElementById("result1").value = xnumb;
}
}
</script>
<input type="text" id="result1">

javascript code doesn't work in IE8

i have two drop-down menus. On the selection of one menu the value of other changes. But in IE it doesn't work and my drop-down appears empty. here is my code
<div style="position:absolute; bottom:95px; right:631px;">
<select id='Country' name='Country' style="width: 148px;background-color:white;">
<option selected='selected'>All Countries</option>
<option>Australia</option>
<option>Cambodia</option>
<option>China</option>
<option>India</option>
<option>Indonesia</option>
<option>Hong Kong</option>
</select>
<select id='Airport' name='Airport' style="width: 148px;background-color:white;"></select>
</div>
JavaScript code
<script type="text/javascript">
(function(){
var bOptions = {"All Countries":["All Airports"], "Australia":["Sydney","Brisbane","Melbourne","Perth"], "Cambodia":["Phnom Penh"], "China":["Beijing","Guangzhou","Hangzhou","Kunmimg","Shanghai Pudong","Shanghai Hongqiao"],
"India":["Bangalore","Mumbai","Delhi"],"Indonesia":["Jakarta","Bali"],"Hong Kong":["Hong Kong"],"Japan":["Osaka","Narita","Haneda"],"Korea":["Seoul Gimpo","Seoul Incheon"],
"Macau":["Macau"],"Malaysia":["Kuala Lumpur"],"New Zealand":["Auckland"],"Philippines":["Manila"],"Singapore":["Singapore"],"Taiwan":["Taipei","Kaohsiung","Songshan"],"Thailand":["Bangkok","Phuket"],
"Vietnam":["Hanoi","Ho Chi Minh City"]};
var A = document.getElementById('Country');
var B = document.getElementById('Airport');
//on change is a good event for this because you are guarenteed the value is different
A.onchange = function(){
//clear out B
B.length = 0;
//get the selected value from A
var _val = this.options[this.selectedIndex].value;
//loop through bOption at the selected value
for ( var i in bOptions[_val]){
//create option tag
var op = document.createElement('option');
//set its value
op.value = bOptions[_val][i];
//set the display label
op.text = bOptions[_val][i];
//append it to B
B.appendChild(op);
}
};
//fire this to update B on load
A.onchange();
})();
</script>
anyone help?
Try to use op.innerText = bOptions[_val][i]; for old versions of IE because it doesn't supports op.text
Change your code like,
if(IE8)// use user_agent to get browser version and browser type
{
op.innerText = bOptions[_val][i];
}
else
{
op.text = bOptions[_val][i];
}
Read browser compalibilty and innerText
Here is a link which will sove your problem : http://jehiah.cz/a/firing-javascript-events-properly

Script works in Chrome but not IE

It's so simple, but I don't know why IE isn't doing my innerHTML changes and other stuff.
function changeele2() {
document.getElementById("eleme2");
document.getElementById("workout");
document.getElementById("workoutweek");
if(workout.value == "Yes") {
eleme2.style.display = "inline-block";
workoutweek.className += " requiredField";
}
}
It called if I change the value of a Dropdown:
<select id="workout" onchange="changeele2()">
<option>No</option>
<option>Yes</option>
</select>
Neither works a Button with Text
I just can't find it out. Has anyone got an idea?
When you do document.getElementById("eleme2") you have to save the result of that operation and use that for subsequent access to that element.
function changeele2() {
var eleme2 = document.getElementById("eleme2");
var workout = document.getElementById("workout");
var workoutweek = document.getElementById("workoutweek");
if (workout.value == "Yes") {
eleme2.style.display = "inline-block";
workoutweek.className += " requiredField";
}
}
There are some browsers that make a global variable by the same name as the element id so that may be why it was sometimes working, but you should not rely on that.
This script shouldn't be working at all, chrome is salvaging it by looking up the elements by ID.
You should change it like this:
function changeele2()
{
var eleme2 = document.getElementById("eleme2");
var workout = document.getElementById("workout");
var workoutweek = document.getElementById("workoutweek");
if(workout.value == "Yes") {
eleme2.style.display = "inline-block";
workoutweek.className += " requiredField";
}
}

Hiding/displaying Divs onChange

I have a variety of divs with form fields. Based on a drop-down list, i need it to display the div corresponding to that value, and hide all the other divs. (Perhaps there's a more efficient way to even do that, rather than load all the divs and just hide them, i'm not sure).
What I have right now is this:
<select id="group" name="group">
<option></option>
<option value="8">Testing This Stuff</option>
<option value="9">Testing Other Stuff</option>
</select>
<div id="8" style="display:none;">**form fields**</div>
<div id="9" style="display:none;">**different form fields**</div>
And the current, semi-working javascript:
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('group');
eSelect.onchange = function() {
var id = eSelect.selectedIndex;
document.getElementById(id).style.display = 'block';
}
}
</script>
What i'm getting is 'id' is null, so i haven't been able to work past that part yet.
Part 2 would be hiding the old div and displaying the new div (if they were to change the option selected). Any suggestions?
Solution:
<script type="text/javascript">
window.onload = function() {
var current;
var eSelect = document.getElementById('group');
eSelect.onchange = function() {
var id = eSelect.value;
if (current && current != id) {
document.getElementById(current).style.display = 'none'
}
document.getElementById(id).style.display = 'block';
current = id;
}
}
</script>
<select id="materialsgroup" class="formInput" name="materialsgroup">
<option value=""></option>
<option value="groupid_8">Testing This Stuff</option>
<option value="groupid_9">Testing Other Stuff</option>
</select>
<div id="groupid_8">**form fields**</div>
<div id="groupid_9">**more form fields**</div>
To make the select and divs, this is what I've done:
foreach($groups as $key=>$value)
{
$valueItem = "groupid_".$value['group_id'];
$text = $value['title'];
$htmlString .= sprintf('<option value="%s">%s</option>', $valueItem, $text);
}
echo '<tr>
<td class="formLabelCell">Group</td>
<td class="formInputCell">
<select id="group" class="formInput" name="group">'.$htmlString.'</select></td></tr>';
foreach($groups as $gkey=>$gvalue)
{
echo '<div id=groupid_'.$groups[$gkey]['group_id'].' style="display:none;">';
//**Draw the form stuff here**
echo '</div>';
}
Try using
var id = eSelect.value;
For the second part, if you are using pure javascript (I mean, you're not using a javascript framework like jQuery) maybe a good solution is to load an array containing the div's ids and iterate it, hiding the div != eSelect.value
var arrDivs = new Array("1","2","3");
for (var i=0; i < arrDivs.length; i++) {
if (arrDivs[i] == eSelect.value)
document.getElementById(arrDivs[i]).style.display = 'block';
else
document.getElementById(arrDivs[i]).style.display = 'none';
}
I'm a javascript novice myself, but what about using a current variable to show which div is shown (and therefore knowing which div to hide)?
window.onload = function() {
var current, eSelect = document.getElementById('group');
eSelect.onchange = function() {
var id = eSelect.value;
if (current && current != id) {
document.getElementById(current).style.display = 'none'
}
document.getElementById(id).style.display = 'block';
current = id;
}
}
window.onload = function() {
var current, eSelect = document.getElementById('group');
eSelect.onchange = function() {
var id = eSelect.value;
if (current && current != id) {
document.getElementById(current).style.display = 'none'
}
document.getElementById(id).style.display = 'block';
current = id;
}
}

Categories

Resources