如何阻止表单标签内的按钮提交数据答案

【问题标题】：How to stop button inside form tags from submitting data如何阻止表单标签内的按钮提交数据
【发布时间】：2022-01-10 17:47:43
【问题描述】：

嗨，我正在尝试制作一个输入数字的表单，在我在输入字段上的表单内，但有一些按钮用于设置所述字段的样式，以及用于将表单发送到 php 文件的锚标记。单击其中一个按钮立即发送当前值，如何停止？

<form name="destination" action="../a.php" method="post">
    Quantity : 
    <button onclick="dec('amount')">-</button>
    <input name="amount" type="text" value="0" size = 1>
    <button onclick="inc('amount')">+</button><br><br>
    </form>
<a href="javascript:submitForm()">Details</a>

按钮 JS：

function inc(element) {
    let el = document.querySelector(`[name="${element}"]`);
    el.value = parseInt(el.value) + 1;
  }
  
  function dec(element) {
    let el = document.querySelector(`[name="${element}"]`);
      if (parseInt(el.value) > 0) {
        el.value = parseInt(el.value) - 1;
    }
  }

锚标签JS函数：


function submitForm() {
document.destination.submit();
}
</script>```

【问题讨论】：

按钮类型需要定义<button type='button'，否则默认为type='submit':stackoverflow.com/questions/932653/…
@Kinglish 是正确的。而且，onclick 函数将event 对象传递给该函数，您可以执行event.preventDefault()，这将阻止任何默认行为的发生，例如打开链接或提交表单。 preventDefault Doc

标签： javascript php html

【解决方案1】：

您可以轻松做到，只需在您的 js 代码中包含 event.preventDefault()。

event.preventDefault()实际上用于阻止（停止）任何默认事件。

function inc(element) {
  event.preventDefault();
  let el = document.querySelector(`[name="${element}"]`);
  el.value = parseInt(el.value) + 1;
}

function dec(element) {
 event.preventDefault();
 let el = document.querySelector(`[name="${element}"]`);
  if (parseInt(el.value) > 0) {
    el.value = parseInt(el.value) - 1;
  }
}

但如果您不想使用 js，您可以更改按钮的默认类型。按钮的默认类型是submit，它将提交表单。你可以使用type="button"

【讨论】：

谢谢大家，你们救了我：D
@Rosalyo 这就是我们在这里的原因。
不用js，看我的回答我的解释

【解决方案2】：

在 html 中，按钮的默认类型 ID“提交”将提交表单。为了避免这种行为，只需分配一个不同的类型

<button type="button">...</button>

https://www.w3schools.com/TAGs/att_button_type.asp

【讨论】：