Multiple buttons not working in a form

Question

I am trying to create a form such that the user can enter HTML code in the textarea which can be rendered when the Preview button is clicked and submitted to the database when the Submit button is clicked. But the data is being submitted when the preview button is clicked.

HTML Code:

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

did you try to move the preview button out of the form block? — ItayB, Feb 09 '18 at 12:47
Possible duplicate of [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Ivar, Feb 09 '18 at 12:50

score 3 · Accepted Answer · answered Feb 09 '18 at 12:49

3

The preview button is a submit button!

If you want it to be Just For JavaScript, add type="button".

answered Feb 09 '18 at 12:49

Quentin

914,110
126
1,211
1,335

1

Probably to add - for semantic/accessibility reason - `type=submit` to submit button. – Andreas Feb 09 '18 at 12:50
@Andreas — Explicitly setting the value of an attribute to its default does nothing to help semantics or accessibility. It just means more code to write and send to the browser. – Quentin Feb 09 '18 at 12:51
Fair enough, my bad. – Andreas Feb 09 '18 at 12:53

score 2 · Answer 2 · answered Feb 09 '18 at 12:49

2

You need to specify the button's type type="button". If you do not specify the type attribute of a button, it will default to submit, as such it is submitting your form.

MDN docs on button

answered Feb 09 '18 at 12:49

Richard

951
7
14

score 2 · Answer 3 · answered Feb 09 '18 at 12:50

In your preview button add a type="button" if you don't added by default the form will treat it as a submit 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">

Swam Didam · Answer 4 · 2018-02-09T13:27:29.387

There is something you're missing, you haven't included your type which should be type="button", i.e

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

You will need to include it between the preview button tag.

Which should make you new code look like the one below.

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

This should help you.

score 0 · Answer 5 · answered Feb 09 '18 at 12:55

Change Button type in your code like:

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

Multiple buttons not working in a form

5 Answers5