如何在JavaScript中提交按钮的value值作为表单数据？

我来帮你解决表单提交按钮value值的问题，分享几个实用的方案：

方案1：给按钮添加name属性（最直接） #

如果你用的是<button>或者<input type="submit">，必须给按钮加上name属性，不然表单提交时不会携带它的value值。举个简单的例子：

<form action="/your-submit-url" method="post">
  <!-- 带name属性的提交按钮，提交后会携带 `action_btn=save_data` 这个键值对 -->
  <button type="submit" name="action_btn" value="save_data">保存数据</button>
</form>

后端就能通过action_btn这个字段直接拿到按钮的value了。

方案2：用隐藏域同步按钮文本（适合自定义按钮场景） #

如果你的按钮是纯展示文本，或者不想依赖按钮自带的提交逻辑，可以用隐藏域来中转按钮文本：

<form id="myForm" action="/your-submit-url" method="post">
  <input type="hidden" name="button_text" id="hiddenBtnText">
  <button type="button" onclick="handleSubmit()">点击提交</button>
</form>

<script>
function handleSubmit() {
  // 获取按钮的文本内容
  const btnText = document.querySelector('button').textContent.trim();
  // 把文本赋值给隐藏域
  document.getElementById('hiddenBtnText').value = btnText;
  // 提交表单
  document.getElementById('myForm').submit();
}
</script>

关于你提到的「移除内容可行」的推测 #

你说测试移除某些内容后能成功，大概率是之前的代码里有干扰项：

• 按钮的type被设成了button（这种类型的按钮不会触发表单默认提交），要改成submit
• 有JS代码调用了preventDefault()阻止了表单的默认提交行为
• 页面里有多个元素用了同一个name属性，导致按钮的value被覆盖

如果能把你的原始代码贴出来，我还能帮你更精准地定位问题~

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