Laravel+JS数据填充异常：仅Selected Key可正常填充

问题根源 #

你的按钮通过内联onclick传递参数时，若physical_value或online_value包含单引号、换行、斜杠等特殊字符，会直接破坏JavaScript的字符串语法结构，导致参数传递截断，最终只有第一个参数selectedKey能正常生效。

解决方案 #

方案1：使用Blade转义函数确保参数安全

修改按钮的onclick代码，用Blade内置的e()函数对每个参数进行转义，避免特殊字符破坏JS字符串：

<button type="button" class="btn btn-secondary utilization-button"
        onclick="populateUtilization('{{ e($utilization->key) }}', '{{ e($utilization->physical_value) }}', '{{ e($utilization->online_value) }}')">
  {{ $utilization->key }}
</button>

e()函数会将特殊字符转义为HTML实体，同时保证JS字符串的语法正确性。

方案2：改用数据属性（更推荐，彻底避免字符串拼接问题）

1. 给按钮添加data-*属性存储对应值，移除内联onclick：

<button type="button" class="btn btn-secondary utilization-button"
        data-key="{{ $utilization->key }}"
        data-physical="{{ $utilization->physical_value }}"
        data-online="{{ $utilization->online_value }}">
  {{ $utilization->key }}
</button>

2. 修改JavaScript代码，通过事件对象读取数据属性：

// 为所有按钮绑定点击事件
document.querySelectorAll('.utilization-button').forEach(btn => {
  btn.addEventListener('click', function() {
    const selectedKey = this.dataset.key;
    const physicalValue = this.dataset.physical;
    const onlineValue = this.dataset.online;

    document.getElementById('selectedKey').value = selectedKey;
    document.getElementById('physicalValue').value = physicalValue;
    document.getElementById('onlineValue').value = onlineValue;

    console.log('After setting values - Selected Key:', selectedKey);
    console.log('After setting values - Physical Value:', physicalValue);
    console.log('After setting values - Online Value:', onlineValue);
  });
});

这种方式完全规避了内联JS的字符串拼接风险，代码更安全、易维护。

验证步骤 #

1. 方案1修改后，查看页面源代码确认按钮onclick属性中的参数已被正确转义
2. 方案2修改后，确保原内联onclick已移除，刷新页面后测试按钮功能
3. 点击按钮后打开浏览器控制台，确认三个参数均正常输出

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