Question

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

HTML代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

预览按钮是提交按钮！

如果您希望它是Just For JavaScript，请添加type="button"。

Answer 2

您需要指定按钮的类型type="button"。如果您没有指定按钮的type属性，它将默认提交，因此它正在提交您的表单。

MDN docs on button

Answer 3

在预览按钮中添加一个类型=＆＃34;按钮＆＃34;如果您未默认添加，则表单会将其视为提交按钮..

＆＃13;

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

＆＃13;

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

＆＃13;

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

这应该对你有帮助。

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

多个按钮不在表单中工作

5 个答案: