How to print my radio buttons and input type text in my textarea?

40
October 22, 2019, at 2:30 PM

I have questionnaire with four radio buttons and one input type text. Print in sequence without deleting the previous one.

var todos = $('input[type="radio"]'); 
  $(todos).on('click',() =>{ 
    var newText = ''; 
    Array.from(todos).forEach( 
      function(element) { 
        if(element.checked) 
          newText+=element.value 
      }); 
    $('#notem').val(newText); 
  });
FUTBOL 
<br> 
SI<input type="radio" name="futbol" id="r1" value='SI PRATICARIA FUTBOL, '> 
NO<input type="radio" name="futbol" id="r2" value='NO PRACTICARIA FUTBOL, '> 
<br><br> 
NATACION 
<br> 
SI<input type="radio" name="natacion" id="r3" value='SI PRATICARIA NATACION, '> 
NO<input type="radio" name="natacion" id="r4" value='NO PRATICARIA NATACION, '> 
<br><br> 
CICLISMO 
<br> 
SI<input type="radio" name="ciclismo" id="r5" value='SI PRACTICARIA CICLISMO, '> 
NO<input type="radio" name="ciclismo" id="r6" value='NO PRACTICARIA CICLISMO, '> 
<br><br> 
LE GUSTARIA PRATICAR OTRO DEPORTE 
<br> 
SI<input type="radio" name="otrod" id="r7" value='SI PRACTICARIA OTRO'> 
NO<input type="radio" name="otrod" id="r8" value='NO PRACTICARIA OTRO'> 
<br> 
CUAL? 
<br> 
<input type="text" name="cual" id="" value=""><br><br> 
<textarea id="notem" readonly style="width:170px; height:130px;"></textarea> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1
var todos = $('input[type="radio"]');
  $(todos).on('click',() =>{
    var newText = '';
    Array.from(todos).forEach(
      function(element) {
        if(element.checked)
          newText+=element.value
      });
    $('#notem').val(newText);
  });
  $('#notem').val($('#notem').val() + $('input[name="cual"]').val());

This should help!

Answer 2

You have to bind event for both radio button and text field. I think below code will help you.

var todos = $('input[type="radio"]'); 
      $(todos).on('click',() =>{ 
        generateText(); 
      }); 
       
       
      $('#cual').keyup(function() { 
        generateText(); 
      }); 
       
      function generateText () { 
        var newText = ''; 
        Array.from(todos).forEach( 
          function(element) { 
            if(element.checked) 
              newText+=element.value 
          }); 
        $('#notem').val(newText +  '\n' + $('#cual').val()); 
      }
    FUTBOL 
    <br> 
    SI<input type="radio" name="futbol" id="r1" value='SI PRATICARIA FUTBOL, '> 
    NO<input type="radio" name="futbol" id="r2" value='NO PRACTICARIA FUTBOL, '> 
    <br><br> 
    NATACION 
    <br> 
    SI<input type="radio" name="natacion" id="r3" value='SI PRATICARIA NATACION, '> 
    NO<input type="radio" name="natacion" id="r4" value='NO PRATICARIA NATACION, '> 
    <br><br> 
    CICLISMO 
    <br> 
    SI<input type="radio" name="ciclismo" id="r5" value='SI PRACTICARIA CICLISMO, '> 
    NO<input type="radio" name="ciclismo" id="r6" value='NO PRACTICARIA CICLISMO, '> 
    <br><br> 
    LE GUSTARIA PRATICAR OTRO DEPORTE 
    <br> 
    SI<input type="radio" name="otrod" id="r7" value='SI PRACTICARIA OTRO'> 
    NO<input type="radio" name="otrod" id="r8" value='NO PRACTICARIA OTRO'> 
    <br> 
    CUAL? 
    <br> 
    <input type="text" name="cual" id="cual" value=""><br><br> 
    <textarea id="notem" readonly style="width:170px; height:130px;"></textarea> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Don't hesitate to let me know if you have any query.

READ ALSO
Same bot on multiple page [on hold]

Same bot on multiple page [on hold]

I have created a chatbot on my website and what I want to do is, if I already had some chats with my chatbot and then I navigate to different pages on my website then chatbot should remember the chats and show all the contents in the chatbot in the navigated...

23
Get top/left coordinates of element being dragged (not pointer)

Get top/left coordinates of element being dragged (not pointer)

I have this jQuery UI draggable element:

25
How to verify if a certain value is present in a custom attribute using javascript or jquery?

How to verify if a certain value is present in a custom attribute using javascript or jquery?

Lets say we have a custom attribute named data-contentNow lets look for the html markup :

41
How to get element from innerHTML?

How to get element from innerHTML?

I am trying to access element from another element's innerHTMLI have this element:

38