Get data written in certain text area

Question

I have to generate a report from different information in a form.

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

<input type="checkbox"  class="sostanzeCheck" value="Cocaina" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Cocaina </span><br>
<input type="checkbox"  class="sostanzeCheck" value="Crack" name="sostanza[]" onchange="collectSostanze()"/><span class="testoBianco"> Crack </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"> Skunk </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 checkboxes = document.querySelectorAll('.sostanzeCheck:checked');

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

     return selectedSostanze;
    }

Now, I'm running into a problem that doesn't collect what I type in these text areas:

<div id="bloccoAnalisi" style="display: none;">
    <label>Percentuale di Principio Psicoattivo</label><br>
    <textarea rows="3" cols="80" class="textarea" name="psicoattivo" id="psicoattivo_text" ></textarea><br>
    <label>Grammi</label><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>

The values ​​change in real time and what I want to achieve is to generate the following report:

"I am satisfied with my success and my success with "SUBSTANCE_NAME" with THC pari al "FIRST TEXTAREA'S VALUE%" and "SECOND TEXTAREA'S VALUE%" per complessi "SECOND TEXTAREA'S VALUE" da cui era possibile ricavare circa "THIRD TEXTAREA'S VALUE" dosi medie singole".

The report must be added to another text area like this:

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

Of course, I have to generate different reports based on the substances I choose and append them together one by one.

I am using Laravel framework and scripting using JS.

Thank you.

Answer 1

You can listen to the keyup event on the form. This event will occur whenever the user types in the text area. The entire (template) string is then inserted into the value of the report text area.

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>