按钮在html表单内不起作用，但在外部起作用

Question

Hi there I need some help with this html form! I'm making a bulletin board using summernote ( https://summernote.org/examples/ )

At first I made the button(save, edit) outside the form and it perfectly worked.

Clicking edit button shows the editor

And the save button saves the change and hides the editor

However as I moved it inside it wouldn't work. Can't figure out why... Are the elements inside the form independent from the rest?

If not, what did I do wrong? And what should I change to make two buttons exist inside the editor form?

Html that works :

<div class="container">
    <div class="page-header">
        <h1>Hello</h1>
    </div>
    <form class="edit-summit-form" method="post" action="      ">
            <div id="editor">

            </div>
    </form>
    <p>
        <!--<div id="summernote-result"></div>-->
    </p>
    <button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
    <button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
    <div class="click2edit">click2edit</div>
</div>

Html that doesn't work :

<div class="container">
    <div class="page-header">
        <h1>Hello</h1>
    </div>
    <form class="edit-summit-form" method="post" action="      ">
            <div id="editor">
              <button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
              <button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
              <div class="click2edit">click2edit</div>
            </div>
    </form>
    <p>
        <!--<div id="summernote-result"></div>-->
    </p>
</div>

Javascript :

    $(document).ready(function() {
        $('#summernote').summernote();
    });
    var edit = function() {
      $('.click2edit').summernote({focus: true});
    };
    var save = function() {
      var markup = $('.click2edit').summernote('code');
      $('.click2edit').summernote('destroy');
    };

Answer 1

You haven't explained what "doesn't work", but I'm guessing your form is submitting and you don't want it to. Remove the onclick inline JS and have the event callback prevent form submission:

$('#save').on('click', function(e) {
    e.stopPropagation();
    var markup = $('.click2edit').summernote('code');
    $('.click2edit').summernote('destroy');
    return false;
});