基于Laravel+JS实现表单多选物质与文本域内容生成报告

需求说明 #

需要实现以下功能：

• 从多选框选中物质后，结合三个textarea的实时输入内容，生成对应份数的报告（选中n种物质就生成n份）
• 将报告实时追加到指定的<textarea>中

现有代码情况 #

物质选择多选框 #

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

需要收集内容的三个textarea #

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

报告目标textarea #

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

报告格式要求 #

"I successivi accertamenti tossico-chimici evidenziavano che si trattava di "SUBSTANCE_NAME" con una percentuale media di THC pari al "FIRST TEXTAREA'S VALUE%" e il "FIRST TEXTAREA'S VALUE%" per complessi "SECOND TEXTAREA'S VALUE" grammi sequestrati da cui era possibile ricavare circa "THIRD TEXTAREA'S VALUE" dosi medie singole"

解决方案代码 #

以下是完整的JavaScript实现，支持实时更新报告：

// 获取DOM元素
const reportTextArea = document.getElementById('reportTextArea');
const psicoattivoText = document.getElementById('psicoattivo_text');
const grammiText = document.getElementById('grammi_text');
const dosiText = document.getElementById('dosi_text');
const sostanzeCheckboxes = document.querySelectorAll('.sostanzeCheck');

// 生成单份报告的核心函数
function generateReport(substance) {
    const psicoattivo = psicoattivoText.value.trim() || '0';
    const grammi = grammiText.value.trim() || '0';
    const dosi = dosiText.value.trim() || '0';
    return `I successivi accertamenti tossico-chimici evidenziavano che si trattava di "${substance}" con una percentuale media di THC pari al "${psicoattivo}%" e il "${psicoattivo}%" per complessi "${grammi}" grammi sequestrati da cui era possibile ricavare circa "${dosi}" dosi medie singole\n`;
}

// 更新完整报告的函数
function updateReport() {
    const selectedSostanze = collectSostanze();
    let fullReport = '';
    // 为每个选中的物质生成对应报告
    selectedSostanze.forEach(substance => {
        fullReport += generateReport(substance);
    });
    // 将拼接后的报告写入目标textarea
    reportTextArea.value = fullReport;
}

// 为所有触发源绑定事件，确保实时更新
sostanzeCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', updateReport);
});

psicoattivoText.addEventListener('input', updateReport);
grammiText.addEventListener('input', updateReport);
dosiText.addEventListener('input', updateReport);

// 优化原有收集函数，调整日志打印时机
function collectSostanze(){
    const selectedSostanze = [];
    const checkboxes = document.querySelectorAll('.sostanzeCheck:checked');

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

代码说明 #

1. 元素预获取：提前获取所有需要操作的DOM元素，避免重复查询DOM提升性能
2. 单报告生成：generateReport函数根据单个物质和三个输入框的值生成格式正确的报告文本，为空时默认填充'0'避免内容缺失
3. 全报告更新：updateReport函数收集选中物质，循环生成每份报告并拼接，最后更新到目标textarea
4. 事件绑定：给多选框绑定change事件，给三个输入textarea绑定input事件，确保任何内容变化都能实时触发报告更新
5. 函数优化：调整原有collectSostanze的日志打印位置，避免多次重复打印，仅在收集完成后打印一次选中物质列表

内容的提问来源于stack exchange，提问作者ElAzazel