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

Answer 1

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>

How to get value of drop down to text area

Question

1 answers

solution1
1 ACCPTED 2019-04-11 02:56:45

How to get value of drop down to text area

Question

1 answers

solution1 1 ACCPTED 2019-04-11 02:56:45

solution1
1 ACCPTED 2019-04-11 02:56:45