如何将JavaScript变量传入HTML表单，点击提交调用JS函数删除数据库条目

核心思路是要么拦截表单的默认提交行为，转而调用你的JavaScript函数，要么把JS变量的值传递给表单字段，让表单提交时带上这些值，刚好匹配你删除数据库条目的需求。

方案1：拦截表单提交，调用自定义JS函数（推荐用AJAX） #

如果不想让表单跳转页面，而是通过异步请求完成删除操作，这种方式最适合。你可以给表单绑定submit事件，先阻止默认的跳转行为，再执行你的删除逻辑：

<!-- 表单结构，这里用隐藏字段存要删除的ID（可选，也可以直接用JS变量） -->
<form id="deleteItemForm">
  <button type="submit">确认删除</button>
</form>

// 假设你已经有一个从页面或其他逻辑拿到的目标条目ID
const deleteItemId = 456;

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('deleteItemForm');
  form.addEventListener('submit', function(e) {
    // 阻止表单默认的提交跳转
    e.preventDefault();
    
    // 调用你的自定义删除函数，传入需要的变量
    handleItemDelete(deleteItemId);
  });
});

// 自定义的删除逻辑函数
function handleItemDelete(itemId) {
  // 先做个确认提示，避免误删
  if (!confirm(`确定要删除ID为${itemId}的条目吗？`)) {
    return;
  }
  
  // 用fetch发送异步请求到后端接口完成删除
  fetch('/api/delete-item', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ id: itemId })
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      alert('删除成功！');
      // 这里可以更新页面UI，比如移除对应的条目元素
    } else {
      alert('删除失败，请重试');
    }
  })
  .catch(err => console.error('删除请求出错:', err));
}

方案2：把JS变量的值传入表单，随表单一起提交 #

如果你还是想使用表单的默认提交行为（比如跳转页面），可以把JS变量的值赋值给表单的隐藏输入字段，这样提交时后端就能拿到这个值：

<form action="/delete-item" method="POST">
  <!-- 隐藏字段用来存放JS变量的值 -->
  <input type="hidden" id="targetId" name="item_id">
  <button type="submit">删除条目</button>
</form>

const targetItemId = 456;

// 页面加载时给隐藏字段赋值
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('targetId').value = targetItemId;
});

// 也可以给按钮加点击事件，在提交前做额外处理
document.querySelector('button[type="submit"]').addEventListener('click', function() {
  // 比如做最后一次确认
  return confirm('确定要删除吗？');
});

小提醒 #

• 尽量避免用内联的onclick或onsubmit（比如<button onclick="handleDelete()">），虽然简单但不利于代码维护，用事件监听的方式更灵活。
• 删除操作一定要做权限校验！前端的确认只是友好提示，真正的权限判断和数据校验必须放在后端，防止恶意删除。

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