Dapatkan data yang ditulis dalam kawasan teks tertentu

Question

Saya perlu menjana laporan daripada maklumat yang berbeza dalam bentuk.

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

<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"> Retak </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"> Ganja </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"> Sintetik </span><br><br></pra>
<p>我已经写了一个函数，它会将我选择的内容打印到控制台，以验证是台，以验证是否，以验证是否，以验证是否t;
<pre class="brush:php;toolbar:false;">function collectSostanze(){
      const selectedSostanze = [];
      kotak semak const = document.querySelectorAll('.sostanzeCheck:checked');

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

     kembali terpilihSostanze;
    }</pra>
<p>Sekarang, saya menghadapi masalah yang tidak mengumpul apa yang saya taip dalam kawasan teks ini: </p>
<pre class="brush:php;toolbar:false;"><div id="bloccoAnalisi" style="display: none;">
    <label>Peratusan 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 Single</label><br>
    <textarea rows="3" cols="80" class="textarea" name="dosi" id="dosi_text" ></textarea>
 </div><br></pra>
<p>Nilai berubah dalam masa nyata dan apa yang saya ingin capai ialah menjana laporan berikut: </p>
<p>"Saya berpuas hati dengan kejayaan saya dan kejayaan saya dengan "SUBSTANCE_NAME" dengan THC pari al "NILAI TEXTAREA PERTAMA%" dan "NILAI% TEXTAREA KEDUA" setiap kompleksi "NILAI TEXTAREA KEDUA" dalam era cui yang mungkin berlaku sekitar "THIRD NILAI TEXTAREA" dosi medie single".</p>
<p>Laporan mesti ditambah ke kawasan teks lain seperti ini: </p>
<pre class="brush:php;toolbar:false;"><div id="paragrafiRicostruzione" class="paragrafoFields">
      <h3>Ricostruzione del Fatto</h3>
      <textarea rows="3" cols="80" class="textarea" id="reportTextArea" name="report"></textarea>
</div>

Sudah tentu, saya perlu menjana laporan yang berbeza berdasarkan bahan yang saya pilih dan menggabungkannya satu demi satu.

Saya menggunakan rangka kerja Laravel dan skrip menggunakan JS.

Terima kasih.

Answer 1

Anda boleh mendengar acara keyup pada borang. Peristiwa ini akan berlaku apabila pengguna menaip dalam kawasan teks. Seluruh rentetan (template) kemudiannya dimasukkan ke dalam nilai kawasan teks laporan.

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>