Lassen Sie Daten in einen bestimmten Textbereich schreiben

Question

Ich muss einen Bericht aus verschiedenen Informationen in einem Formular erstellen.

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

<input type="checkbox" class="sostanzeCheck" value="Cocaina" name="sostanza[]" onchange="collectSostanze()"/ ><span class="testoBianco"> Kokain </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"> Marihuana </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"> Stinktier </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;
    }

Jetzt stoße ich auf ein Problem, das nicht erfasst, was ich in diese Textbereiche eingebe:

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

Die Werte ändern sich in Echtzeit und ich möchte den folgenden Bericht erstellen:

„Ich bin zufrieden mit meinem Erfolg und meinem Erfolg mit „SUBSTANCE_NAME“ mit THC-Gleichgewicht von „FIRST TEXTAREA'S VALUE%“ und „SECOND TEXTAREA'S VALUE%“ sowie „SECOND TEXTAREA'S VALUE“, da ich die Möglichkeit habe, etwa „THIRD“ zu erhalten TEXTAREA'S VALUE" dosi medie singole".

Der Bericht muss wie folgt einem anderen Textbereich hinzugefügt werden:

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

Natürlich muss ich basierend auf den von mir ausgewählten Stoffen verschiedene Berichte erstellen und diese einzeln anhängen.

Ich verwende das Laravel-Framework und Skripte mit JS.

Vielen Dank.

Answer 1

您可以在表单上监听keyup事件。每当用户在文本区域中输入内容时，该事件将发生。然后将整个（模板）字符串插入到报告文本区域的值中。

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>