HTML Dropdown - Error Message - javascript

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.

Related

Automatically generating dropdown list

I try to create an infinite dropdown list. With this I mean if you click something on the first dropdown list, the second dropdown list will pop up. If you choose something on the second the third one will pop up...
The only difference between the dropdown lists is that only the first one will be required to fill in.
My dropdown list:
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onclick="myFunction()" required>
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
The new coming dropdown lists:
<div id="myDIV" style="display:none">
<select name="dropdown" style="font-size:18pt;height:40px;width:410px;" onselect="myFunction()">
<option value="">Choose something</option>
{{range .}} <option value='1'>{{.Name}}</option>
{{end}}
</select>
</div>
The Java Script:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I also searched for another function than onclick, because that's not for the dropdown lists I think, at least it's buggy. I tried some others but than it doesn't do anything
How can I make an automatically infinite generating dropdownlist?
If i understood you correctly the following is what you want to do.
var addDropDown = function (e) {
e.currentTarget.removeEventListener(e.type, addDropDown);
var clone = e.currentTarget.cloneNode(true);
clone.setAttribute('id', "dropdown-" + document.getElementsByTagName("select").length)
e.currentTarget.parentNode.insertBefore(clone, e.currentTarget.nextSibling);
clone.addEventListener("change", addDropDown);
}
document.getElementById("dropdown-0").addEventListener("change", addDropDown);
<select id="dropdown-0" name="dropdown">
<option value="">make a selection</option>
<option value='1'>Option1</option>
</select>

What is a better way to use less code to hide and display select menu content? javascript

UPDATE The option values are not incremental, does that matter? Eg. one option could be apples, the next could be dog
I have multiple drop down menus with multiple options and every time I select an option I display different information but in order to hide it to display a different option's information, I have to compare the current option's value and if it matches, hide it, then show the new option's information.
As an example:
drop-down select menu
<select name="name_of_select_menu" onchange="showContent(value);">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>
javascript
<script type="text/javascript">
function showContent($i) {
if($i=="apple"){
document.getElementById('apple').style.display = "inline-block";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "inline-block";
document.getElementById('shoes').style.display = "none";
}
if($i=="apple"){
document.getElementById('apple').style.display = "none";
document.getElementById('dog').style.display = "none";
document.getElementById('shoes').style.display = "inline-block";
}
}
content to be displayed
<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>
As you can see, this can become a lot... I have like 20 options for one menu... 19 things to check if open and close, then open the actual one that you want to see.
Update:
function showContent(i) {
$(".content>div").hide(); //for arbitrary keywords.
$('div#' + i).css("display", "inline-block");
}
Change the function to:
function showContent(i) {
$("[id*=option]").hide();
$('#' + i).css("display", "inline-block");
}
Read more about attribute selectors
use below code. Check working DEMO
JQUERY
$(document).ready(function(){
$('.content div').hide();
$(document).on('change','select[name="name_of_select_menu"]',function(){
$('.content div').hide();
$('#'+$(this).val()).show();
});
});
HTML
<select name="name_of_select_menu">
<option value="">label option</option>
<option value="apple">apple</option>
<option value="dog">dog</option>
<option value="shoes">shoes</option>
</select>
<div class="content">
<div id="apple">
<p>
I am an apple
</p>
</div>
<div id="dog">
<p>
I am a dog
</p>
</div>
<div id="shoes">
<p>
I am a pair of shoes
</p>
</div>
</div>
Using jquery, you can write:
function showContent(i)
document.getElementById(i).style.display = "inline-block";
$("select[name=name_of_select_menu]").find("option").not("option[id=="+i+"]").hide();
}
jsFiddle (Updated)
You can simplify this in a few different ways. Move the change handler out of the HTML and bind to the DOM element directly from your JS. Then capture the value of the form element dynamically, and use that to determine which element to show.
Since you're toggling the visibility of the elements, you need a way to hide all of the elements at once. You can do this using$('.content > div').hide() to hide all of the elements and then $('#yourId').show() to show a specific one.
HTML:
<select name="name_of_menu">
<option value="">label option</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
JS (using jQuery):
$(function () {
$('[name="name_of_menu"]').change(function () {
$('.content > div').hide();
$('#' + $(this).val()).css("display", "inline-block");
});
});

JavaScript - Dropdown does not work

I'm trying to achieve one simple requirement, but couldn't make it!
My requirement is very simple - wanna display some alert to the user based on the options he selects from the drop down.
Below is the code, I've designed now. Please check and correct me where I'm going wrong.
<SCRIPT type="text/javascript">
var txt = this.getField("ddPortfolio").value;
If(txt == "Distribution")
window.alert("distribution");
</SCRIPT>
<div style="float:right">
<select name = "ddPortfolio">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
You have some syntax errors. Also there is no Distribution value in your options. I think you want this:
html
<div style="float:right">
<select name = "ddPortfolio" onchange="test(this);">
<option value="volvo">-- Select Option --</option>
<option value="saab">Training</option>
<option value="mercedes">Internal</option>
<option value="audi">External</option>
</select>
</div>
js
function test(obj){
var txt = obj.value;
if(txt == "audi"){
window.alert("audi");
}
}
fiddle
HTML
<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>
SCRIPT
<script type="text/javascript">
function getval(sel) {
alert(sel.value) ;
}
</script>
Simple Drop down box working using javascript.
You checked If(txt == "Distribution") but that was not one of the options in your select in the code you provided. also it's the onchange triegger you need
You also need to add an id to the select so you can reference it for example
HTML snippet
<select name = "ddPortfolio" id = "ddPortfolio">
Javscript
var MyColumn = document.getElementById("ddPortfolio");
MyColumn.onchange = function(){if (MyColumn.value == "audi") {alert('hi');}};
http://jsfiddle.net/64Z7H/

Display select fields using conditional statements in JS

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.

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.

Categories