I have one main dropdown, when one of the option is selected in the dropdown, in the next text field another dropdown has to come with different values, and when other option is selected in the main dropdown in the text has to appear in the same text field. So basically my question is, how to add both text and dropdwon in the same input field when the option is selected in the dropdown.
I have tried to do the one part of the problem i.e , when first two option is selected the value is appearing in input field , but I'm not able to make the dropdown appear in the input field when third option is selected.
Can anyone help me on this problem!
<html>
<body>
<label> Assets:</label>
<select id="name" onchange="func()">
<option value=""></option>
<option value="year">Calendar</option>
<option value="the current month">Month</option>
<option id="no-of-days">Days</option>
</select><br><br>
<label>Days:</label>
<input type="text" id="days">
<script>
function func() {
var dropdown = document.getElementById("name");
var selection = dropdown.value;
console.log(selection);
var TextBox = document.getElementById("days");
TextBox.value = selection;
document.getElementById('no-of-days').onclick = function() {
var values = ["1", "2", "3", "4"];
var select = document.createElement("select");
select.name = "date";
select.id = "date"
for (const val of values) {
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0).toUpperCase() + val.slice(1);
select.appendChild(option);
}
var label = document.createElement("label");
label.innerHTML = "Choose your date: "
label.htmlFor = "date";
document.getElementById("container").appendChild(label).appendChild(select);
}
}
</script>
</body>
</html>
You are not selecting the days dropdown as you should be. There is no value for days option (third option).
Firstly we need to set the value of third option
Check if its selected select onchange function
We can the check on change if the value of selected option is no-of-days then we can append another dropdown OR else we will not show anything.
Run snippet below to see it working.
function func() {
var dropdown = document.getElementById("name");
var selection = dropdown.value;
var TextBox = document.getElementById("days");
var appendNewSelect = document.getElementById("container")
TextBox.value = selection;
//If days (option) is selected
if (selection == 'no-of-days') {
var values = ["1", "2", "3", "4"];
//Create Select
var select = document.createElement("select");
select.name = "date";
select.id = "date"
//Select option
for (const val of values) {
var option = document.createElement("option");
option.value = val;
option.text = val.charAt(0).toUpperCase() + val.slice(1);
select.appendChild(option);
}
//Label
var label = document.createElement("label");
label.innerHTML = "Choose your date: "
label.htmlFor = "date";
appendNewSelect.appendChild(label).appendChild(select);
} else {
appendNewSelect.innerHTML = ''
}
}
<html>
<body>
<label> Assets:</label>
<select id="name" onchange="func()">
<option value=""></option>
<option value="year">Calendar</option>
<option value="the current month">Month</option>
<option value="no-of-days">Days</option>
</select><br><br>
<label>Days:</label>
<input type="text" id="days">
<br>
<br>
<div id="container">
</div>
</body>
</html>
Related
I am trying to get the value of the dynamic dropdown that is selected by the user (not pre-determined). I'm pretty sure I can't use (tried as well) document.getElementById("selectSubject").value; since it has conflicting ID. I cannot use document.getElementByClass since I will be using it to add style by CSS.
<script> //to generate the dynamic dropdown that is working
var select = document.getElementById("selectSubject");
if (arrayEmail[i] == email){
var opt = arraySubject[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
<script>
<select id="selectSubject"> //where the dynamic dropdown is show
<option>Choose assigned subject</option>
</select>
//additional info that may contribute to the problem
<form>
<input type="hidden" name ="subjectFolder" id="uploadFile">
<input type="file" name="imageFile">
<input type="button" value="Upload File" onclick="google.script.run.withSuccessHandler().upload(this.parentNode)">
</form>
Additional info is that I am planning to get the value of the dropdown to be used as parameter in <input type="hidden" name ="subjectFolder" id="uploadFile"> by using document.getElementById('uploadFile').value = "value of selected option in dropdown"
Edit Update I have tried this as well but didn't work
var subjects = document.getElementsByTagName("select").getElementById('selectSubject').value;
document.getElementById('uploadFile').value = subjects;
** Edit** Update I have tried ravishankar chavare's method by doing this but still doesn't work.
var e = document.getElementById("selectSubject");
var selected_value = e.options[e.selectedIndex].value;
document.getElementById('uploadFile').value = selected_value;
** Edit** Update
var e = document.getElementById("selectSubject");
var selected_value = e.options[e.selectedIndex].value;
document.getElementById('uploadFile').value = selected_value;
console.log(selected_value);
Console only prints "Choose assigned subject" since it is the default selected but when I remove <option> Choose assigned subject </option> the default selected is one of the array values of the javascript based from the dropdown but console cannot print it's value.
var select = document.getElementById("selectSubject");
var opt = 'youreemailvalue';
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
function SetSelectedValue() {
var e = document.getElementById("selectSubject");
var selected_value = e.options[e.selectedIndex].value;
document.getElementById('uploadFile').value = selected_value;
alert('value set to uploadfile')
}
<select id="selectSubject" onchange="SetSelectedValue();">
<option>Choose assigned subject</option>
</select>
<form>
<input type="hidden" name ="subjectFolder" id="uploadFile">
<input type="file" name="imageFile">
<input type="button" value="Upload File" onclick="google.script.run.withSuccessHandler().upload(this.parentNode)">
</form>
Following code is working for me
var e = document.getElementById("selectSubject");
var selected_value= e.options[e.selectedIndex].value;
selected_value get the value which is selected by the user
Working Jsfiddle Example Here
https://jsfiddle.net/0yfdc51g/
You can use document.querySelector. Use document.querySelectorAll if you want to select all select#selectSubject
console.log( document.querySelector( 'select[id=selectSubject]' ) );
console.log( document.querySelectorAll( 'select[id=selectSubject]' ) );
<div id="selectSubject"></div>
<select id="selectSubject" class="select"></select>
<select id="selectSubject"></select>
I am adding dropdowns dynamically by code it is rendered in browser like
<select id="contact-type1"></select>
<select id="contact-type2"></select>
...
Now I am trying the below code for dynamically selecting nth number of dropdown in order to fill option values in them.
function fillContactTypes()
{
var types = ["Phone","Whatapp","Facebook","Web","Fax"];
var select = document.getElementById('contact-type[*n]');
for(var i = 0; i < types.length; i++)
{
var option = document.createElement('option');
option.innerHTML = types[i];
option.value = types[i];
select.appendChild(option);
}
}
Please help me in the line "var select = document.getElementById('contact-type[*n]');
".
I have just added common class to all dropdowns and using jquery you can dynamically bind all dropdown as shown below.
var types = ["Phone","Whatapp","Facebook","Web","Fax"];
$(document).ready(function(){
fillContactTypes()
});
function fillContactTypes(){
var myselect = $('<select>');
$.each(types, function(index, key) {
myselect.append( $('<option></option>').val(key).html(key) );
});
$('.contact-type').append(myselect.html());
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<select id="contact-type1" class="contact-type">
</select>
<select id="contact-type2" class="contact-type">
</select>
<select id="contact-type3" class="contact-type">
</select>
<select id="contact-type4" class="contact-type">
</select>
I know change the value of an INPUT TEXT.
<script>
document.write('<input type="text" id="1" value="Hello">');
document.getElementById('1').value = ("Good bye");
</script>
How can I add values to an empty SELECT with this method?
<script>
document.write('<select><option id="2"></option><option id="3"></option></select>');
document.getElementById ........;
</script>
I want my empty SELECT becomes a SELECT with two options: "Hello" and "Good bye."
Why not write:
document.write('<select><option id="2">Hello</option><option id="3">Good bye</option></select>');
Or if you want to add one programmatically:
document.write('<select id="s"></select>');
var s = document.getElementById("s");
var option = document.createElement("option");
option.text = "Hello";
s.add(option);
var option = document.createElement("option");
option.text = "Good bye";
s.add(option);
this is very simple ....
<script>
var add = function(){
var sel = document.getElementById("sel");
var in1 = document.getElementById("in").value;
var opt = document.createElement("option");
opt.innerHTML = in1;
sel.appendChild(opt);
}
</script>
<select id="sel">
</select>
<input id="in" type="text" />
<button onclick="add();">add</button>
here is the demo: CLICK
another exanple how to do this thing by using innerHTML is here: jsfiddle
this is done by making a element as you know option by using javascript and then it is appended in the element select and the option text is the value of input box... and hope you are understood.
You can do it easily with jQuery
$(document).ready(function() {
$("select").append('<option id="3" value="somevalue">Some text</option>"');
});
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.