Git Product home page Git Product logo

spinonsubmitjs's Introduction

npm version npm npm version npm downloads

SpinOnSubmitJS

SpinOnSubmitJS is a lightweight JavaScript library that provides an easy way to add a spinner to a submit button when performing asynchronous actions, such as form submissions. It simplifies the process of indicating loading state and disabling the button while waiting for the action to complete. Installation

You can install SpinOnSubmitJS via npm:

npm install spinonsubmitjs

Usage and Examples

Using SpinOnSubmitJS in your project is easy. Follow these steps:

  1. Create a submit button element in your HTML form with a unique ID.
  2. In your JavaScript file, import the createSpinnerButton function from the SpinOnSubmitJS library.
  3. Call createSpinnerButton, passing in the following arguments:
    • The ID of your submit button
    • The ID of your form
    • A callback function representing the asynchronous action to be performed when the button is clicked. This callback receives the form data as its first argument, removing the need to manually gather the data.
    • An error callback function. This function will be called if your main callback throws an error or rejects a promise, allowing you to handle errors gracefully.
    • An options object that can contain the following properties:
      • spinnerColor: This sets the color of the default spinner.
      • position: This can be either 'left' or 'right', and sets the position of the spinner in relation to the button text.
      • hideLabelWhileLoading: This can be either true or false, and determines whether or not the button's text is hidden while the spinner is displayed.
  4. Remember, the options object is an optional parameter. If you want the spinner with default configurations, you don't need to pass this 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
        true     // hideLabelWhileLoading
      );

This creates a button that, when clicked, gathers data from a form, displays a yellow spinner to the right of the button text, and pops up an alert with the form data. If any fields are empty, the function will reject with an error, and the error callback will alert the user. If the 'hideLabelWhileLoading' option is set to true, the button's label will be hidden while the spinner is displayed.

If you have any other questions or if there's anything else you'd like to change, feel free to ask!

License

SpinOnSubmitJS is released under the MIT license. This is a permissive open-source software license, which allows for free use, modification, and distribution of the software without requiring payment or attribution.

The MIT license is a widely-used open-source software license that gives permission for free use, modification, and distribution of the software, without any obligation of payment or attribution. This signifies that anyone has the liberty to use, modify, and distribute the software without needing to make any payment or credit the original author.

The adoption of an open-source license like the MIT license is significant because it ensures that the software can be utilized and enhanced by as many individuals as possible. By releasing SpinOnSubmitJS under the MIT license, it's aimed to inspire others to use and contribute to the project, and to foster the broader adoption of open-source software in general.

The licensing of SpinOnSubmitJS is considered with great importance, believing it as a fundamental part of the project's success. You are encouraged to read the license thoroughly before using or contributing to the project, and to comply with its terms in your use and distribution of the software.

spinonsubmitjs's People

Contributors

thedhanawada avatar

Stargazers

Eduardo Previtale avatar Abdessamad HAFIDI avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.