I have a dropdown list which looks like this:
<select id="cityID">
<option value="mission">Mission</option>
<option value="bakersfield">Bakersfield</option>
<option value="knoxville">Knoxville</option>
</select>
And my code to get the value is:
var select = document.getElementById('cityID');
var text = select.options[select.selectedIndex].text;
text.innerHTML = cityID.value;
text.onchange = function(e) {
text.innerHTML = e.target.value;
}
The value always chooses the first item. How can I get it to accept the cityID and change the page,
I'm sure its a formatting or typo or wrong value ?
onchange event is trigger from the select element
your text variable seems to be an HTML element because you set its innerHTML property
a select element has a "value" property so you don't need to get it from the selectedIndex of the options.
var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
text.innerHTML = select.value;
select.onchange = function(e) {
textEl.innerHTML = e.target.value;
}
<select id="cityID">
<option value="mission">Mission</option>
<option value="bakersfield">Bakersfield</option>
<option value="knoxville">Knoxville</option>
</select>
<p id="text"></p>
You could achieve this using addEventListener also.
var select = document.getElementById('cityID');
var textEl = document.getElementById("text")
select.addEventListener("change", (e) => {
textEl.innerText = e.target.value;
})
Related
html form contains input elements.
Javascript and jquery code are used to create select element at runtime and inserting it after element elemand assigning Bootstrap 5 class to it:
let selectArray = ["Intv Scheduled", "Selected", "Rejected", "On Hold"];
let id = 'Customer';
$('#' + id).remove();
var selectList = document.createElement("select");
selectList.id = selectList.name = id;
selectList.className = "form-select";
elem.after(selectList);
for (var i = 0; i < selectArray.length; i++) {
var option = document.createElement("option");
option.value = option.text = selectArray[i];
selectList.appendChild(option);
}
selectList.focus();
User selects item using enter key. After pressing enter select element is still focused.
How to move focus to next element in form if enter is pressed?
How to replace $('#' + id).remove() with plain JavaScript so the jQuery dependency can be removed?
Kind of hard to guess what you are asking for.
There are already multiple suggestions and answers available on SO.
Enter key press behaves like a Tab in Javascript
document.addEventListener('keydown', function (e) {
if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
var form = event.target.closest('form');
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
return false;
}
});
<form>
<div id = "Customer">Customer</div>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<select>
<option value = "">Test</option>
<option value = "">Test</option>
</select>
<input type = "text">
</form>
There are two pure JavaScript methods for replacing the $(...).remove() function in jQuery.
Solution One - The .remove() function.
let id = "";
// Find the element then remove it
document.getElementById(id).remove();
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
Solution Two - Finding the parent node then using the .removeChild() method.
let id = "";
// Find the element mentioned
let element = document.getElementById(id);
// Find the elements parent node
let parent = element.parentNode;
// Remove the element from the parent
parent.removeChild(element);
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
I'm trying to display a message to the user if they decide not to choose an item from the dropdown menu using strictly vanilla JS. Instead, I get an error in the console that says cannot read property 'selectedIndex' of null. I cannot see what I'm doing wrong.
How can I rectify this problem?
Here's HTML:
<form>
<div>
<label>Drop Down Menu
<select name="menu">
<option value="">---</option>
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</select>
</label>
</div>
</form>
Here's JS:
var myForm = document.getElementsByTagName("form");
myForm.id = "the-form";
var submitButton = document.getElementsByTagName("button")[1];
submitButton.id = "submit-button";
function formValidation() {
var select = document.getElementsByTagName("select");
select.id = "myMenu";
var selectId = document.getElementById("myMenu");
if(selectId.selectedIndex <= 0) {
console.log("a menu item must be selected!");
}
alert("Chosen!");
}
submitButton.onclick = myForm.onsubmit = function() {
formValidation();
};
You are targeting a DOM node by the id of "myMenu" here:
var selectId = document.getElementById("myMenu");
while the select you want to target has id "menu". Therefore, you have to change either the id in the JS selection or the select's id in the html.
How can I set/retrieve the last selected value of a select drop-down with JavaScript? I'm trying to create an onchange function on a select drop-down that that sets the selected option, and then on each page-load, that valued is loaded.
Here is the HTML
<select class="testSelect">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test2">test3</option>
<option value="test2">test4</option>
</select>
I'm having a little trouble with the JavaSCript though.
var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var getLast = localStorage.getItem(select, lastSelected);
selectOption = getLast;
select.onchange = function () {
var lastSelected = select.options[select.selectedIndex].value;
localStorage.setItem(select, lastSelected);
}
and here's a fiddle http://jsfiddle.net/5yJNL/1/
The values in your HTML were wrong
<select class="testSelect">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
</select>
Javascript
var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('select');
if(lastSelected) {
select.value = lastSelected;
}
select.onchange = function () {
lastSelected = select.options[select.selectedIndex].value;
console.log(lastSelected);
localStorage.setItem('select', lastSelected);
}
http://jsfiddle.net/2MPPz/1/
You have at least two problems in your code.
The first one is an scope problem: The lastSelected variable is
local defined in your function. You must define as global variable.
The second one is that the first parameter of setItem & getItem
methods should be a String
So your corrected code looks like:
var lastSelected;
var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var getLast = localStorage.getItem('select', lastSelected);
selectOption = getLast;
select.onchange = function () {
lastSelected = select.options[select.selectedIndex].value;
localStorage.setItem('select', lastSelected);
};
I need to populate 2 different text boxes when something is selected in the dropdown box.
From the fiddle, i can be do it with one.
Sorry, let me clarify a little more. This dropdown list actually is the person's LONG NAME. I'm trying to populate a "nickname" and "contact number" textbox when his name is selected.
Look at this demo which I now have 2 textbox in there. In my database, I have a record of everyone's Fullname, nickname, and contact number. It's up to me how I create a select list, but I only want to select his full name to show the nickname and contact number on 2 seperate boxes..
Sorry but your example has only one texarea...
However if I don't' have misunderstood your question you can simply do that:
var mytextbox = document.getElementById('mytext');
var mytextbox2 = document.getElementById('mytext2');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function(){
mytextbox.value = mytextbox.value + this.value;
mytextbox2.value = mytextbox2.value + this.value;
}
<textarea id="mytext"></textarea>
<textarea id="mytext2"></textarea>
<select id="dropdown">
<option value="">None</option>
<option value="contactnumber1">text1</option>
<option value="contactnumber2">text2</option>
<option value="contactnumber3">text3</option>
<option value="contactnumber4">text4</option>
</select>
var mytextbox = document.getElementById('mytext');
var mytextbox2 = document.getElementById('mytext2');
var mydropdown = document.getElementById('dropdown');
mydropdown.onchange = function () {
mytextbox.value = mydropdown.options[this.selectedIndex].text;
mytextbox2.value = mydropdown.options[this.selectedIndex].value;
};
do you mean, you want to append selection each time some body selects item from drop down?
I do not see two text boxes in your fiddle that is why I am asking...
if you want unique values selected then..
var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');
var strValue = new String();
mydropdown.onchange = function(){
if(strValue.indexOf(this.value)<=0){
if(strValue!="")
{
strValue += "," + this.value;
}
else
{
strValue = this.value
}
}
mytextbox.value = strValue;
}
So you are wanting two values to be populated by one tag. With that said, what if you just put data attributes in the option tag? data-contactNumber data-longName
<select>
<option value="x" data-contactNumber = "yyyy" data-longName="zzzz">
.....
</select>
Then you can just assign the selected option text boxes the individual data attrs??
I have a list of option inside select list, also I have textfield that contain the option value when selected.
i would like to make the textfield disable as default and when i'm selecting one of the options - the textfield will be enable.
Can someone direct me to a simiar example?
thanks
$(function() {
var $select = $('#idForSelectBox'),
$textarea = $('#idForTextarea'),
status;
$select.bind('change', function() {
// If the value of the select box matches "Whatever you want"
// set status to '', else set status to 'disabled'
status = ( $(this).val() === 'Whatever you want' ) ? '' : 'disabled';
$textarea.attr('disabled', status);
});
});
Here is an example using plain JavaScript jsfiddle:
HTML:
<select id='myselect'>
<option value='none'>none</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<input type='text' value='' name='mytext' id='mytext' disabled />
<button value='add' id='addbtn' name='addbtn'>add</button>
We started by disabled the input textfield.
var myselect = document.getElementById('myselect');
function createOption() {
var currentText = document.getElementById('mytext').value;
var objOption = document.createElement("option");
objOption.text = currentText;
objOption.value = currentText;
//myselect.add(objOption);
myselect.options.add(objOption);
}
document.getElementById('addbtn').onclick = createOption;
myselect.onchange = function() {
var mytextfield = document.getElementById('mytext');
if (myselect.value == 'none'){
mytextfield.value = '';
mytextfield.disabled = true;
}else {
mytextfield.value = myselect.value;
mytextfield.disabled = false;
}
}
Using the example on the previous post we basically add an onchange state to the select tag so when an option is selected we set the textfield's value to what is currently selected, and then basically set the textfield's disable to false. Thus, enable the textfield when an option is selected. Additionally, i added an option called 'none' so when user selects none it'll diable the textfield.