Problem
<!DOCTYPE html>
<html>
  <body>
    <form id="myForm" onsubmit="submitHandler(event)">
      <label for="inputField">Input:</label>
      <input type="text" id="inputField" name="inputField" />

      <button
        id="myButton"
        class="btn"
        name="actionButton"
        value="clickValue"
        type="button"
        title="Click this button"
        style="background-color: blue; color: white"
      >
        Click Me
      </button>
    </form>

    <script>
      function submitHandler(e) {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        alert(formData.get("inputField"));
      }
    </script>
  </body>
</html>
Solution

A button with a type of “button” will not submit the form. It will only submit the form if the type is “submit”.

<!DOCTYPE html>
<html>
  <body>
    <form id="myForm" onsubmit="submitHandler(event)">
      <label for="inputField">Input:</label>
      <input type="text" id="inputField" name="inputField" />

      <button
        id="myButton"
        class="btn"
        name="actionButton"
        value="clickValue"
        type="submit"
        title="Click this button"
        style="background-color: blue; color: white"
      >
        Click Me
      </button>
    </form>

    <script>
      function submitHandler(e) {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        alert(formData.get("inputField"));
      }
    </script>
  </body>
</html>

Bonus: There is an additional button type of “reset” which does exactly what you think it does and resets the form to its initial state.