在带有两个按钮的 HTML 表单上，如何让一个按钮提交表单而另一个按钮不提交？答案

【问题标题】：On an HTML form with two buttons, how can I get one button to submit the form and the other one not?在带有两个按钮的 HTML 表单上，如何让一个按钮提交表单而另一个按钮不提交？
【发布时间】：2016-01-18 20:14:35
【问题描述】：

为简洁起见，请参阅下面使用 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()，但似乎没有任何效果。

【问题讨论】：

如果您不希望任何一个按钮导致实际的表单提交，您可以更改第一个按钮的按钮类型吗？我不确定您打算如何执行实际的表单提交，但我认为当您单击第一个按钮时它会立即提交。
默认情况下，<button type="button"> 不会提交您的表单。

标签： html reactjs forms

【解决方案1】：

检查一下：

<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>

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

这里的按钮类型提交显示带有“表单已提交”消息的警报，按钮类型按钮显示“按钮单击，请不要提交！！！”。

对于 ReactJS

render: function(){

    function onsubmit(e){
      e.preventDefault();

      alert('form submitted');
    }

    function myfunc(){
      alert('button clicked, please don\'t submit!!!');
    }

    return (

        <form onSubmit={onsubmit}>
            <input id="text1" />
            <input id="text2" />
            <button type="submit">{"Submit"}</button>
            <button type="button" onClick={myfunc}>{"Don't Submit"}</button>
        </form>
    );
}

【讨论】：

我试过你的小提琴，但第二个按钮对我没有任何作用。我正在使用 Chrome……不过还没有进一步查看。
@jpierson 对不起，我的代码中有一个引号错误，请再次验证。
嗯，这和我没有 ReactJS 的东西一样。那么我的问题是 React 特有的吗？
有可能。再次检查我的代码，我只是用 reactjs 添加一个示例。
我的代码中一定还有其他问题。我基本上在做与您的示例相同的事情，但我没有得到相同的行为。如果我能把它归结为别的东西，我会相信你的回答。

【解决方案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>

【讨论】：

有趣，我得研究一下这个选项。让我想起了一些在实际提交表单时使用 value 或 name 属性的例子。

【解决方案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>

【讨论】：

【解决方案4】：

所以我找到了一种可行的解决方案，但是它避免了直接使用表单的提交，据我所知，它消除了与验证和自动 Enter 键支持等相关的一些表单细节。

<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 的解决方案可能会在这方面给我更多我正在寻找的东西。

【讨论】：