多个按钮在表单中不起作用答案

【问题标题】：Multiple buttons not working in a form多个按钮在表单中不起作用
【发布时间】：2018-02-09 21:27:29
【问题描述】：

我正在尝试创建一个表单，以便用户可以在文本区域中输入 HTML 代码，当单击“预览”按钮时可以呈现该代码，并在单击“提交”按钮时提交到数据库。但是点击预览按钮时正在提交数据。

HTML 代码：

function parse() {
  var html = document.getElementById("ta").value;
  document.getElementById("result").innerHTML = html;
}

<form action="/admin/pages/add-page" method="post">
  <div class="form-group">
    <label for="">Content</label>
    <textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
  </div>
  <button class="btn" onclick="parse()">Preview</button>
  <button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">

【问题讨论】：

您是否尝试将预览按钮移出表单块？
How to prevent buttons from submitting forms的可能重复

标签： javascript html

【解决方案1】：

预览按钮是提交按钮！

如果您希望它仅适用于 JavaScript，请添加 type="button"。

【讨论】：

可能会添加 - 出于语义/可访问性原因 - type=submit 提交按钮。
@Andreas — 将属性的值显式设置为其默认值对语义或可访问性没有任何帮助。这只是意味着要编写更多代码并将其发送到浏览器。
很公平，我的错。

【解决方案2】：

您需要指定按钮的类型type="button"。如果你没有指定按钮的 type 属性，它将默认提交，这样它就是提交你的表单。

MDN docs on button

【讨论】：

【解决方案3】：

在您的预览按钮中添加一个 type="button" 如果您没有默认添加，表单会将其视为提交按钮..

function parse() {
        var html = document.getElementById("ta").value;
        document.getElementById("result").innerHTML = html;
    }

<form action="/admin/pages/add-page" method="post">
    <div class="form-group">
        <label for="">Content</label>
        <textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
    </div>
    <button type="button" class="btn" onclick="parse()">Preview</button>
    <button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">

【讨论】：

【解决方案4】：

你缺少一些东西，你没有包括你的type，应该是type="button"，即

<button class="btn" type="button" onclick="parse()">Preview</button>。

您需要将它包含在预览按钮标记之间。

这应该使您的新代码看起来像下面的代码。

function parse() {
  var html = document.getElementById("ta").value;
  document.getElementById("result").innerHTML = html;
}

<form action="/admin/pages/add-page" method="post">
    <div class="form-group">
        <label for="">Content</label>
        <textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
    </div>
    <button class="btn" type="button" onclick="parse()">Preview</button>
    <button class="btn btn-default">Submit</button>
</form>
    <br><br>
    <h2>HTML output:</h2>
    <div class="float:right" id="result">

这应该对你有帮助。

【讨论】：

【解决方案5】：

更改代码中的按钮类型，例如：

<form action="/admin/pages/add-page" method="post">
    <div class="form-group">
        <label for="">Content</label>
        <textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
    </div>
    <button type="button" class="btn" onclick="parse()">Preview</button>
    <button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
<script>
    function parse() {
        var html = document.getElementById("ta").value;
        document.getElementById("result").innerHTML = html;
    }
</script>

【讨论】：