Develop Reference

Change var value from dropdown in javascript with onchange

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;
})

Javascript Cannot Change Value in Inputbox when combobox is changed to speicifc text

Here is my HTML Code
function getSelectValue()
{
if (document.getElementById("UserLocation").value == "Others"){
document.getElementById("location").style.display = "block";
document.getElementById("lbllocation").style.display = "block";
document.getElementById("location").value=="Empty"
alert("Hello World")
}
else {
var selectedValue = document.getElementById("UserLocation").value;
document.getElementById("location").value = selectedValue
document.getElementById("location").style.display = "none";
document.getElementById("lbllocation").style.display = "none";
alert("Goodbye")
}
}
getSelectValue();
<select id="UserLocation" name="ddlselect" onchange="getSelectValue()">
<option value="default">------Select---------</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="Others">Others</option>
</select>
<br>
<label id="lbllocation">Please Specify</label>
<input type="text" id="location" name="usrLocation" value="123">
So all is working except for this command
document.getElementById("location").value=="Empty"
in the if statement when I choose the "Others" from the combobox the value of location/input box is not changing to "Empty". I already try .innerHTML, .text but none is working? Can you guys explain me why its not working?

You are using '==' instead of '=' for assignment.
Change
document.getElementById("location").value == "Empty";
To
document.getElementById("location").value = "Empty";

Text box to be enabled when drop down box is selected

I am wanting to get a text box to appear when a either NINO or CRN is selected in the drop down box.
My problem is that the text box seems to always appear and then when I select Unknown it disappears, I would prefer it to only appear when the drop down options are the option.
This is my code:
var select = document.getElementById('NINOCRN'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == "NINO";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
//attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
National Insurance, CRN, Unknown
<select id="NINOCRN" required onchange="showDiv(this)">
<option value="select" disabled selected>Please Select</option>
<option value="NINO">National Insurance Number (NINO)</option>
<option value="CRN">Child Reference Number (CRN)</option>
<option value="Unknown">Unknown NINO/CRN</option>
</select>
<br>
<br>
<br>
<div id="hidden_div">
<input type="text" name="NINO" required>
<br>
<br>
</div>
Can anyone help me?

hide the input first, then show/hide based on your selection.
var select = document.getElementById('NINOCRN'),
onChange = function(event) {
var val = this.options[this.selectedIndex].value;
var shown = val === "NINO" || val === "CRN";
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
//attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
check the fiddle

Using Javascript to hide textfields

If a user selects a certain option value in one select field, how do you then make a text field hidden, s it will not be needed. This must be done before the form is submitted?
For example in the following select field, a user select chooses value='a' then how would this text field become hidden:
<select name="form" id="aForm">
<option value="a">choice1</option>
<option value="b">choice2</option>
<option value="c">choice3</option>
</select>
<input type="text" style="width:285px" name="textField" id="textField"/>

$("#aForm").on("change", function() {
if ($(this).val() == "a")
$("#textField").hide();
else
$("#textField").show();
});
Here is also a jsfiddle
I assumed that you will show the textfield for any other value than a.
If you're using plain JavaScript and not jQuery
function hideTF() {
var s = document.getElementById("aForm");
document.getElementById("textField").style.display
= (s.selectedIndex > 0 && s.options[s.selectedIndex] == 'a'
? "none" : "block");
}
var s = document.getElementById("aForm");
if (s.attachEvent)
s.attachEvent("onchange", hideTF);
else
s.addEventListener("change", hideTF, false);

You can use a variation of this:
var selection = aForm.selectedIndex,
field = document.getElementById('textField');
if ( selection === x ) {
field.style.display = "block"; // or visibility = "hidden"
}
This should be enclosed in an .onchange event. aForm.selectedIndex is the index of the corresponding <option> element that is selected.

disable textfield until select option from select list

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.