Create a non-submit button in the form

I will explain how to create a button that does not submit in the form.

The default behavior of the browser is to submit a form or if there is a button in the form, it will try to submit the form.

<form>
  <input type = "text">
  <input type = "submit" value = "submit">
</form>

<form>
  <input type = "text">
  <button> Register </button>
</form>

Please click. The page is refreshing with a submit, which is the default behavior of the browser.

Buttons that do not submit in the form

In modern Web system development, there is a request to update data using ajax. This is because I want to update the data without causing page transitions.

Therefore, I want a button that does not submit in the form. Actually, if you set "type = button", it will be a button that does not submit.

<form>
  <input type = "text">
  <button type = "button"> Register </button>
</form>

Please click. Page transitions do not occur.

Sample to submit form contents with ajax

Let's write a sample to submit the contents of the form with ajax with jQuery and JavaScritp. Note that this doesn't actually work as there is no server-side implementation. Let's display the contents of the obtained form. Please enter your name and age and press the register button. There is no server-side implementation, so security engineers can rest assured to push it.

<script src = "https://code.jquery.com/jquery-3.4.1.min.js"> </script>
<script>
  $(document) .on ('click','.myform .submit', function () {
    var data = $(this) .closest ('form') .serialize ();
    
    // Take a look at the contents
    alert (data);
    
    // Submit the contents of the form committee with ajax
    / *
      $.post ('/ path', data, function () {
        
      });
    * / /
  });
</script>

<div class = "myform">
  <form>
    <div>
      Name: <input type = "text" name = "name">
    </div>
    <div>
      Age: <input type = "text" name = "age">
    </div>
    <div>
      <button type = "button" class = "submit"> Register </button>
    </div>
  </form>
</div>

HTML・CSS Writing 2022