Display select fields using conditional statements in JS - javascript

I am designing a self-service site for people with problems accessing a secure website. I want it to generate drop downs with questions about their situation based on the answers to each previous drop down box. I am trying to use JS and conditional statements to accomplish this. I am not a programmer but I understand it enough to reverse engineer it. Here's what I have so far.
<select id="location" name="location" onclick='test()'>
<option value="0">Is this a personal computer or government computer?</option>
<option value="home">Personal</option>
<option value="gfe">Government</option>
</select>
<select id="home" name="home" style="display: none" onclick='test()'>
<option value="0">Do you have a CAC?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<select id="multi-cac" name="multi-cac" style="display: none" onclick='test()'>
<option value="0">How many CACs do you have?</option>
<option value="1">1</option>
<option value="2">More than 1</option>
</select>
<select id="gfe" name="gfe" style="display: none" onclick='test()'>
<option value="0">Is this a shared computer?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<select id="shared" name="shared" style="display: none" onclick='test()'>
<option value="0">Can other people access OWA on it?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<select id="overseas" name="overseas" style="display: none" onclick='test()'>
<option value="0">Have you recently returned from an overseas deployment?</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<div id="overseas-answer" style="display: none" onclick='test()'>
Please visit Milconnect and update your profile. Please wait 24 hours and try accessing your email again. If this does not work, please contact the help desk
</div>
function test() {
if (document.getElementById('location').value == 'home') {
document.getElementById('home').style.display = 'block';
} else {
document.getElementById('home').style.display = 'none';
}
if (document.getElementById('location').value == 'gfe') {
document.getElementById('gfe').style.display = 'block';
} else {
document.getElementById('gfe').style.display = 'none';
}
if (document.getElementById('gfe').value == '1') {
document.getElementById('shared').style.display = 'block';
} else {
document.getElementById('shared').style.display = 'none';
}
if (document.getElementById('shared').value == '1') {
document.getElementById('overseas').style.display = 'block';
} else {
document.getElementById('overseas').style.display = 'none';
}
if (document.getElementById('overseas').value == '1') {
document.getElementById('overseas-answer').style.display = 'block';
} else {
document.getElementById('overseas-answer').style.display = 'none';
}
}
Where I'm getting stuck is I can't figure out how to write the code to say something like "if value for gfe is 1 show shared. if value of gfe is 2 show multicac." when I try to write this it either does not work or it shows drop downs I don't want the user to see yet.
http://jsfiddle.net/JKqWf/341/ Here is a link to it.
Am I going at this wrong? Is there an easier way to do this?
Thanks in advance.

The issue you have with the way you have it is... When test is called it goes down and hits every if and tries to get the value for each drop down displaying or not. You want to only worry about the select that was changed.
For each of the selects do this...
<select id="location" name="location" onchange='test(this.id, this.value)'>
Then for test...
function test(id, val){
if(id == "location"){
handleLocationValues(val);
}
else if(id == "home"){
handleHomeValues(val);
}
...
...
}
Then you can make your "handle values" functions like this...
function handleLocationValue(val){
if(val == "home"){
// write code to show the home drop down..
}
else if{val == "gfe"){
// write code to show the gfe drop down...
}
...
}
You also are going to want to write logic if the user goes back up and changes one of the previous select that you hide all of the visible selects below it.
I noticed that in your fiddle you have jquery selected as one of the frameworks. If you are pulling that in then I would suggest looking into using it as it could make this so much easier. It will also get you to not use inline events and styles.
I hope this helps and good luck.

Related

How to hide a div when I click any item on select option?

Is there other way to hide a div when I click any item on the select option? Im trying to hide this:
<div id="video-borderr" class="video-borderr">ljlkj<iframe src="<?php echo $row['links'];?>" allowfullscreen="true" class="videorow"></iframe><div class="video-text"> <?php echo $row['titles'];?><br><?php echo $row['dates'];?> </div></div>
using the code below but it is not working. I also tried other code I saw but nothing works.
<select id="state" multiple name="state" onchange="if(this.value != 0) { this.form.submit(); } hidehehehe(this);">
<script>
function hidehehehe() {
document.getElementById("video-borderr").style.display = 'none';
}
</script>
Thank you!
EDIT:
Thanks for the responses, I think the onchange="if(this.value != 0) { this.form.submit(); which I use to automatically submit the select option is the problem. I tried removing it and my hidehehehe works. Don't know why it happens. Is there any approach I can use?
Probably you are getting errors in the console Cannot read property 'submit' of null
onchange="if(this.value != 0) { this.form.submit(); } hidehehehe(this);"
^^^^^
Because here this is a reference of select and does not contain form.submit. As that is getting errored hidehehehe is never called.
Solution
You can solve it like this
const form = document.getElementById("myForm");
const videoBorder = document.getElementById("video-borderr");
function onSelectChange(mySelect) {
if (mySelect.value != 0) {
form.submit();
}
videoBorder.style.display = 'none';
}
document.addEventListener("DOMContentLoaded", function(event) {
// If above code doesn't work then you should wrap all the code here,
// Since DOM is loaded and ready here.
});
<div id="video-borderr">This is a video border div</div>
<form id="myForm">
<select id="state" multiple name="state" onchange="onSelectChange(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
You have to create options for you select, I can't see any option above in your code! because the event is change so you need to have what you will change
document.getElementById("state").addEventListener("change",()=>{
document.getElementById("video-borderr").style.display = "none";
})
<div id="video-borderr">
<h1>heading</h1>
</div>
<select id="state">
<option value="1">1</option>
<option value="2">2</option>
</select>

HTML Dropdown - Error Message

I currently have a working HTML dropdown option, with a submit button that displays text based upon the options selected (Thanks to SO member Paul Redmond for creating it).
<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>
<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol">1.4 Petrol</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>
<button id="process">Update</button>
<p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p>
CodePen Link:
http://codepen.io/paulcredmond/pen/jrdowR
I was wondering how I can hide the text at the bottom of the HTML file and only display it once the user presses 'Update'.
I was also wondering how I can add an IF statement to the JS code, so that if one or both dropdown is not used/selected then it would prompt the user by editing the text at the bottom of the HTML code.
My apologies if the answer is very obvious, I have very limited knowledge of HTML and JS and my efforts throughout the morning seemed futile.
Thanks for reading and thanks for any guidance.
Edit (Update):
Here is my attempt at editing the JS, but i'm not too sure on how to remove the block of HTML text and simply display the text from my IF statement.
$('#process').on('click', function() {
var car = $('#car :selected').text();
var engine = $('#engine :selected').text();
if (car == "Ford"){
$('p .car').text("Error");
$('p .engine').text("Error");
} else{
$('p .car').text(car);
$('p .engine').text(engine);
}
});
I have managed to get a workaround for this, it:
1.) Displays the text below only when the button is pressed.
2.) Hides the text if a specific value is selected from the dropdown box and should instead display an error message.
HTML Code:
<!--Credit to StackOverflow member Paul Redmond-->
<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>
<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol 1.4">1.4 Petrol1</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>
<button id="process">Update</button>
<a id="displayText" style="display: none"><p>Please Select Another Option</p></a>
<div id="toggleText" style="display: none"><h1><p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p></h1></div>
JS Code
$('#process').on('click', function() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
var car = $('#car :selected').text();
var engine = $('#engine :selected').text();
if (car == "Fiat"){
ele.style.display = "none";
text.style.display = "block";
} else{
ele.style.display = "block";
text.style.display = "none";
$('p .car').text(car);
$('p .engine').text(engine);
}
});
Please let me know if there is a simpler way to achieve this or if there is error that you spot.

validate Select is not working with error in jquery

I have two select boxes, one named(ID) "Language" and another "time". I pasted my code below. If value is 0 it need to show an error(red color), but now it's showing green color. Otherwise it's working.
<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>
Script for language:
function validateSelect(language)
{
var myValue = document.getElementById('language').value;
if(myValue.length > 0)
{
document.getElementById('language').style.borderColor ='#80c75a';
document.getElementById('languageError').style.display = "none";
return true;
}
else
{
document.getElementById('language').style.borderColor ='#e35152';
return false;
}
}
Looking forward to some ones reply.
You're checking the length of languages value, which is in your case everytime 1. you must check value itself.

How to create dropdown menu that appears based on answer from another dropdown menu

I'm trying to create a page where you users have to make multiple selections that are based on each other. How do you create a form such that a specific type of dropdown menu #2 appears based on the user's selection in dropdown menu #1.
For example, lets say a user has to choose a "product category" and a "product subcategory". If a user chooses "bedding" from the first drop down menu, a second drop-down menu automatically appears with choices like "bed, mattress, pillow".
To further this example, lets say the user chose "electronics" instead of "bedding." Then the second-drop down menu would have choices like "tv, mp3 players, computers".
How would one go about doing something like that? Is it something you would do in HTML/CSS or some other form?
Thanks for the help!
EDIT - I'm using Django / Python to construct this website along with HTML, CSS, and Javascript.
You can use a combination of HTML and JavaScript (JSFIDDLE):
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<div id="f1" style="display:none">
<form name="form1">
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 1A</option>
<option value="2">Option 1B</option>
</select>
</form>
</div>
<div id="f2" style="display:none">
<form name="form2">
<select id="opts" onchange="showForm()">
<option value="0">Select Option</option>
<option value="1">Option 2A</option>
<option value="2">Option 2B</option>
</select>
</form>
</div>
<script type="text/javascript">
function showForm() {
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display = "block";
document.getElementById("f2").style.display = "none";
}
if (selopt == 2) {
document.getElementById("f2").style.display = "block";
document.getElementById("f1").style.display = "none";
}
if (selopt == 0) {
document.getElementById("f2").style.display = "none";
document.getElementById("f1").style.display = "none";
}
}
</script>
Like this? Created a js fiddle.
http://jsfiddle.net/wigster/MeTQQ/
It grabs the value of the drop down box, and then if it matches the rule, it'll set the other drop-down box to show, if not, keeps that other drop-down box hidden.
If you wish to use jQuery, you can use this test case:
http://jsfiddle.net/exXmJ/
The way I see it there are two ways to go. Delete the dropdown and exchange it for a new one, or hide/show two different dropdowns. Alexander covered the second method so I won't go into that.

jQuery: Show/Hide Elements based on Selected Option from Dropdown

UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.

Categories