Update form status by changing submit button text

jQuery ajax (beforeSend)

by syamsoul

HTML

<form>
    <input type="text" name="input1" />
    <button type="submit">Submit</button>
</form>

JavaScript

$(function () {
    $('form').on('submit', function (e) {
      e.preventDefault();

      let submitBtnEl = $(this).find('button[type="submit"]'); //submit button element

      $.ajax({
        type: 'get',
        url: 'https://pokeapi.co/api/v2/',
        data: $('form').serialize(),
        beforeSend: function( xhr ) {
            submitBtnEl.html('Scanning'); //the submit button text will change after click submit
        },
        success: function () {
            submitBtnEl.html('Completed'); //the submit button text will change after the form is completely submit
        }
      });
    });
  });