Summernote modal buttons causing form to be submitted

Question

Within a web2py application, I've got a form that's loaded as a component, and that has a textarea to which the Summernote editor is applied.

{{=LOAD('editor', 'load_summernote.load', vars = {...}, ajax = True)}}

Summernote's ".note-insert" group of buttons (link, picture, video) opens up a modal. When the 'Insert *' button of that modal is clicked, it causes the form to be submitted. To me, this seems like a highly undesirable behavior. I've tried to build on a couple of hackish solutions to prevent the form from being submitted:

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    return  false;
});

The above code does not prevent the form from being submitted.

First question: is the form submission behavior of Summernote's "Insert" buttons the expected behavior, or is it likely that there's something particular to my site that's causing the form submission? (There does not appear to be anything immediately apparent to suggest an affirmative answer to the latter part of the question.)

Second question: is there a preferred way to prevent those "Insert" buttons from causing the form to be submitted, without compromising their functionality?

score 0 · Answer 1 · edited May 23 '17 at 11:53

It could be that the HTML you are using for the button is incorrect. I am assuming you are using a button tag for your "Insert" button. It is important to note that the default behavior of the button tag is of type=submit (implicitly). You should add a type=button attribute to the button tag to prevent submission on click. For example:

<button>Insert</button> <!--WILL cause a submit (implicitly type=submit)-->
<button type=button>Insert</button> <!--Will NOT cause a submit-->

See this answer for more details.

Summernote modal buttons causing form to be submitted

1 Answers1