Insert Checkbox values into a Textarea

Question

I’m making a page that assists Monitoring Operators (Load Monitoring), and I need to insert multiple forms on the same page. Take the example of one of them:

//Array que guarda a ordem em que os elementos foram inseridos
var listCheckedOptions = [];

function addToList(checkObj, outputObjID)
{
//Remove do array caso o elemento já esteja inserido
if (listCheckedOptions.indexOf(checkObj.value) >= 0) {
listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj.value), 1);
} else { //Adiciona caso já esteja inserido
listCheckedOptions.push(checkObj.value);
}

//        alert(listCheckedOptions); //debug para verificar os elementos inseridos
document.getElementById(outputObjID).value = ""; //Limpa o textarea
document.getElementById(outputObjID).value = listCheckedOptions.join('\r\n'); //Adiciona no textarea

return;
}

function copiarTextotxt1() {
var textoCopiado = document.getElementById("txt1");
textoCopiado.select();
document.execCommand("Copy");
alert("Texto Copiado: " + textoCopiado.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form001">

<input type="checkbox" name="cabecalho[]" id="cabecalho" value="Informamos que o motorista não está cumprindo o procedimento correto pois o mesmo: &#10;" onClick="addToList(this, 'txt1')"><label for="cabecalho"> Cabeçalho</label></p>

</br>

<input type="checkbox" name="opcao1[]" id="opcao1" value="(X) Não informa início de viagem."  onClick="addToList(this, 'txt1')"><label for="opcao1"> Não informa início de viagem</label></p>
      
<input type="checkbox" name="opcao2[]" id="opcao2" value="(X) Não informa paradas."  onClick="addToList(this, 'txt1')"><label for="opcao2"> Não informa paradas</label></p>

<input type="checkbox" name="opcao5[]" id="opcao5" value="(X) Não informa reinício de viagem."  onClick="addToList(this, 'txt1')"><label for="opcao5"> Não informa reinício de viagem</label></p>

</br>

<input type="checkbox" name="rodape[]" id="rodape" value="&#10;Solicitamos que o motorista seja orientado blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá..."  onClick="addToList(this, 'txt1')"><label for="rodape"> Rodapé</label>

</form>

</br>

<textarea rows="10" cols="100" name="txt1" id="txt1" placeholder="Instruções de uso:&#10;&#10;1° - Selecione a opção 'Cabeçalho'.&#10;2° - Selecione o(s) procedimento(s) incorreto(s) do motorista.&#10;3° - Selecione a opção 'Rodapé'.&#10;4° - Clique no botão 'Copiar Texto'.   " style="color:#000000"  readonly></textarea>

</br>

<button onClick="copiarTextotxt1()">Copiar Texto</button>

The code to enter the values as they are checked, I found right here (Add elements to a textarea in checkbox order).

But the problem is that when I create a new form within the same page, the forms conflict.

I need a code that lets you take the form data with id=x and insert it into the textarea with id=y, you know?

Or any other solution is welcome, as long as I can insert multiple forms on the same page without conflict.

Grateful from now on.

Answer 1

The problem occurs because the function addToList always modifies the same array and function copiarTextotxt always copy text from the same textarea.

To solve You make the functions generic, so that they accept modifications in any array or textarea. as follows:

The function "addToList" now receives an additional parameter, the list of marked options which you intend to modify(ex a listCheckedOptions). You must create an array for each form you use, in the case I created the listCheckedOptions and listCheckedOptions2

the function "copiarTextotxt" now also receives the id of the textarea which you intend to copy the text.

add these new parameters to the onClick property in the checkboxes and the "Copy text" button of each form and voila.

Here’s an example with 2 Forms:

//Array que guarda a ordem em que os elementos foram inseridos
var listCheckedOptions = [];
var listCheckedOptions2 = [];

function addToList(checkObj, outputObjID,list)
{
//Remove do array caso o elemento já esteja inserido
if (list.indexOf(checkObj.value) >= 0) {
list.splice(list.indexOf(checkObj.value), 1);
} else { //Adiciona caso já esteja inserido
list.push(checkObj.value);
}

//        alert(list); //debug para verificar os elementos inseridos
document.getElementById(outputObjID).value = ""; //Limpa o textarea
document.getElementById(outputObjID).value = list.join('\r\n'); //Adiciona no textarea

return;
}

function copiarTextotxt(id) {
var textoCopiado = document.getElementById(id);
textoCopiado.select();
document.execCommand("Copy");
alert("Texto Copiado: " + textoCopiado.value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form001">

<input type="checkbox" name="cabecalho[]" id="cabecalho" value="Informamos que o motorista não está cumprindo o procedimento correto pois o mesmo: &#10;" onClick="addToList(this, 'txt1',listCheckedOptions)"><label for="cabecalho"> Cabeçalho</label></p>

</br>

<input type="checkbox" name="opcao1[]" id="opcao1" value="(X) Não informa início de viagem."  onClick="addToList(this, 'txt1',listCheckedOptions)"><label for="opcao1"> Não informa início de viagem</label></p>
  
<input type="checkbox" name="opcao2[]" id="opcao2" value="(X) Não informa paradas."  onClick="addToList(this, 'txt1',listCheckedOptions)"><label for="opcao2"> Não informa paradas</label></p>

<input type="checkbox" name="opcao5[]" id="opcao5" value="(X) Não informa reinício de viagem."  onClick="addToList(this, 'txt1',listCheckedOptions)"><label for="opcao5"> Não informa reinício de viagem</label></p>

</br>

<input type="checkbox" name="rodape[]" id="rodape" value="&#10;Solicitamos que o motorista seja orientado blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá..."  onClick="addToList(this, 'txt1', listCheckedOptions)"><label for="rodape"> Rodapé</label>

</form>

</br>

<textarea rows="10" cols="100" name="txt1" id="txt1" placeholder="Instruções de uso:&#10;&#10;1° - Selecione a opção 'Cabeçalho'.&#10;2° - Selecione o(s) procedimento(s) incorreto(s) do motorista.&#10;3° - Selecione a opção 'Rodapé'.&#10;4° - Clique no botão 'Copiar Texto'.   " style="color:#000000"  readonly></textarea>

</br>

<button onClick="copiarTextotxt('txt1')">Copiar Texto</button>
<form name="form001">

<input type="checkbox" name="cabecalho[]" id="cabecalho" value="Informamos que o motorista não está cumprindo o procedimento correto pois o mesmo: &#10;" onClick="addToList(this, 'txt2', listCheckedOptions2)"><label for="cabecalho"> Cabeçalho</label></p>

</br>

<input type="checkbox" name="opcao1[]" id="opcao1" value="(X) Não informa início de viagem."  onClick="addToList(this, 'txt2', listCheckedOptions2)"><label for="opcao1"> Não informa início de viagem</label></p>
      
<input type="checkbox" name="opcao2[]" id="opcao2" value="(X) Não informa paradas."  onClick="addToList(this, 'txt2', listCheckedOptions2)"><label for="opcao2"> Não informa paradas</label></p>

<input type="checkbox" name="opcao5[]" id="opcao5" value="(X) Não informa reinício de viagem."  onClick="addToList(this, 'txt2', listCheckedOptions2)"><label for="opcao5"> Não informa reinício de viagem</label></p>

</br>

<input type="checkbox" name="rodape[]" id="rodape" value="&#10;Solicitamos que o motorista seja orientado blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá blá..."  onClick="addToList(this, 'txt2', listCheckedOptions2)"><label for="rodape"> Rodapé</label>

</form>

</br>

<textarea rows="10" cols="100" name="txt2" id="txt2" placeholder="Instruções de uso:&#10;&#10;1° - Selecione a opção 'Cabeçalho'.&#10;2° - Selecione o(s) procedimento(s) incorreto(s) do motorista.&#10;3° - Selecione a opção 'Rodapé'.&#10;4° - Clique no botão 'Copiar Texto'.   " style="color:#000000"  readonly></textarea>

</br>

<button onClick="copiarTextotxt('txt2')">Copiar Texto</button>