表单onsubmit事件失效问题：echo输出的表单无法触发onsubmit函数

我来帮你排查这个onsubmit失效的问题——核心原因是你PHP输出的JavaScript代码里，字符串拼接出了语法错误，导致confirm对话框根本没被正确执行，表单自然直接提交了。

你当前的PHP输出代码里，confirm("do you want to delete " + {$array[0][1]} + " " +{$array[0][3]});这部分存在关键问题：

• 如果{$array[0][1]}和{$array[0][3]}是字符串类型的值（比如用户名、标题这类文本），输出到前端后，JS会把它们当成未定义的变量，而不是字符串。比如假设{$array[0][1]}的值是"John"，输出后的JS代码会变成：confirm("do you want to delete " + John + " " + Doe);——这里John和Doe没有引号包裹，JS会认为是变量，找不到就会报错，整个onsubmit逻辑直接崩溃，表单默认行为（提交）就会触发。
• 就算是数字类型，遇到特殊字符（比如空格、引号）也会触发语法错误，导致confirm无法执行。

给PHP输出的数组值加上引号，把它们转成合法的JS字符串，同时建议用htmlspecialchars转义特殊字符，避免XSS攻击和语法破坏：

// 先转义特殊字符，确保输出到JS里不会出错
$itemInfo1 = htmlspecialchars($array[0][1], ENT_QUOTES);
$itemInfo3 = htmlspecialchars($array[0][3], ENT_QUOTES);

// 输出表单，把转义后的值用引号包裹
echo "<form method='post' action='' onsubmit='return confirm(\"do you want to delete \" + \"{$itemInfo1}\" + \" \" + \"{$itemInfo3}\");'> 
<input type='submit' name='delete' value='Delete'> 
</form>";

或者更简洁的写法，直接把变量嵌入到confirm的字符串里：

$itemInfo1 = htmlspecialchars($array[0][1], ENT_QUOTES);
$itemInfo3 = htmlspecialchars($array[0][3], ENT_QUOTES);
echo "<form method='post' action='' onsubmit='return confirm(\"do you want to delete {$itemInfo1} {$itemInfo3}\");'> 
<input type='submit' name='delete' value='Delete'> 
</form>";

如果你想用外部JS文件，不要直接在onsubmit里拼接逻辑，而是通过自定义属性传递参数，再绑定事件：

1. PHP输出表单时，给表单添加自定义属性存储要删除的内容：

$itemInfo1 = htmlspecialchars($array[0][1], ENT_QUOTES);
$itemInfo3 = htmlspecialchars($array[0][3], ENT_QUOTES);
echo "<form method='post' action='' class='delete-form' data-info1='{$itemInfo1}' data-info3='{$itemInfo3}'> 
<input type='submit' name='delete' value='Delete'> 
</form>";

2. 外部JS文件里绑定提交事件：

// 等待页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 找到所有删除表单
  const deleteForms = document.querySelectorAll('.delete-form');
  deleteForms.forEach(form => {
    form.addEventListener('submit', function(e) {
      // 从自定义属性里获取内容
      const info1 = this.dataset.info1;
      const info3 = this.dataset.info3;
      // 弹出确认框，点击取消就阻止表单提交
      if (!confirm(`do you want to delete ${info1} ${info3}`)) {
        e.preventDefault();
      }
    });
  });
});

这种方式更符合现代JS开发规范，也避免了内联事件的语法陷阱，同时更安全。

修复后，打开浏览器开发者工具（按F12）切换到Console标签，点击提交按钮，如果之前的语法错误消失，confirm对话框正常弹出，就说明修复成功了。

内容的提问来源于stack exchange，提问作者Noë Perracini