How do I make an HTML button not reload the page

Use either the <button> element or use an <input type="button"/>.

In HTML:

Copy
<form onsubmit="return false">
</form>

in order to avoid refresh at all "buttons", even with onclick assigned.

You could add a click handler on the button with jQuery and do return false.

Copy
$("input[type='submit']").click(function() { return false; });

or

Copy
$("form").submit(function() { return false; });

In HTML:

Copy
<input type="submit" onclick="return false">

With jQuery, some similar variant, already mentioned.

You can use a form that includes a submit button. Then use jQuery to prevent the default behavior of a form:

Copy
$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

Copy
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

You could also use JavaScript for that:

Copy
  let input = document.querySelector("input");
  input.addEventListener("submit", (event) => {
    event.preventDefault();
  })

As stated in one of the comments (burried) above, this can be fixed by not placing the button tag inside the form tag. When the button is outside the form, the page does not refresh itself.

I can't comment yet, so I'm posting this as an answer. Best way to avoid reload is how @user2868288 said: using the onsubmit on the form tag.

From all the other possibilities mentioned here, it's the only way which allows the new HTML5 browser data input validation to be triggered (<button> won't do it nor the jQuery/JS handlers) and allows your jQuery/AJAX dynamic info to be appended on the page. For example:

Copy
<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>

Use event.preventDefault() in the first line of your event function.

Buttons must be of the type button and contain type="submit" in the button html.

Add a to the botton and input data-toggle="modal" like this

Copy
<a data-toggle="modal"><button type="submit">Edit Profile</button></a>