HTML select dropdownlist with javascript function - javascript

This is how far I got:
<head>
<script type="text/javascript">
function showonlyone(thechosenone) {
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}
else {
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select>
<option SELECTED>Choose one</option>
<option value="javascript:showonlyone(id1)">First</option> <!-- That's probably wrong -->
<option value="javascript:showonlyone(id2)">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
Here is what it should do:
Create a dropdownlist (with 3 Values)
If you click on "First" it should only show the of the content of <div id="id1">
If you click on "Second" it should only show the of the content of <div id="id2">
I know that this can't work like this. But I do not know how I can get this working.
There might be a easier way than this javascript function but it has to be this way.
Thank you for your help

Use a onchange event handler instead:
Update your <select> to <select onchange="showonlyone(this)">.
Change your <option> values to only the IDs - not JavaScript calls.
Update your JavaScript to accept the HTMLSelectElement (which will be passed-in by the this, above). (Yes, you were correct here.)
From the chosen HTMLSelectElement, ask it for its value.
Here is a fixed, working version: http://jsfiddle.net/YRF6u/
Also included here:
<head>
<script type="text/javascript">
function showonlyone(selector) {
var thechosenone = selector.value;
var article = document.getElementsByTagName("div");
for(var x=0; x<article.length; x++) {
name = article[x].getAttribute("name");
if (name == 'article') {
if (article[x].id == thechosenone) {
article[x].style.display = 'block';
}else{
article[x].style.display = 'none';
}
}
}
}
</script>
</head>
<form>
<select onchange="showonlyone(this)">
<option SELECTED>Choose one</option>
<option value="id1">First</option>
<option value="id2">Second</option>
</select>
</form>
<div name="article" id="id1" style="display:none;">
First one selected
</div>
<div name="article" id="id2" style="display:none;">
Second one selected
</div>
I would not consider this production-ready code, but it should be sufficient enough to solve your current round of questions.

Related

How to access value?

I can't access the variable value when using it in the if-statement if (#Produkt.KategoriID == value). It says "the name 'value' does not exist in current context". How can i make it so I can use the variable in the if-statement?
#if (Model != null)
{
<div style="margin-left: 30%; margin-right: 25%;">
<label> Choose: </label>
<select name="Choose" id="select">
<option value="1">None</option>
<option value="2">Bronze</option>
<option value="3" selected>Silver</option>
<option value="4">Gold</option>
</select>
</div>
<script type="text/javascript">
var choice = document.getelementbyid('select');
var value = choice.options[choice.selectedindex].value;
</script>
if (#Produkt.KategoriID == value)
{
}
}
Basically you are trying to reach js variable from razor script. You can not reach it because their life cycles are different. End of the day all C# scripts converted HTML, CSS and js codes and there is no more C# scripts.
Also, for similar situation you can check here:
How to pass a value to razor variable from javascript variable?
You can try to use js to add html:
#if (Model != null)
{
<div style="margin-left: 30%; margin-right: 25%;">
<label> Choose: </label>
<select name="Choose" id="select">
<option value="1">None</option>
<option value="2">Bronze</option>
<option value="3" selected>Silver</option>
<option value="4">Gold</option>
</select>
</div>
<script type="text/javascript">
var choice = document.getelementbyid('select');
var value = choice.options[choice.selectedindex].value;
</script>
<div>
</div>
<div id="content"></div>
}
js:
$(function () {
var choice = document.getElementById('select');
var value = choice.options[choice.selectedindex].value;
$("#content").innerHTML = "your html here";
if (1 == value) {
var content = "";
content += "your html here";
document.getElementById("content").innerHTML =content;
}
})

Show a specific dropdown box after select a option from another dropdown box

I have dropdown box list and have some forms .i want to show specific form against dropdown box value. suppose dropdown box contains two list such as: (i)Man (ii)Animal. when Man option is selected then it enters into a form which contains two option male and female.On the other hand(for animal) it enters into a form which contains three option lions,tigers,cow.
how to write this statement in a html and javascripts code ???
This is pretty simple, you can do this with a few lines of jquery, you just need to bind a select's onchange event to hide each form type, then show the right form based on the select's new value.
Here is an example of this working:
https://codepen.io/jcapinc/pen/YrJobM
JQuery/Javascript
$(function(){
var hidestuff = function(){
$(".man-form,.animal-form").hide();
}
$("select[name='formtype']").change(function(){
hidestuff();
var value = $(this).val();
if(value == "man"){
$(".man-form").show();
}
if(value == "animal"){
$(".animal-form").show();
}
});
hidestuff();
});
HTML
<div class="container">
<div class="col-md-offset-3 col-md-6">
<form>
<h1>Creature Form</h1>
<div class="form-group">
<label for="formtype">Choose Creature Type</label>
<select class="form-control" name="formtype">
<option value="">- Choose - </option>
<option value="man">Man</option>
<option value="animal">Animal</option>
</select>
</div>
<div class="man-form">
<div class="form-group">
<label for="manstuff">Man Stuff</label>
<input class="form-control" type="text"/>
</div>
</div>
<div class="animal-form">
<div class="form-group">
<label for="animalstuff">Animal Stuff</label>
<input class="form-control" type="text"/>
</div>
</div>
</form>
</div>
</div>
use this sample :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="formSelector">
<option value="0">select form type</option>
<option value="humanForm">human</option>
<option value="animalForm">animal</option>
</select>
<div id="humanForm" style="display:none;">
<input type="radio" name="humanSelector" />Man
<input type="radio" name="humanSelector" />Woman
</div>
<div id="animalForm" style="display:none;">
<input type="radio" name="animalSelector" />cat
<input type="radio" name="animalSelector" />dog
<input type="radio" name="animalSelector" />lion
</div>
<script>
var formSelector = document.getElementById("formSelector");
var humanForm = document.getElementById("humanForm");
var animalForm = document.getElementById("animalForm");
formSelector.addEventListener("change", function (event) {
humanForm.style.display = "none";
animalForm.style.display = "none";
switch (formSelector.value) {
case "humanForm":
humanForm.style.display = "block";
break;
case "animalForm":
animalForm.style.display = "block";
break;
}
});
</script>
</body>
</html>
I assumed this was two selects, but I see you want to show/hide a form, in which case, I'd recommend Jeffrey's answer.
There needs to be some relation between the first select and the second select. One way would be to add an attribute called data-relation which connects both selects. On any change, the select will be updated. You will need to add things like initial display and displaying only non-hidden options, but I'll leave that for you.
var cat = document.getElementsByTagName('select')[0];
var opt = document.getElementsByTagName('select')[1];
cat.addEventListener('change', function(s) {
for (var i = 0; i < opt.options.length; i++)
opt.options[i].hidden = opt.options[i].dataset.relation !== s.target.value;
});
<select>
<option>man</option>
<option>animal</option>
</select>
<select>
<option data-relation=man>male</option>
<option data-relation=man>female</option>
<option data-relation=animal>lions</option>
<option data-relation=animal>tigers</option>
<option data-relation=animal>cow</option>
</select>

jQuery: Show div depending on dropdown selection

This is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
$('select[name=payment]').change(function() {
var value = $(this).val();
if (value == "debit") {
$(".box").not(".debit").hide();
$(".debit").show();
} else if (value == "transfer") {
$(".box").not(".transfer").hide();
$(".transfer").show();
}
});
});
</script>
</head>
<body>
<select name="payment">
<option data-calc="0" value="" disabled selected>Chose payment ↓</option>
<option value="transfer">transfer</option>
<option value="debit">debit</option>
</select>
<div class="debit box">debit</div>
<div class="transfer box">transfer</div>
</body>
</html>
That works very good. But I don't want to call my class debit box. I want to call it debit instead.
That means <div class="debit">debit</div> instead of <div class="debit box">debit</div>.
How can I get rid of this box thing?
Put all the boxes inside another DIV.
<div id="boxes">
<div class="debit box">debit</div>
<div class="transfer box">transfer</div>
</div>
Then you can do:
$("#boxes > div").hide();
$(".debit").show();
If you want the className to be debit, and identify it with this classname in the jquery hide method, then the method should look like this:
<script>
$(document).ready(function() {
$('select[name=payment]').change(function() {
var value = $(this).val();
if (value == "debit") {
$(".transfer").hide();
$(".debit").show();
} else if (value == "transfer") {
$(".debit").hide();
$(".transfer").show();
}
});
});
</script>
But I think it highlights that you want what Barmar suggests because you'll need to update hiding and showing manually for any choice element you'll add. But for two elements this might be ok.
This might be works for you:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
$('select[name=payment]').change(function() {
var value = $(this).val();
$(".boxes div").hide();
$("." + $value).show();
});
});
</script>
</head>
<body>
<select name="payment">
<option data-calc="0" value="" disabled selected>Chose payment ↓</option>
<option value="transfer">transfer</option>
<option value="debit">debit</option>
</select>
<div class="boxes">
<div class="debit">debit</div>
<div class="transfer">transfer</div>
</div>
</body>
</html>

Two Drop down menu's when "other" is selected in either dropdown open a text box

I need two drop down menu's that when "other is selected from either menu a text box appears to allow the user to type their answer.
I can create both drop down menu's and can get one of them to open a text box but I can't seem to get both to complete the same action. I have tried many options and can't get it to work. Can anyone please help.
Thank you
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('association');
var optOtherReason = document.getElementById('association_detail');
eSelect.onchange = function() {
if(eSelect.selectedIndex === 5) {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
}
</script>
</head>
<body>
<p>
<label>Stakeholder association (How you are affiliated with EMWIN):</label>
<select id = "association" name="association" >
<option value="na">Select:</option>
<option value="AR">Academic Research</option>
<option value="EM">Emergency Management</option>
<option value="EV">Equipment Vender</option>
<option value="RB">Re-broadcast</option>
<option value="Other">Other</option>
</select>
</p>
<div id="association_detail" style="display: none;">
<input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
</div>
<p>
<label>Stakeholder association (How you are affiliated with EMWIN):</label>
<select id = "select_use" name="select_use" >
<option value="na">Select:</option>
<option value="sat">Satellite</option>
<option value="int">Internet</option>
<option value="vhf">VHF Radio Rebroadcast</option>
<option value="Other">Other</option>
</select>
</p>
<div id="Use" style="display: none;">
<input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" />
</div>
</body>
</html>
A few issues I noticed:
Your "other" text boxes both have the same id/name; this does not conform the HTML standard. You need to ensure each element has a unique id.
You're only listening to eSelect changes; if you want to also toggle the visibility of the Use div, you'll need to listen to when the select-use changes (ie you need to construct another handler).
You'll need to get the second select box (id="select_use") and add another onchange handler to it. In this second onchange handler, you will need to select your second textbox (id="use") to show/hide it.
Here is an updated version of your code:
var eSelect = document.getElementById('association');
var eSelect2 = document.getElementById('select_use');
var optOtherReason = document.getElementById('association_detail');
var optOtherReason2 = document.getElementById('Use');
eSelect.onchange = function() {
if(this.options[this.selectedIndex].value === 'Other') {
optOtherReason.style.display = 'block';
} else {
optOtherReason.style.display = 'none';
}
}
eSelect2.onchange = function() {
if(this.options[this.selectedIndex].value === 'Other') {
optOtherReason2.style.display = 'block';
} else {
optOtherReason2.style.display = 'none';
}
}
Try it here: https://jsfiddle.net/ve9fg0tc/2/
Also in your onchange handler, it would be better to show/hide your textbox based on the selected value ('other') rather than the index. This is because you may add/remove more items in your menu in the future so the index will change and the condition won't work anymore.

Update Textbox with Combobox value on ValueChange event

My ultimate goal with this is to make a dropdown that allows user input also. The best I can seem to do is an textbox next a dropdown that makes it look like they are similar, the issue I am running into is that I need the textbox to update whenever my dropdown value is changed. I have some code I've been playing with (below), but it doesn't seem to be getting me anywhere! Any pointers on how I can get this to work, or am I messing up the syntax? (fairly new to both jscript and html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
select
{
width:200px;
}
</style>
<head>
<title>Test</title>
<script type="text/JavaScript">
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
</script>
</head>
<body>
<form action="" method="">
<input name="stroke"/>
<select name="theItems" onchange="otherSelect()">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
You should execute your script in the window.onload event. The elements are not available to your script when it is being executed. Change your script to this
<script type="text/JavaScript">
window.onload = function(){
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
}
</script>
This way the script will be executed after the HTML elements have been rendered by the browser.
Here's a simple pure JavaScript implementation of what you want. http://jsfiddle.net/24Xhn/
We're going to setup the markup so the select box and the other input box have similar name and id attributes. We'll use classes to setup/initialize the onchange events and make sure the inputs start off hidden and disabled. By toggling the "disabled" attribute, true or false we are making it so the input or select don't show up when the form is submitted, submit the form in the JSFiddle with different combinations and you'll see the output in the query string of the URL.
HTML
<select id="items1" name="items1" class="select-other">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<input id="items1-other" name="items1-other" class="input-other" />
JS
// setup
var inps = document.getElementsByClassName("input-other");
for(var i=0; i<inps.length; i++) {
var inp = inps[i];
// hide & disable the "other" input
inp.style.display = "none";
inp.disabled = true;
// set onchange, if input is empty go back to select
inp.onchange = function() {
var val = this.value;
if(val == "") {
this.style.display = "none";
this.disabled = true;
// get its associated select box
var sel = document.getElementById(this.id.replace(/-other$/i, ""));
sel.style.display = "";
sel.disabled = false;
}
};
}
var sels = document.getElementsByClassName("select-other");
for(var i=0; i<sels.length; i++) {
var sel = sels[i];
// set onchange if value is other switch to input
sel.onchange = function() {
var val = this.value;
if(val == "other") {
this.style.display = "none";
this.disabled = true;
// get associated input box
var inp = document.getElementById(this.id + "-other");
inp.style.display = "";
inp.disabled = false;
}
};
}
I just realized what was wrong. I didn't truly look at the html until I copied and pasted it into a test application and I figured out the issue.
You need to set the id tag to the stroke and theItems not the name tag. That's why it's not doing anything. There was, I'm guessing, a copy/paste issue as well because you didn't have a closing html tag, but I assumed you just missed copying that. Also, you don't really need global variables in order to retrieve the input and select you just need them inside the actual function, and you can actually pass the select into the function like so.
Your code corrected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
select
{
width:200px;
}
</style>
<script type="text/javascript">
function otherSelect(obj)
{
var input = document.getElementById('stroke');
input.value = obj.value;
}
</script>
</head>
<body>
<form action="" method="">
<input id="stroke" name="stroke"/>
<select id="theItems" name="theItems" onchange="otherSelect(this)">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
</html>
I also wanted to create a combobox with an auto-updating text field next to it for new entries, and came up with this in less than an hour, based on simple html and javascript examples from w3schools.com. It works perfectly on my IE browser.
<!DOCTYPE html>
<html>
<head>
<script>
function updateField(name, value)
{
document.getElementById(name).value = value;
}
</script>
</head>
<body>
<select name='10' onchange='updateField(this.name, this.value)'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" id="10" value="volvo">
</body>
</html>

Categories