0

Gostaria de enviar (colar) o que esta no value do radio escolhido para a textarea, ao clicar.

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

3 Respostas 3

1

Você pode fazer uma função que modifica a textarea, que recebe um item como valor. A partir disso, você implementa um evento de click em cada item, indicando pra essa função, passando pra ela this.value. Por exemplo:

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>

É isso, espero ter ajudado.

0

Olá, quando ele clicar no lugar que você quer você chama essa função, passando como parâmetro o que você quer copiar.

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();
}
0

Primeira coisa que deve fazer é obter a referência dos elementos que vai trabalhar.
Dentro do para obter-se a referência de objetos cujo os atributos ids estão definidos pode ser usado document.getElementById() que retorna a referência do elemento através do seu atributo ID.

O próximo passo é definir um manipulador de eventos que será o responsável por a cada click dum botão de rádio enviar o valor do atributo value do elemento, cujo evento foi disparado, para o <textarea> utilizando para isso sua propriedade Node.innerText que será preenchida pela propriedade Event.target que é a referência ao objeto que enviou o evento.

E finalmente instalam-se os evento nos respectivos elemento usando Element.addEventListener() que registra uma espera de evento em um elemento.

Para iniciar o código com o <textarea> devidamente preenchido foi simulado um click através do método EventTarget.dispatchEvent() usando um 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .