I have one Dropdown list it has some values and other option,when i select other option it shows textbox ,i have to enter some text into it ,so i want to add that value to dropdown lilst,so how can i solve this?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
Add a button, get select value to check if it's others or pick / display the button according to it.
To add a new element, create an option and add it inside the select with x.add(option);
function CheckColors(){
var element = document.getElementById("mySelect");
var element2 = document.getElementById("color");
var element3 = document.getElementById("addColor");
if(element.value =='pick a color'|| element.value =='others'){
element2.style.display='block';
element3.style.display='block';
}
else {
element2.style.display='none';
element3.style.display='none';
}
}
function addValue(){
var textToAdd = document.getElementById("color").value;
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.text = textToAdd;
x.add(option);
}
https://jsfiddle.net/7woyyw4h/
Please check below code hope it will helpful for you.
<script>
$(document).ready(function(){
$('#btnAddToBegining').click(function(){
var data = $("#txtAdd").val();
$("#ddlList").prepend("<option value='0' selected='selected'>"+ data +" </option>");
});
$('#btnAddToEnd').click(function(){
var data = $("#txtAdd").val();
$("<option value='6'>" + data +"</option>").appendTo("#ddlList");
});
});
</script>
<select id="ddlList">
<option value="1">ASP.NET</option>
<option value="2">C#</option>
<option value="3">VB.NET</option>
<option value="4">HTML</option>
<option value="5">jQuery</option>
</select>
<input type="text" id="txtAdd" />
<br/><br/>
<input type="button" id="btnAddToBegining" Value="Add Item to Begining" />
<input type="button" id="btnAddToEnd" Value="Add Item to End" />
Related
Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.
Here is my html code!
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<?php
for ($column = 'A'; $column <= $lastcol; $column++) {
echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
</div>
</div>
In dropdown i m getting these values
QC code
Analyte
Assay Value
Assigned Value
STANDARDDEVIATION
ACCEPTABLEMIN
ACCEPTABLEMAX
Sample ID
Date
Try this code, then you can modified with your need.
$("#product").on("change keyup paste", function(){
var valuefound ='';
$("#platformid option").each(function(i){
if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } });
$('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Working fiddle here https://jsfiddle.net/8xfqeb9y/
<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>
var listItems = ["One","Two","Three","Four","Five","Six"];
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
$("#listItems").append("<option>" + listItems[i] + "</option>")
}
$(".textVal").on("focusout",function(){
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
if(listItems[i] == $(this).val()) {
$("#listItems").val($(this).val());
}
}
})
check now that values and texts are different and you can even select now by typing one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox > option").each(function() {
if($(this).text()==$("#txtselect").val())
{
$(this).attr('selected', 'selected');
}
});
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
check this you will get solution run snippet and type "one"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox").val($("#txtselect").val());
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
Try this
<script type="text/javascript">
function getselected(elem)
{
var textvalue = $(elem).val();
if(textvalue != '')
{
$('select').removeAttr('disabled');
$('select option').removeAttr('selected');
$('select option').each(function(){
if ($(this).html().indexOf(textvalue) > -1)
{
$('select').val($(this).attr('value'));
}
});
}
else
{
$('select').val('');
$('select').attr('disabled','disabled');
}
}
</script>
<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
<option value="">Select</option>
<option value="1">QC code</option>
<option value="2">Analyte</option>
<option value="3">Assay Value</option>
<option value="4">Assigned Value</option>
<option value="5">STANDARDDEVIATION</option>
<option value="6">ACCEPTABLEMIN</option>
<option value="7">ACCEPTABLEMAX</option>
<option value="8">Sample ID</option>
<option value="9">Date</option>
</select>
I have two dropdown menus named date and time respectively. I want to get the
text from the option tag when I click a button, but the javascript function does not seem to work. I 've found similar questions (and answers) about this but nothing worked. The code is below:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function collectData() {
var index = document.getElementById("date").selectedIndex;
var date = document.getElementById("date").options[index].text;
window.alert("You selected: " + date);
}
</script>
</head>
<body>
<select name="date">
<option value="1">date 1</option>
.....
</select>
<select name="time">
<option value="1">time 1</option>
.....
</select>
<button type="button" onclick="collectData()">Get data</button>
</body>
</html>
You're selecting the element by id but you didn't assign the id anywhere.
You need to add the correct id to the item:
<select id="date" name="date">
....
<select id="time" name="time">
Or you could select the items by name:
var index = document.getElementsByName("date")[0].selectedIndex;
Note: getElementsByName returns an array, thats why the [0] was added to select the first item that has that name.
Change code to
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function collectData() {
var e = document.getElementById("date");
var strUser = e.options[e.selectedIndex].value;
window.alert("You selected: " + strUser);
}
</script>
</head>
<body>
<select name="date" id="date">
<option value="1">date 1</option>
..
</select>
<select name="time">
..
</select>
<button type="button" onclick="collectData()">Get data</button>
</body>
</html>
Try this:
function collectData() {
var ddl = document.getElementById("dateSelect");
var text = ddl.options[ddl.selectedIndex].text;
window.alert("You selected: " + text);
}
<select id="dateSelect" name="date">
<option value="1">date 1</option>
<option value="2">date 2</option>
<option value="3">date 3</option>
</select>
<button type="button" onclick="collectData()">Get data</button>
Here a CodePen
you are using getElementById('date').so add id attribute to select element.
I make a script to calculate number.
But i want this script to be work only when user select dropdown to text2 (value=5)
But this script is not working (nothing happened when run the script) :(
Can anyone help or suggest me getting started with this script Please.
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
Calculate<br>
<input type="text" id="input">
<input type="text" disabled="disabled" id="result">
<script>
function copy() {
if (document.getElementById("stt").value == "5") {
$(document).ready(function(){
$("#input").keyup(function(){
var val1 = +$("#input").val();
$("#result").val(val1*79);
});
});
}
}
</script>
**EDIT**: Changed $("#input").on("change" with $("#input").on("keypress".
New working JSFiddle: http://jsfiddle.net/L69dp/1/
HTML Code:
<select id="stt">
<option value="">
Select
</option>
<option value="8">
text1
</option>
<option value="5">
text2
</option>
<option value="4">
text3
</option>
</select><br>
Calculate<br>
<form>
<input id="input" type="text"> <input disabled="true" id="result" type=
"text">
</form>
JS Code:
$(function() {
function calculate() {
var sttval = $("#stt").val();
if (sttval == "5") {
var val1 = $("#input").val();
$("#result").val(val1 * 79);
} else {
$("#result").val("");
}
}
$("#stt").on("change", function() {
calculate();
});
$("#input").on("keypress", function() {
calculate();
});}());
You need to add a reference to the jquery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
Put this before your existing script block.
Also, you do not need $(document).ready(function(){} inside the copy() function.
<head>
<script>
var value;
function copy() {
value=document.getElementById("stt").value; //get the value of select everytime it change the value
}
function dd()
{
if(value=="5")//if the value is 5 do the code below
{
var val1= document.getElementById('input');
document.getElementById('result').value=val1.value*79;
}
}
</script>
</head>
<body >
<select id="stt" onchange="copy()">
<option value="">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br>
<input type="text" id="input" oninput="dd()" >
<input type="text" disabled="disabled" id="result">
</body>
</html>
I want to store a string locally so when the user reloads the page it saves what was last there.
I looked at this and tried to implement it.
I had this code which basicllay has a button and a dropdown list of colors to change the background.
When I close and reopen the doc I want it to be the color that I saved.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="">
<label>
<select id="color">
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#FFCC00">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#663366">Indigo</option>
<option value="#FF00FF">Violet</option>
</select>
</label>
<input type="button" onClick="inputForm()" value="change color"/>
<form>
<script language="JavaScript">
<!--
function inputForm(){
var color = document.getElementById("color");
var outputContents=color.value;
document.body.style.backgroundColor = outputContents;
}
//-->
</script>
</body>
</html>
I made this code to do that but it didn't work
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="storeColor()">
<form action="">
<label>
<select id="color">
<option value="#FFFFFF">White</option>
<option value="#FF0000">Red</option>
<option value="#FFCC00">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
<option value="#663366">Indigo</option>
<option value="#FF00FF">Violet</option>
</select>
</label>
<input type="button" onClick="inputForm()" value="change color"/>
<input type="button" onClick="storeColor()" value="save color"/>
<script>
var outputContents;
function inputForm(){
var color = document.getElementById("color");
outputContents=color.value;
document.body.style.backgroundColor = outputContents;
}
function storeColor(){
// Store
localStorage.color = outputContents;
// Retrieve
document.body.style.backgroundColor = outputContents;
}
</script>
<form>
</body>
</html>
Local storage in JavaScript is uses (key, value) pairs of strings so if you wanted to save the value This is my test value. you would need to give it a key that you can get it from later, for example myTestValue.
So in code this would be
// set the value in window.localStorage
window.localStorage.setItem('myTestValue', 'This is my test value.')
// get the value from window.localStorage
window.localStorage.getItem('myTestValue')
Here is some more information: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
You code is almost complete. You only need to apply background color on window load. I added one more function applyColor:
function applyColor(color) {
color = color || localStorage.color;
document.body.style.backgroundColor = color;
// Select corresponding option in selectbox
var select = document.getElementById("color");
for (var i = 0; i < select.options.length; i++) {
if (select.options[i].value == color) {
select.options[i].selected = true;
return;
}
}
}
applyColor();
Also note that when page is loaded we should also select the option from selectbox corresponding to currently saved color.
Demo: http://jsfiddle.net/sd2Cx/
i have two radio buttons: in-campus and off-campus. when in-campus is selected the dropdown will have some options and when off-campus is selected there will be a different set of options. how can i do this in javascript?
i'm trying to use this. i have this code
function setInCampus(a) {
if(a == "true") {
setOptions(document.form.nature.options[document.form.nature.selectedIndex].value) }
}
function setOptions(chosen)
{
//stuff
}
it won't work. what's wrong?
First of all, make form usable and accessible even with JavaScript is disabled. Create an HTML markup that contains the dropdown lists for the radio buttons.
Then when JavaScript is enabled, hide element the dropdown elements on document load, and attach and event handler to radio buttons, so when of one them was checked, toggle visibility of the proper dropdown list.
<form>
<input type="radio" onclick="campus(0)" value="On" id="campus_on" />
<label for="campus_on" />
<input type="radio" onclick="campus(1)" value="off" />
<label for="campus_off" />
<select id="some_options">
</select>
</form>
<script>
function campus(type) {
document.getElementById('some_options').innerHTML = type ?
'<option>option 1</option><option>option 2</option>'
:
'<option>option 3</option><option>option 4</option>';
}
}
</script>
<form name="form" id="form" action="">
<input type="radio" id="radioButton1" name="radioButton" value="in-campus" />
<label for="radioButton1">in-campus</label>
<input type="radio" id="radioButton2" name="radioButton" value="of-campus" />
<label for="radioButton2">off-campus</label>
<select name="noOptions" id="noOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an Option</option>
</select>
<select name="icOptions" id="icOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an in-campus option</option>
<option value="icOption1">in-campus option 1</option>
<option value="icOption2">in-campus option 2</option>
</select>
<select name="ocOptions" id="ocOptions" style="display: none">
<option value="Choose an Option" selected="selected">Choose an off-campus option</option>
<option value="ocOption1">off-campus option 1</option>
<option value="ocOption2">off-campus option 2</option>
</select>
<select name="allOptions" id="allOptions" style="display: block">
<option value="Choose an Option" selected="selected">Choose an Option</option>
<option value="icOption1">in-campus option 1</option>
<option value="icOption2">in-campus option 2</option>
<option value="ocOption1">off-campus option 1</option>
<option value="ocOption2">off-campus option 2</option>
</select>
</form>
<script>
window.document.getElementById("noOptions").style.display = "block";
window.document.getElementById("allOptions").style.display = "none";
function changeOptions() {
var form = window.document.getElementById("form");
var icOptions = window.document.getElementById("icOptions");
var ocOptions = window.document.getElementById("ocOptions");
window.document.getElementById("noOptions").style.display = "none";
if (form.radioButton1.checked) {
ocOptions.style.display = "none";
icOptions.style.display = "block";
icOptions.selectedIndex = 0;
} else if (form.radioButton2.checked) {
icOptions.style.display = "none";
ocOptions.style.display = "block";
ocOptions.selectedIndex = 0;
}
}
window.document.getElementById("radioButton1").onclick = changeOptions;
window.document.getElementById("radioButton2").onclick = changeOptions;
</script>
Radio buttons can have an onClick handler.
<INPUT TYPE="radio" NAME="campustype" VALUE="incampus" onClick="setInCampus(true)">in-campus
<INPUT TYPE="radio" NAME="campustype" VALUE="offcampus" onClick="setInCampus(false)">off-campus
You could just define both 's in the code, and toggle visibility with javascript.
Something like this:
<html>
<head>
<script type="text/javascript">
function toggleSelect(id)
{
if (id == 'off')
{
document.getElementById('in-campus').style['display'] = 'none';
document.getElementById('off-campus').style['display'] = 'block';
}
if (id == 'in')
{
document.getElementById('off-campus').style['display'] = 'none';
document.getElementById('in-campus').style['display'] = 'block';
}
}
</script>
</head>
<body>
<select id='in-campus'>
<option>a</option>
</select>
<select id='off-campus' style='display: none;'>
<option>b</option>
</select>
<br />
<input type='radio' name='campustype' value='in' onclick="toggleSelect('in');" checked='1' /><label for='incampus'>In-campus</label><br />
<input type='radio' name='campustype' value='off' onclick="toggleSelect('off');" /><label for='offcampus'>Off-campus</label>
</body>
</html>
A prettier variant of this approach would not require support for javascript, it would gracefully fallback on basic html.
if you need to fetch the options from a database or something, you might consider using AJAX.
<html>
<head>
<script language="javascript">
var current = false;
function onChange()
{
var rad = document.getElementById("radIn").checked;
if(rad == current)
return;
current = rad;
var array = rad ? ["in1","in2","in3","in4","in5"] :
["out1","out2","out3","out4","out5"];
var sel = document.getElementById("dropDown");
sel.innerHTML = "";
var opt;
for each(var k in array)
{
//alert(k + " asdsd");
opt = document.createElement("option");
opt.innerHTML = k;
sel.appendChild(opt);
}
}
</script>
</head>
<body onload="onChange();">
<input type="radio" value="in" name="campus" onclick="onChange()"
id="radIn" checked="true"/>
<label for="radIn">In Campus</label>
<br/>
<input type="radio" value="out" name="campus" onclick="onChange()"
id="radOut"/>
<label for="radOut">Out Campus</label>
<br/>
<select id="dropDown"/>
</body>
</html>