Hi I have this very simple code to go along with a revision timetabler I am creating for a school project. It's just a simple dropwdown list that allows the user to select the subjects they do. How would I add a button that creates another identical list below so the user can add more than 1 subject if they wish?
<!doctype html>
<html>
<head>
<title>Select your subjects</title>
<select id="subject1" name="subject1">
<option value="Maths">Maths</option>
<option value="Physics">Physics</option>
<option value="English">English</option>
<option value="Compting">Computing</option>
</select>
</head>
<body>
</body>
</html>
Something like this?
Note that I've changed the name of the select to be an array[]. So when you're processing the data on the server end, just note you'll be handling an array of element and not subject1, subject2, subject3, etc.
function addCourse() {
document.getElementById("subjects").innerHTML += '\
<br><select name="subject[]">\
<option value="Maths">Maths</option>\
<option value="Physics">Physics</option>\
<option value="English">English</option>\
<option value="Compting">Computing</option>\
</select>';
}
addCourse();
document.getElementById("add").addEventListener("click", addCourse);
<!doctype html>
<html>
<head>
</head>
<body>
<form method="post" action="">
<title>Select your subjects</title>
<div id="subjects">
</div>
</form>
<input type="button" id="add" value="Add Course">
</body>
</html>
I'd actually recommend a dropdown to specify how many lists the user wants. So something like this would be better:
var maxCourses = 5;
var select = document.getElementById("num");
var subjects = document.getElementById("subjects");
var previous = 1;
for (var i = 1; i <= maxCourses; i++) {
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = i;
select.appendChild(opt);
}
select.addEventListener("change", function() {
var diff = select.value - previous;
for (var i = 0; i < Math.abs(diff); i++)
if (diff > 0)
addCourse();
else
removeCourse();
previous = select.value;
});
function addCourse() {
subjects.innerHTML += '\
<select name="subject[]">\
<option value="Maths">Maths</option>\
<option value="Physics">Physics</option>\
<option value="English">English</option>\
<option value="Compting">Computing</option>\
</select>';
}
function removeCourse() {
subjects.removeChild(subjects.lastChild);
}
addCourse();
select {
display: block;
}
<!doctype html>
<html>
<head>
</head>
<body>
<form method="post" action="">
<title>Select your subjects</title>
Number of Courses:
<select id="num"></select><br>
<div id="subjects">
</div>
</form>
</body>
</html>
Related
I want to show specific text in select box without changing/removing text/value of option tag. e.g. When user selects "+91 India" I want to show only "+91"
function countryChange() {
//some code
document.getElementById('mySelect').value = 'some value';
}
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" onChange="countryChange()">
<option value="+91">+91 India</option>
<option value="+45">+45 Denmark</option>
</select>
</body>
</html>
This is the way you can do this
To be honest I do not think that what you are trying to do is a good idea. I would recommend creating some div and changing its content.
var select = document.getElementById('mySelect'),
options = select.options;
select.onchange = function() {
var option = options[select.selectedIndex];
option.text = option.value;
select.blur();
}
select.onfocus = function() {
for (i = 0; i < options.length; i++) {
options[i].text = options[i].getAttribute("data-text");
}
}
<!DOCTYPE html>
<html>
<body>
<select id="mySelect">
<option value="+91" data-text="+91 India">+91 India</option>
<option value="+45" data-text="+45 Denmark">+45 Denmark</option>
</select>
</body>
</html>
I am trying to create a dropdown menu and when one option is selected a div appears. All the divs are set to display none, When one option is clicked I would like to change that style to display: block. So far I have used onchange but that only applies to the whole select element and not the specific options.
So what are my choices for changing the display to block when clicking on a certain option of a select element?
This is my code
#card1, #card2, #card3 {
display: none;
}
<select name="" id="" onchange="showOnChange()">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
<div id="card1">card1</div>
<div id="card2">card2</div>
<div id="card3">card3</div>
<script>
function showOnChange() {
document.getElementById('card1').style.display = "block";
}
</script>
I little bit updated your html and js function as well, see below please if work for you:
<select name="" id="" onChange="showOnChange(this)">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
And JS part:
function showOnChange(self) {
var allDiv = self.options;
for(var i = 0; i < allDiv.length; i++){
document.getElementById(allDiv[i].value).style.display = "none";
}
document.getElementById(self.value).style.display = 'block';
}
You could get the value from the card that you select and show that id
#card1, #card2, #card3 {
display: none;
}
<select name="" id="" onchange="showOnChange(this)">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
<div id="card1">card1</div>
<div id="card2">card2</div>
<div id="card3">card3</div>
<script>
function showOnChange(element) {
var value = element.value
document.getElementById(value).style.display = "block";
}
</script>
Note the this keyword added to the select onchange function
You can catch which option is selected in your onChange and then based on that you can show your div.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
#card1{
display:block;
}
#card2, #card3 {
display: none;
}
</style>
<select name="" id="slct" onchange="showOnChange(event)">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
<div id="card1">card1</div>
<div id="card2">card2</div>
<div id="card3">card3</div>
<script>
function showOnChange(e) {
var elem = document.getElementById("slct");
var value = elem.options[elem.selectedIndex].value;
if(value == "card1")
{
document.getElementById('card1').style.display = "block";
document.getElementById('card2').style.display = "none";
document.getElementById('card3').style.display = "none";
}
else if(value == "card2")
{
document.getElementById('card1').style.display = "none";
document.getElementById('card2').style.display = "block";
document.getElementById('card3').style.display = "none";
}
else if(value == "card3")
{
document.getElementById('card1').style.display = "none";
document.getElementById('card2').style.display = "none";
document.getElementById('card3').style.display = "block";
}
}
</script>
</body>
</html>
Please check below link for the jsbin
https://jsbin.com/memilufogi/edit?html,output
you have to pass the value of select in showOnChange function or you can get in the function as well
function showOnChange(val) {
document.getElementById(val).style.display = "block";
}
#card1, #card2, #card3 {
display: none;
}
<select name="" id="" onchange="showOnChange(this.value)">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
<div id="card1">card1</div>
<div id="card2">card2</div>
<div id="card3">card3</div>
You could give all your divs a class, so that you can query the DOM by that class and hide them all. Then you look for the div whose ID matches the selected option and show it.
See the attached snippets.
document.getElementById('cardMenu').addEventListener('change', showOnChange);
function showOnChange(evt) {
// capture the target of the change event : select element
var cardMenu = evt.target;
// hide all cards
var cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
cards[i].style.display = "none";
}
// show the card whose id matches the selected value
document.getElementById(cardMenu.value).style.display = "block";
}
#card1,
#card2,
#card3 {
display: none;
}
<select name="cardMenu" id="cardMenu">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
<div class="card" id="card1">card1</div>
<div class="card" id="card2">card2</div>
<div class="card" id="card3">card3</div>
CSS
<style>
#card1, #card2, #card3 {
display: none;
}
</style>
HTML
<!-- Pass current selected value -->
<select name="" id="" onchange="showOnChange(this.value)">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
<!-- Add common class in every property -->
<!-- Class will help to reset all class display none when selected new option -->
<div id="card1" class="div_cls">card1</div>
<div id="card2" class="div_cls">card2</div>
<div id="card3" class="div_cls">card3</div>
JS
<script>
function showOnChange(div_id) {
var div_id = div_id;
/*
Getting lenght of all div
*/
var div_len = document.getElementsByClassName("div_cls").length;
/* run loop and reset all div display to none*/
for(i=0; i< div_len; i++) {
document.getElementsByClassName("div_cls")[i].style.display = "none";
}
// Now set block for current selected option
document.getElementById(div_id).style.display = "block";
}
</script>
Just with javascript:
function showOnChange() {
var whichOp = document.getElementById("sel").selectedIndex;
var c = document.getElementsByClassName("card");
for (len = 0;len < c.length; len++)
c[len].style.display = "none";
c[whichOp].style.display = "block";
}
#card1, #card2, #card3 {
display: none;
margin-top: 10px;
}
<select name="" id="sel" onchange="showOnChange()">
<option value="card1">card1</option>
<option value="card2">card2</option>
<option value="card3">card3</option>
</select>
<div id="card1" class="card">card1</div>
<div id="card2" class="card">card2</div>
<div id="card3" class="card">card3</div>
I want to add an option in dropdown list in a html form. The option will be read from a textbox then it will be added in a dropdown list. I am new to javascript. Here is my code:
<html>
<head>
<script>
function addval()
{
alert ("script ee");
var x=document.getElementById("myselect");
var y=document.getElementById("mtxt");
x.Add(y);
alert ("inserted in dropdown");
}
</script>
</head>
<body>
<form>
<select id="myselect" name="select">
<option>op1</option>
<option>op2</option>
<option>op3</option>
<option>op4</option>
</select>
<input type="text" name="mytext" id="mtxt">
<input type="button" value="add" onClick="addval()">
</form>
</body>
</html>
There is no Add method in the HTMLSelectElement class.
You must create the element <option> manually:
function addval()
{
var x = document.getElementById("myselect");
var y = document.getElementById("mtxt");
var newOpt = document.createElement('option');
newOpt.textContent = y.value;
x.appendChild(newOpt);
}
<html>
<head>
<script>
function addval()
{
var x = document.getElementById("myselect");
var y = document.getElementById("mtxt");
var newOpt = document.createElement('option');
newOpt.textContent = y.value;
x.appendChild(newOpt);
}
</script>
</head>
<body>
<form>
<select id="myselect" name="select">
<option>op1</option>
<option>op2</option>
<option>op3</option>
<option>op4</option>
</select>
<input type="text" name="mytext" id="mtxt">
<input type="button" value="add" onClick="addval()">
</form>
</body>
</html>
I need your help,
How can I additionally add function to the existing javascript code, such that when a new value provided in the field1 and is not listed in the select box, that the code will:
Check if the (field1) value is already listed in the select box, if it is, then select its value in (field2) and;
If the value provided in the field1 is not listed in the select box (field2) then add the new value from (field1) and select it in (field2)
Here's a fiddle: http://jsfiddle.net/s66qg6xp/
The code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
document.getElementById('field2').value = document.getElementById('field1').value
}
</script>
</head>
<body>
<input type="text" id="field1">
<br>
<select id="field2">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
<br>
<input type="button" value="test" onclick="test()">
</body>
</html>
All in JS:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var alreadyInList = [];
var allOptions = document.getElementsByTagName('option');
// populate already in list
for(var i = 0; i < allOptions.length; i++) {
alreadyInList[i] = allOptions[i].value;
}
var input = document.getElementById('field1').value;
for(var i = 0; i < allOptions.length; i++) {
if(alreadyInList.indexOf(input) > -1) {
// element is already in the list
} else {
alreadyInList.push(input);
var option = document.createElement('option');
option.value = input;
option.text = input;
document.getElementById('field2').appendChild(option);
}
}
}
</script>
</head>
<body>
<input type="text" id="field1">
<br>
<select id="field2">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
<br>
<input type="button" value="test" onclick="test()">
</body>
</html>
Or you can do it with jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
function test() {
var NewOption=document.getElementById("field1").value;
var options=$("#field2").children().filter(function (){return $(this).text()==NewOption});
if (options.length==0){
document.getElementById("field2").innerHTML=document.getElementById("field2").innerHTML+"<option value='"+NewOption+"'>"+NewOption+"</option>";
}
document.getElementById('field2').value = document.getElementById('field1').value;
}
</script>
</head>
<body>
<input type="text" id="field1">
<br>
<select id="field2">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
<br>
<input type="button" value="test" onclick="test()">
</body>
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>