Copy radio value to textarea

Question

I would like to send (paste) what is in the value of the radio chosen for the textarea, by clicking.

<div class="form-group col-xs-12">

  <div class="form-group">
    <div class="radio">
      <label>
           <input type="radio" name="status" id="optionsRadios1"  value='Sem contato' checked>
           <span style="color: red">Sem contato</span>
      </label>
    </div>
    <div class="radio">
      <label>
            <input type="radio" name="status" id="optionsRadios2" value='Pendente'>
             <span style="color: #E9D62B">Pendente</span>
      </label>
    </div>
    <div class="radio">
      <label>
             <input type="radio" name="status" id="optionsRadios3" value='Com contato'>
             <span style="color: green">Com contato</span>
      </label>
    </div>
  </div>

  <textarea name="msg" required class="form-control" id="msg" placeholder="Descreva como foi o atendimento"></textarea>
</div>

Answer 1

You can make a function that modifies the textarea, that receives an item as a value. From this, you implement a click event on each item, indicating to this function, passing to it this.value. For example:

function sendItem(item){

  document.querySelector('#msg').placeholder = `${item}. Descreva como foi o atendimento`
}

<div class="form-group col-xs-12">

  <div class="form-group">
    <div class="radio">
      <label>
           <input type="radio" name="status" id="optionsRadios1"  value='Sem contato' onclick="sendItem(this.value)" checked>
           <span style="color: red">Sem contato</span>
      </label>
    </div>
    <div class="radio">
      <label>
            <input type="radio" name="status" id="optionsRadios2" value='Pendente' onclick="sendItem(this.value)">
             <span style="color: #E9D62B">Pendente</span>
      </label>
    </div>
    <div class="radio">
      <label>
             <input type="radio" name="status" id="optionsRadios3" value='Com contato' onclick="sendItem(this.value)">
             <span style="color: green">Com contato</span>
      </label>
    </div>
  </div>

  <textarea name="msg" required class="form-control" id="msg" placeholder="Descreva como foi o atendimento"></textarea>
</div>

That’s it, I hope I helped.

Answer 2

Hello, when it click on the place you want you call this function, passing as parameter what you want to copy.

copyInputMessage(toCopy) {
    var textarea = document.createElement("textarea");

    textarea.style.position = "fixed";
    textarea.style.opacity = "0";

    textarea.value =
      window.location.origin +
      "#/equipes?linkcompartilhado=" +
      encodeURIComponent(btoa(toCopy)); // codificar o id do time
    document.body.append(textarea);
    textarea.select();

    try {
      var successful = document.execCommand("copy");
      if (!successful) throw successful;
    } catch (err) {
      window.prompt("Copiar: Ctrl+C, Enter", toCopy);
    }

    textarea.remove();
}

Answer 3

First thing you should do is get the reference of the elements that will work.
Within the javascript to obtain the object reference html whose attributes ids are defined can be used document.getElementById() which returns the element reference through its attribute ID.

The next step is to define a event handler who will be responsible for each click of a radio button send the value of the element attribute, whose event was triggered, to the <textarea> using your property to do so Node.innerText which will be filled by the property Event.target which is the reference to the object that sent the event.

And finally the events are installed in the respective element using Element.addEventListener() that records an event wait in an element.

To start the code with the <textarea> properly filled was simulated a click through the method EventTarget.dispatchEvent() using a MouseEvent

//Cria as referências aos elementos HTML usádos no código.
let msg = document.getElementById("msg");
let rad1 = document.getElementById("optionsRadios1");
let rad2 = document.getElementById("optionsRadios2");
let rad3 = document.getElementById("optionsRadios3");

//Define a função cujo a finalidade é manipular os eventos click  
function radioClick(e){
   //Substitui o texto de msg pelo conteúdo do atributo value do elemento que gerou o evento.
   msg.innerText = e.target.value;
}

//Instala o evento click para o handler radioClick em cada um dos radio buttons.
rad1.addEventListener(`click`, radioClick);
rad2.addEventListener(`click`, radioClick);
rad3.addEventListener(`click`, radioClick);

//Envia um click para rad1.
rad1.dispatchEvent(new MouseEvent('click'));

<div class="form-group col-xs-12">

  <div class="form-group">
    <div class="radio">
      <label>
           <input type="radio" name="status" id="optionsRadios1"  value='Sem contato' checked>
           <span style="color: red">Sem contato</span>
      </label>
    </div>
    <div class="radio">
      <label>
            <input type="radio" name="status" id="optionsRadios2" value='Pendente'>
             <span style="color: #E9D62B">Pendente</span>
      </label>
    </div>
    <div class="radio">
      <label>
             <input type="radio" name="status" id="optionsRadios3" value='Com contato'>
             <span style="color: green">Com contato</span>
      </label>
    </div>
  </div>

  <textarea name="msg" required class="form-control" id="msg" placeholder="Descreva como foi o atendimento"></textarea>
</div>