Как получить значение выпадающего в текстовую область - PullRequest
Новая
       2

Как получить значение выпадающего в текстовую область

3 голосов
/ 11 апреля 2019

У меня есть 3 функции (радио, текстовая область и выпадающий список) Мне удалось получить значение радио и текстовой области в текстовой области, однако раскрывающийся список не работает

То, что я пытаюсь сделать, - это когда я выбираю опцию «Радио», она будет отображаться в результатах текстовой области, затем, когда пользователь вводит текст в текстовой области, он добавляется в текстовую область, а затем, когда пользователь выбирает опцию для раскрывающегося списка, он получает значение определенной опции выпадающего меню для textarea так

(радио + текст + раскрывающийся список = единая текстовая область)

Я уже пробовал некоторые коды, но, похоже, не работает 

<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>

добавить значение переключателя + значение текстовой области + значение раскрывающегося списка в одну текстовую область

пример: 

Dear User,
<br>
<br>
dropdown value

1 Ответ

1 голос
/ 11 апреля 2019

Вам нужно решить три проблемы.

  • Добавить onchange событие к <select>
  • Способ получения значения выбранных опций: select.options[selectedIndex].value
  • Третья проблема заключается в том, что вы напрямую получаете value типа ввода checkbox. Это может быть null и ошибка. Используйте оператор || и после выбора элемента, чтобы предотвратить ошибку. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...