Issue
I am trying to create selects and by choosing, fill the field in the "textarea". An example of what I did and what I'm trying to do. The image is edited. I don't know how to create more than one select that feeds the same textarea.
function fillFild() {
var myList = document.getElementById("myList");
document.getElementById("fild").value = myList.options[myList.selectedIndex].value;
}
function fillFild1() {
var myList = document.getElementById("myList1");
document.getElementById("fild1").value = myList.options[myList.selectedIndex].value;
}
<form name="Form">
Select your Device:
<select id="myList" name="select_field" onchange="fillFild();">
<option value="Laptop: ">Laptop</option>
<option value="PC:">PC</option>
<option value="Smartphone: ">Smartphone</option>
<option value="Tablet: ">Tablet</option>
</select>
<form name="Form1">
Select your Problem:
<select id="myList1" name="select_field" onchange="fillFild1();">
<option value="Software: ">Software</option>
<option value="Hardware:">Hardware</option>
</select>
<textarea name="TextArea" id="fild1" style="position:absolute;left:23px;top:153px;width:394px;height:119px;z-index:5;" rows="7" cols="47" spellcheck="false"></textarea>
</form>
Illustrating what I'm trying to do
Solution
Below you have the solution to your question:
const selectElements = document.querySelectorAll('.select_field');
const textArea = document.querySelector('textarea');
[].slice.call(selectElements).map(el => el.addEventListener('change', e => {
const selcted = e.target.value;
if (selcted !== '') {
textArea.value += selcted + '\n';
}
}));
<div>
Select your Device:
<select id="myList" name="select_field" class="select_field">
<option value="">-- choose --</option>
<option value="Laptop:">Laptop</option>
<option value="PC:">PC</option>
<option value="Smartphone:">Smartphone</option>
<option value="Tablet:">Tablet</option>
</select>
</div>
<div>
Select your Problem:
<select id="myList1" name="select_field" class="select_field">
<option value="">-- choose --</option>
<option value="Software:">Software</option>
<option value="Hardware:">Hardware</option>
</select>
</div>
<textarea name="TextArea" id="fild1" rows="7" cols="47" spellcheck="false"></textarea>
Answered By - Grzegorz T.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.