SpinOnSubmitJS

About the Library

SpinOnSubmitJS is a lightweight JavaScript library that simplifies the process of indicating loading state and disabling a submit button during asynchronous actions, such as form submissions. It provides an easy way to add a spinner to the submit button, improving user experience and preventing multiple form submissions. This library is perfect for web developers looking to improve the interactivity of their web pages without writing complex JavaScript code.

Installation

SpinOnSubmitJS can be installed via NPM. To add it to your project, simply open your terminal and run the following command:

npm install spinonsubmitjs

Usage

Incorporating SpinOnSubmitJS into your project is easy. Just follow the subsequent steps:

1. Create a submit button element within your HTML form and assign a unique ID to it.
2. In your JavaScript file, import the `createSpinnerButton` function from the SpinOnSubmitJS module.
3. Invoke `createSpinnerButton`, providing the ID of your submit button, the ID of your form, and a callback function representing the asynchronous action to be performed upon button click. The callback function now receives the form data as its first parameter, obviating the need for manual data collection.
4. You have the option to pass an error callback as the fourth argument. This function gets called if your main callback throws an error or rejects a promise, enabling you to handle errors seamlessly.
5. The fifth argument has now been replaced with an optional `spinnerOptions` object. This object can contain:
   • spinnerColor: Sets the color of the spinner.
   • position: Determines the spinner's position, either 'left' or 'right'.
   • hideLabelWhileLoading: A boolean indicating whether or not to hide the button's label while loading.
   Note that if you want the spinner with default configurations, you don't need to provide the `spinnerOptions` argument.

Here's an example of how you might use `createSpinnerButton`:

  createSpinnerButton(
    'submitBtn',
    'myForm',
    function(data) {
      return new Promise(function(resolve, reject) {
        setTimeout(function() {
          var firstName = data.firstName;
          var lastName = data.lastName;
          if (firstName === '' || lastName === '') {
            reject('All fields must be filled!');
          } else {
            alert("Submitted!\nFirst Name: " + firstName + "\nLast Name: " + lastName);
            resolve();
          }
        }, 2000);
      });
    },
    function(error) {
      alert(error);
      console.error(error);
    },
    'white', // Spinner color
    'right',  // Spinner position
    false     // hideLabelWhileLoading
  );

Example

Below is a live example of a form using SpinOnSubmitJS. When you click the submit button, the form data is gathered and an alert is displayed with your first and last name. During this time, the submit button is disabled and a spinner is displayed.

GitHub Repository

The source code for SpinOnSubmitJS is available on GitHub. You can view it, download it, fork it, or contribute to it by visiting the following link: SpinOnSubmitJS GitHub Repository.

NPM Package

SpinOnSubmitJS is also available as an NPM package. You can add it to your project by running `npm install spinonsubmitjs` or visit the NPM package page at SpinOnSubmitJS NPM Package for more information.