Блог

Главная - Вопросы по программированию - Как получить значение радио и текстового поля в одной текстовой области

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

#javascript

#javascript

Вопрос:

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

Я уже пытался найти какой-то код на нескольких веб-сайтах, но не могу заставить его работать

 document.mainForm.onclick = function() {
  var gender = document.querySelector('input[name = gender]:checked').value;
  result.innerHTML = 'Dear '   gender;

}

function myInput() {
  var y = document.getElementById('textarea').value;
  document.getElementById('result').innerHTML = y;
}  
 <p>Select Email templates below</p>
<form id="mainForm" name="mainForm">
  <input type="radio" name="gender" value="Mr." />Mr.
  <input type="radio" name="gender" value="Mrs." />Mrs.
</form>
<br>
<textarea id="textarea" placeholder="please input your texts here" oninput="myInput()" /></textarea>

Real time generated email template
<textarea class="form-control" rows="5" id="result" name="text"></textarea>

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

Выбранный переключатель поле ввода пользователя пример: Mr. Stackover

Но когда я выбираю переключатель, он переходит в область вывода текста, затем, когда я ввел текст в поле текстовой области, он удалил переключатель и создал новый текст

Кстати, я новичок в веб-разработке. Пожалуйста, без жаргона.

Ответ №1:

Вы можете присвоить значение переменной и позже использовать, как показано ниже.

 var static_label = '';
document.mainForm.onclick = function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    static_label = 'Dear ' gender;
    document.getElementById('result').innerHTML = static_label;  

}

function myInput(){
var y = document.getElementById('textarea').value;
document.getElementById('result').innerHTML = static_label   y;  

}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select Email templates below</p>
    <form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Mr." />Mr.
    <input type="radio" name="gender" value="Mrs." />Mrs.
</form>
<br>

<textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea>

Real time generated email template
<textarea class="form-control" rows="5" id="result" name="text"></textarea>

Ответ №2:

этот код работает для вас

 document.mainForm.onclick = function(){
  renderYourText()
}

function renderYourText(){
  var gender = document.querySelector('input[name = gender]:checked').value;
  var y = document.getElementById('textarea').value;
  document.getElementById('result').innerHTML ='Dear ' gender   y; 
}  
 <p>Select Email templates below</p>
  <form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Mr." />Mr.
    <input type="radio" name="gender" value="Mrs." />Mrs.
  </form>
<br>

<textarea id="textarea" placeholder="please input your texts here" oninput="renderYourText()"></textarea>

Real time generated email template
<textarea class="form-control" rows="5" id="result" name="text"></textarea>

Комментарии:

1. Это работает! Большое вам спасибо, вы экономите мое время на исследованиях, хехехе 🙂

Ответ №3:

Вы должны использовать = , чтобы сохранить предыдущий текст элемента.

Изменить

 document.getElementById('result').innerHTML = y;

Для

 document.getElementById('result').innerHTML  = y;

Кроме того, я предложу вам использовать textContent или innerText , если текст не содержит HTML.

 var radios = document.querySelectorAll('input[name=gender]');
radios.forEach(function(r){
  r.addEventListener('change', function(){
    var gender = document.querySelector('input[name = gender]:checked').value;
    document.getElementById('result').textContent = 'Dear '  gender;
  });
});


function myInput(){
  var y = document.getElementById('textarea').value;
  document.getElementById('result').textContent  = y;  
}  
 <p>Select Email templates below</p>
<form id="mainForm" name="mainForm">
  <input type="radio" name="gender" value="Mr."/>Mr.
  <input type="radio" name="gender" value="Mrs." />Mrs.
</form>
<br>

<textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea>

Real time generated email template
<textarea class="form-control" rows="5" id="result" name="text"></textarea>