How to get value of drop down to text area

Question

I have 3 functions (radio, textarea, and dropdown) I was able to get the value of radio and textarea into textarea however the drop down isn't working

What I am trying to do is when I select an option to Radio it will show on textarea result then When a user enters a text in textarea it will add to textarea then when a User select an option to drop down it will get the value of the specific dropdown option to textarea so

(radio+text+dropdown = single text area)

I already tried some codes but it doesn't seem to be working

<body>
<div class="container">
<p>Select Email templates below</p>

<!-- Mr/Mrs and Customer name field start here -->
  <form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Mr. " />Mr.
    <input type="radio" name="gender" value="Mrs. " />Mrs.
    <textarea id="textarea" placeholder="Enter customer name here" oninput="renderYourText()"></textarea>
  </form>
<!-- Mr/Mrs and Customer name field end here -->

<!-- Email template drop down start here -->
<div class="button dropdown"> 
  <select id="colorselector">
     <option></option>
     <option value="Cancellation">Cancellation</option>
     <option value="Refund">Refund</option>
  </select>
</div>

<div id="Cancellation" class="colors red"> 

This is email template for cancellation

</div

<div id="Refund" class="colors red"> 

This is email template for refund

</div

</p>
 </div>

<!-- Email template drop down start here -->

<!-- Text area result box start here -->
Real time generated email template
<textarea class="form-control" rows="5" id="result" name="text"></textarea>
<!-- Text area result box end here -->

<!-- Jquery and Javascript start here -->
<script>
document.mainForm.onclick = function(){
  renderYourText()
}
function renderYourText(){
  var gender = document.querySelector('input[name = gender]:checked').value;
  var y = document.getElementById('textarea').value;
  var x = document.getElementById('Cancellation').value;
  document.getElementById('result').innerHTML ='Dear '+gender + y + ', \n \n' + x;
}

</script>
<!-- Jquery and Javascript end here -->

</body>

add radio button value + textarea value + dropdown value into single text area

example:

Dear User,
<br>
<br>
dropdown value

Possible duplicate of [Display the selected value of a Drop down list in a text field (javascript)](https://stackoverflow.com/questions/10520328/display-the-selected-value-of-a-drop-down-list-in-a-text-field-javascript) — Anandhukrishna VR, Apr 11 '19 at 04:35

score 1 · Accepted Answer · answered Apr 11 '19 at 02:56

You need to fix three problems.

Add onchange event to the <select>
The way to get the value of selected options is select.options[selectedIndex].value
Third problem is that you are directly getting value of input type checkbox. It could be null and throw error. Use || operator and after selecting element to prevent error.

document.mainForm.onclick = function(){
  renderYourText()
}
function renderYourText(){
  var gender = (document.querySelector('input[name = gender]:checked') || {}).value;
  var y = document.getElementById('textarea').value;
  var select = document.getElementById('colorselector');
  var x = select.options[select.selectedIndex].value;
  document.getElementById('result').innerHTML ='Dear '+gender + y + ',' + x;
}

<body>
<div class="container">
<p>Select Email templates below</p>

<!-- Mr/Mrs and Customer name field start here -->
  <form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Mr. " />Mr.
    <input type="radio" name="gender" value="Mrs. " />Mrs.
    <textarea id="textarea" placeholder="Enter customer name here" oninput="renderYourText()"></textarea>
  </form>
<!-- Mr/Mrs and Customer name field end here -->

<!-- Email template drop down start here -->
<div class="button dropdown"> 
  <select id="colorselector" onchange="renderYourText()">
     <option></option>
     <option value="Cancellation">Cancellation</option>
     <option value="Refund">Refund</option>
  </select>
</div>

<div id="Cancellation" class="colors red"> 


</div>

<div id="Refund" class="colors red"> 

</div>

 </div>

<!-- Email template drop down start here -->

<!-- Text area result box start here -->
<textarea class="form-control" rows="5" id="result" name="text"></textarea>
<!-- Text area result box end here -->

<!-- Jquery and Javascript start here -->
<script>


</script>
<!-- Jquery and Javascript end here -->

</body>

Thanks for the help and it works! But what i expected is when I select the option on dropdown list example cancellation

It will get the text on here to text area as a result instead of (Cancellation) — Vynxz, Apr 11 '19 at 03:41

How to get value of drop down to text area

1 Answers1