I have 3 functions (radio, textarea, and dropdown) I was able to successfully retrieve the values of radio and textarea into the textarea. However, the drop down functionality is not working as expected.
My goal is to display the selected option from the radio buttons in the textarea, allow users to input text in the textarea, and then append the value of the selected dropdown option to the same textarea.
(radio + text + dropdown = single textarea)
I have attempted various codes but none of them seem to be functioning correctly.
<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>
Combine the values from the radio button, textarea, and dropdown into a single textarea.
Example:
Dear User,
<br>
<br>
dropdown value