How To Print My Radio Buttons And Input Type Text In My Textarea?

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

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

Solution 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();
      });
      
      functiongenerateText () {
        var newText = '';
        Array.from(todos).forEach(
          function(element) {
            if(element.checked)
              newText+=element.value
          });
        $('#notem').val(newText +  '\n' + $('#cual').val());
      }

    FUTBOL
    <br>
    SI<inputtype="radio"name="futbol"id="r1"value='SI PRATICARIA FUTBOL, '>
    NO<inputtype="radio"name="futbol"id="r2"value='NO PRACTICARIA FUTBOL, '><br><br>
    NATACION
    <br>
    SI<inputtype="radio"name="natacion"id="r3"value='SI PRATICARIA NATACION, '>
    NO<inputtype="radio"name="natacion"id="r4"value='NO PRATICARIA NATACION, '><br><br>
    CICLISMO
    <br>
    SI<inputtype="radio"name="ciclismo"id="r5"value='SI PRACTICARIA CICLISMO, '>
    NO<inputtype="radio"name="ciclismo"id="r6"value='NO PRACTICARIA CICLISMO, '><br><br>
    LE GUSTARIA PRATICAR OTRO DEPORTE
    <br>
    SI<inputtype="radio"name="otrod"id="r7"value='SI PRACTICARIA OTRO'>
    NO<inputtype="radio"name="otrod"id="r8"value='NO PRACTICARIA OTRO'><br>
    CUAL?
    <br><inputtype="text"name="cual"id="cual"value=""><br><br><textareaid="notem"readonlystyle="width:170px; height:130px;"></textarea><scriptsrc="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.