Question

为简洁起见，请参阅下面的示例使用ReactJS。

<form onSubmit={(e) => alert('form submitted');}>
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit">Submit</button>
    <button type="button" onClick={(e) => alert('button clicked, please don't submit!!!')}>Don't Submit</button>
</form>

在上面的示例中，我想要的是，当单击提交按钮时，会显示警告“表单已提交”，并且不提交点击按钮，用户应该看到“点击按钮，请不要提交!!!”警告没有开始，然后是“提交”警报。此外，这些按钮都不会导致实际的真实表单提交回发到服务器。到目前为止，我已尝试各种方法来阻止提交发生，例如e.preventDefault()，但似乎没有任何效果。

Answer 1

检查一下：

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.3.1.RELEASE</version>
</parent>

https://jsfiddle.net/81kx5otf/1/

此处按钮类型提交显示带有“表单已提交”消息的提醒，按钮类型按钮显示“点击按钮，请不要提交!!!”。

对于ReactJS

<form onsubmit="alert('form submitted');">
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit">Submit</button>
    <button type="button" onclick="alert('button clicked, please don\'t submit!!!')">Don't Submit</button>
</form>

Answer 2

尝试这样的事情：

<form onSubmit={(e) => {if (e.target.id === 'sub') {alert('form submitted');}}}>
<input id="text1"/>
<input id="text2"/>
<button id="sub" type="submit">Submit</button>
<button type="button" onClick={(e) => alert('button clicked, please don't submit!!!')}>Don't Submit</button>
</form>

Answer 3

这是另一种简单的方法

你的表格：

<form id="form" >
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit">Submit</button>
    <button type="button" onClick="alert('Don\'t Submit')">Don't Submit</button>
</form>

小脚本：

<script>
    var form = document.getElementById("form")
    form.addEventListener("submit", function(e){
        e.preventDefault()
        alert("submitting")
    })
</script>

Answer 4

所以我找到了一个有效的解决方案，但它避免直接使用表单提交，我可以回忆起它摆脱了一些与验证相关的形式细节和自动输入密钥支持等等。

<form onSubmit={(e) => e.preventDefault();}>
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit" onClick={(e) => alert('form submitted');}>Submit</button>
    <button type="button" onClick={(e) => alert('button clicked, please don't submit!!!')}>Don't Submit</button>
</form>

我更喜欢一种仍然使用表单的onSubmit方法而不实际提交表单的解决方案。使用 ngForm 我记得有一个非常好的行为，我想我想尝试复制。 Benvorth的解决方案可能会给我更多关于我在这方面所寻求的东西。

在带有两个按钮的HTML表单上，如何获得一个按钮来提交表单而另一个不是？

4 个答案: