How to Make an HTML Button Not Reload the Page

How do I make an HTML button not reload the page

there is no need to js or jquery.
to stop page reloading just specify the button type as 'button'.
if you dont specify the button type, browser will set it to 'reset' or 'submit' witch cause to page reload.

 <button type='button'>submit</button>

prevent refresh of page when button inside form clicked

Let getData() return false. This will fix it.

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

How to prevent the submit button from reloading the page, while keeping default form warnings?

You want to keep the default html warnings if I understand your question well. I would like to suggest the following:

Firstly, you don't need to attach onClick event handler for the button because a button in an HTML form or with the type submit by default submits to the form it is contained.
You can attach onSubmit event handler to the main form and in its callback function prevent the default behaviour.
With this, html5 will handle any errors and prevent the form from even submitting in the first place. When it doesn't find any error, it will run the callback function attached to the form's event handler.

So your code might be as follows:

handleSubmit(e) {
e.preventDefault();
// Do what you like here

e.target.submit(); // if you want to submit the forms
}

<form id="table_form" onSubmit={this.handleSumbit.bind(this)}>
   <label>how many rows ?</label>
   <input
     type="number"
     name="rows"
     min={min_tablerows}
     max={max_tablerows}
     required
     value={tablerows}
     onChange={onChangeHandeler} />
   <label>how many columns ?</label>
   <input
     type="number"
     name="columns"
     min={min_tablecolumns}
     required
     value={tablecolumns}
     onChange={onChangeHandeler} />
   <button
     type="submit">
       <FontAwesomeIcon icon={faCheck} />
   </button>
</form>

Why is the page instantly reloading on clicking the 'form-on submit' button?

Prevent that by adding event.preventDefault. Also you need to convert the value of the input to number which is done by adding unary operator +document.getElementById("fibo").value;. You can also use parseInt

function getFibonacci(event) {
  event.preventDefault()
  try {
    var num = +document.getElementById("fibo").value;
    var fib0 = 0;
    var fib1 = 1;
    var next;
    const fib = [];
    for (var i = 0; i < num - 1; i++) {
      next = fib0 + fib1;
      fib0 = fib1;
      fib1 = next;
      fib.push(fib0)
      document.getElementById("result").innerHTML = fib;
    }
  } catch (err) {
    document.getElementById("result").innerHTML = err;
  }
}

<form onsubmit="return getFibonacci(event)">
  <table>
    <tr>
      <td>Enter the number to get a fibonacci</td>
      <td><input type="number" id="fibo" name="fibo" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" id="fibobtn" name="fibobtn" value="Get Fibonacci" /></td>
    </tr>
  </table>
  <div id="result"></div>
</form>

submit on radio change + prevent page reload, not working in Firefox

You can directly call the submitExcercise() method with event as parameter when radio button is changed.

<form id="form">
  <input type="radio" name="radio" id="radio1" onchange="submitExercise(event)">
  <input type="radio" name="radio" id="radio2" onchange="submitExercise(event)">
  <input type="radio" name="radio" id="radio3" onchange="submitExercise(event)">
</form>
<script>
  function submitExercise(event) {
    event.preventDefault();
    console.log("test");
  }
</script>

call submitExcercise() when the form element is changed, this will trigger if any child element is changed.

<form id="form" onchange="submitExercise(event)">
  <input type="radio" name="radio" id="radio1">
  <input type="radio" name="radio" id="radio2">
  <input type="radio" name="radio" id="radio3">
</form>
<script>
  function submitExercise(event) {
    event.preventDefault();
    console.log("test");
  }
</script>

Button to reload page does not reload page

The default type of button is "submit" which will submit the form.

for this case, you should change the button type to "button" or use preventDefault to stop the default behavior of the button clicked.

change the button type to "button"

  <button type="button" id="reload" class="btn btn-success">ye!</button>

or use preventDefault

reload.addEventListener('click', e => { 
    e.preventDefault()
    window.location.reload();
});