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??
Related
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;
})
I have drop down list as below.
<select id="checkOwner" multiple="multiple" onchange="copyValue()">
<option value="FIRSTNAME">First Name</option>
<option value="LASTNAME">Last Name</option>
</select>
I used Below javascript to add checkbox
$(function() {
$('#checkOwner').multiselect({
});
});
I used below javascript to copy selected value to text field.
function copyValue() {
var dropboxvalue = document.getElementById('checkOwner').value;
document.getElementById('mytextbox').value = dropboxvalue;
}
But the problem is, this copy only one value. I want to copy all the selected values. How can I do this?
Loop through the option and put selected values in a string and then output the string on the textbox
function copyValue() {
var str = "";
for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
str+= option.value+" ";
}
document.getElementById('mytextbox').value = str;
}
}
my approach is loop on the options then check the condition if isSelected
html
<select name="checkOwner" multiple="multiple" onchange="copyValue(this)">
js
const copyValue = me => {
let y = Array.from(document.querySelectorAll('select option')).map(x => x.selected ? x.value : '')
document.getElementById('mytextbox').value = y.join(' ');
}
I want to make a currency convert. mean using select tag of html select different currency and multiply with input value using javascript
function getInputValue(){
// Selecting the input element and get its value
var inputVal = document.getElementById("myInput").value=currency;
var dollar = inputVal*1.12;
var answer = document.getElementById('answer');
answer.value= dollar;
var inputVal = document.getElementById("myInput").value=currency;
var pound = inputVal*0,86;
var answer = document.getElementById('answer');
answer.value= pound;
var inputVal = document.getElementById("myInput").value=currency;
var pak = inputVal*170;
var answer = document.getElementById('answer');
answer.value= pak;
}
function newVal(){
document.getElementById("myForm").reset();
}
<select id="currency">
<option value="volvo" >Doller</option>
<option value="volvo">Pound</option>
<option value="volvo">Pak</option>
</select>
A nice approach would be to use each option's value to hold the currency's exchange rate, like so:
<select id="currency">
<option value="1.12" >Dollar</option>
<option value="0.86">Pound</option>
<option value="170">Pak</option>
</select>
Then, in your Javascript function, you can simply multiply the amount by the selected option's value attribute:
function getInputValue(){
//assuming you are typing the amount in an input with id "myInput"
var amount = document.getElementById("myInput").value;
var rate = document.getElementById("currency").value;
var result = amount * rate;
//output the result to HTML
//(assuming you have a div or element with id "result")
document.getElementById("result").innerHTML = result;
}
On a side note, in your original code, I am not sure what you were trying to do with:
var inputVal = document.getElementById("myInput").value=currency;
Did you mean to real the value of currency? Then you should have done:
var inputVal = document.getElementById("currency").value;
I have two html select element that the second one is disabled at first and only become enable if user choose one option from first select. consider we have 2 options in first select -> a , b if user choose a : in the second select options should be : a1,a2 if user choose b : in the second select options should be : b1,b2 ... I dont know what am i doing wrong that these two select options have conflict with each other !!!
<select id="main-category" required>
<option disabled selected> choose one option </option>
<option value="a"> a </option>
<option value="b"> b </option>
</select>
<select id="sub-category" required disabled> </select>
<!-- empty select -->
<script>
document.getElementById("main-category").onchange = function() {
document.getElementById('sub-category').disabled = false;
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
//first remove all previous options then add new ones
if (document.getElementById('sub-category').getElementsByTagName('option')[0]) {//check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
document.getElementById('sub-category').removeChild(opt);
}
if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
document.getElementById('sub-category').removeChild(opt);
}
opt0.value = "a1";
opt0.innerHTML = "a1";
opt1.value = "a2";
opt1.innerHTML = "a2";
document.getElementById('sub-category').appendChild(opt0);
document.getElementById('sub-category').appendChild(opt1);
} else if (this.value == 'b') {
//first remove all previous options then add new ones
if (document.getElementById('sub-category').getElementsByTagName('option')[0]) { //check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
document.getElementById('sub-category').removeChild(opt);
}
if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
document.getElementById('sub-category').removeChild(opt);
}
opt0.value = "b1";
opt0.innerHTML = "b1";
opt1.value = "b2";
opt1.innerHTML = "b2";
document.getElementById('sub-category').appendChild(opt0);
document.getElementById('sub-category').appendChild(opt1);
}
};
</script>
All you need to do is clear out the previous entries in the second drop down every time a selection is made in the first one.
<select id="main-category" required>
<option disabled selected> choose one option </option>
<option value="a"> a </option>
<option value="b"> b </option>
</select>
<select id="sub-category" required disabled> </select>
<!-- empty select -->
<script>
document.getElementById("main-category").onchange = function() {
// Clear out the second list before adding new items to it
document.getElementById('sub-category').innerHTML = "";
// *******************************************************
document.getElementById('sub-category').disabled = false;
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
//first remove all previous options then add new ones
if (document.getElementById('sub-category').getElementsByTagName('option')[0]) {//check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
document.getElementById('sub-category').removeChild(opt);
}
if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
document.getElementById('sub-category').removeChild(opt);
}
opt0.value = "a1";
opt0.innerHTML = "a1";
opt1.value = "a2";
opt1.innerHTML = "a2";
document.getElementById('sub-category').appendChild(opt0);
document.getElementById('sub-category').appendChild(opt1);
} else if (this.value == 'b') {
//first remove all previous options then add new ones
if (document.getElementById('sub-category').getElementsByTagName('option')[0]) { //check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[0];
document.getElementById('sub-category').removeChild(opt);
}
if (document.getElementById('sub-category').getElementsByTagName('option')[1]) {//check if there is a option then remove it
var opt = document.getElementById('sub-category').getElementsByTagName('option')[1];
document.getElementById('sub-category').removeChild(opt);
}
opt0.value = "b1";
opt0.innerHTML = "b1";
opt1.value = "b2";
opt1.innerHTML = "b2";
document.getElementById('sub-category').appendChild(opt0);
document.getElementById('sub-category').appendChild(opt1);
}
};
</script>
But, beyond that, your code needs to be cleaned up quite a bit because you shouldn't be scanning the document for the element you want to work with over and over again when you've already found it before. That's extremely wasteful.
Also, .innerHTML is for passing strings that contain HTML so that the HTML parser can parse the string and update the DOM accordingly. You are just setting plain strings with no HTML in them, so you should be using .textContent instead, which doesn't invoke the HTML parser and is more efficient.
Next (just FYI), if you want the value of an option to be the same as the text that is displayed to the user, you don't need to set a value for that option. The value is the contents of the option element by default.
Really, the entire operation can be made so much simpler by simply making new options in list2 based on the first letter of the option chosen in list1.
// Get references to the elements you'll be working with just once:
var list1 = document.getElementById("main-category");
var list2 = document.getElementById('sub-category');
list1.onchange = function() {
list2.disabled = false;
var newHTML = ""; // A string that will contain the new HTML for the second list
// Loop the amount of times we find <option> elements in list one, but start
// at the second one to account for the first one, which isn't really a true choice
for(var i = 1; i < list1.querySelectorAll("option").length; i++){
// Build up a string that the new option should be made from using the
// first character from the option found in list 1
newHTML += '<option>' + list1.value.substr(0,1) + i + '</option>';
}
// By setting a new value for .innerHTML, the old values get thrown out.
list2.innerHTML = newHTML;
};
<select id="main-category" required>
<option disabled selected> choose one option </option>
<option>a</option>
<option>b</option>
</select>
<select id="sub-category" required disabled> </select>
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.