Obtenir des données écrites dans certaines zones de texte

Question

Je dois générer un rapport à partir de différentes informations dans un formulaire.

首先，我必须从这里选择一种物质：

<input type="checkbox" class="sostanzeCheck" value="Cocaina" name="sostanza[]" onchange="collectSostanze()"/ ><span class="testoBianco"> Cocaïne </span><br>
<input type="checkbox" class="sostanzeCheck" value="Crack" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Fissure </span><br>
<input type="checkbox" class="sostanzeCheck" value="Marijuana" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Marijuana </span><br>
<input type="checkbox" class="sostanzeCheck" value="Cannabis" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Cannabis </span><br>
<input type="checkbox" class="sostanzeCheck" value="Eroina" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Eroina </span><br>
<input type="checkbox" class="sostanzeCheck" value="Skunk" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Mouffette </span><br>
<input type="checkbox" class="sostanzeCheck" value="Sintetiche" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Sintetiche </span><br><br>

>

function collectSostanze(){
      const selectedSostanze = [];
      const cases à cocher = document.querySelectorAll('.sostanzeCheck:checked');

      checkboxes.forEach(checkbox => {
        selectedSostanze.push(checkbox.value);
        console.log("Sostanza: ", selectedSostanze);
      });

     renvoie la sélection Sostanze ;
    }≪/pré>
<p>Maintenant, je rencontre un problème qui ne collecte pas ce que je tape dans ces zones de texte : </p>
<pre class="brush:php;toolbar:false;"><div id="bloccoAnalisi" style="display: none;">
    <label>Pourcentage de principes psychoactifs</label><br>
    <textarea rows="3" cols="80" class="textarea" name="psicoattivo" id="psicoattivo_text" ></textarea><br>
    <étiquette>Grammi</étiquette><br>
    <textarea rows="3" cols="80" class="textarea" name="grammi" id="grammi_text" ></textarea>
    <label>Dosi Medie Singole</label><br>
    <textarea rows="3" cols="80" class="textarea" name="dosi" id="dosi_text" ></textarea>
 </div><br>

Les valeurs changent en temps réel et ce que je souhaite réaliser est de générer le rapport suivant :

"Je suis satisfait de mon succès et de mon succès avec "SUBSTANCE_NAME" avec THC pari al "FIRST TEXTAREA'S VALUE%" et "SECOND TEXTAREA'S VALUE%" pour la composition "SECOND TEXTAREA'S VALUE" da cui era possibile ricavare circa "THIRD TEXTAREA'S VALUE" dosi medie single".

Le rapport doit être ajouté à une autre zone de texte comme ceci :

<div id="paragrafiRicostruzione" class="paragrafoFields">
      <h3>Ricostruzione del Fatto</h3>
      <textarea rows="3" cols="80" class="textarea" id="reportTextArea" name="report"></textarea>
</div>

Bien sûr, je dois générer différents rapports en fonction des substances que je sélectionne et les joindre une par une.

J'utilise le framework Laravel et des scripts utilisant JS.

Merci.

Answer 1

Vous pouvez écouter l'événement keyup sur le formulaire. Cet événement se produira chaque fois que l'utilisateur tape dans la zone de texte. La chaîne entière (modèle) est ensuite insérée dans la valeur de la zone de texte du rapport.

document.forms.form01.addEventListener('keyup', e => {
  let form = e.target.form;
  form.report.value = `I successivi accertamenti tossico-chimici evidenziavano che si trattava di "SUBSTANCE_NAME" con una percentuale media di THC pari al "${form.psicoattivo.value}" e il "${form.psicoattivo.value}" per complessi "${form.grammi.value}" grammi sequestrati da cui era possibile ricavare circa "${form.dosi.value}" dosi medie singole`;
});

form>div {
  display: flex;
  flex-direction: column;
}

<form name="form01">
  <div id="bloccoAnalisi">
    <label>Percentuale di Principio Psicoattivo<br>
    <textarea rows="3" cols="80" class="textarea" name="psicoattivo"></textarea></label>
    <label>Grammi<br>
    <textarea rows="3" cols="80" class="textarea" name="grammi"></textarea></label>
    <label>Dosi Medie Singole<br>
    <textarea rows="3" cols="80" class="textarea" name="dosi"></textarea>
    </label>
  </div>
  <div id="paragrafiRicostruzione" class="paragrafoFields">
    <label><h3>Ricostruzione del Fatto</h3>
    <textarea rows="3" cols="80" class="textarea" name="report"></textarea></label>
  </div>
</form>