HTML button refreshes in SharePoint Hosted App

Question

I have an HTML button in my SharePoint hosted app like this:

<input type="button" id="btnSubmit" value="Test"/>

and I tried

<button id="btnSubmit">Test </button>

But it is always refreshing until I remove all the code from SharePoint and leave it as regular HTML page.

Answer 1

Your buttons are in a SharePoint FORM, so when you add a button the click event is bubbling up to the FORM, and the FORM is submitted.

You have to add JavaScript code to stop that from happing with

event.stopPropagation();

or

event.preventDefault();

See: https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/