Single-submit NPM

Single Submit Js

In scenarios involving actions like file uploads or form submissions, waiting for server responses can be time-consuming. By integrating this library, enhance user experiences with a processing indicator and prevent duplicate submissions until a response is received, resulting in a more efficient interaction.

Key Features

Prevent duplicate form submission. 🚫
Native HTML form validation. ✅
Works independently of any CSS framework. 🌐
Compact file size of less than 1KB. 📦
Quick setup with a CDN link. 🚀
Supports customizing processing indicators. 🛠️

Single Submit Example

Quick Start

<!DOCTYPE html>
<html lang="en">
  <body>
    <form
      method="post"
      data-ss-type="single-submit-form"
      data-loading-text="Submitting...">
      <!-- Your form fields here -->

      <button type="submit">Submit</button>
    </form>

    <!-- Add CDN link -->
    <script
      src="https://cdn.jsdelivr.net/npm/single-submit@2.0.1/dist/single-submit.min.js"
      integrity="sha256-Ig68U756uj/lhygwo6cvQoKZgrpunyLN1+Zpl+pWyRk="
      crossorigin="anonymous"></script>

    <!-- Initialize on load -->
    <script type="text/javascript">
      window.addEventListener("load", () => {
        SingleSubmit.init();
      });
    </script>
  </body>
</html>

Installation

Using CDN link:

<script
  src="https://cdn.jsdelivr.net/npm/single-submit@2.0.1/dist/single-submit.min.js"
  integrity="sha256-Ig68U756uj/lhygwo6cvQoKZgrpunyLN1+Zpl+pWyRk="
  crossorigin="anonymous"></script>

Using npm package:

npm i single-submit

Once the package is installed, you can import the library using import or require approach:

// Using default default export.
import SingleSubmit, { SingleSubmitOptions } from "single-submit";

// or If you use require for importing, only default export is available.
const SingleSubmit = require("single-submit").default;
const { SingleSubmitOptions } = require("single-submit");

Configuring forms

Add the data-ss-type="single-submit-form" attribute to your form and optionally include the data-ss-loading-text attribute to specify the text displayed during processing. Here's an example:

<form
  method="post"
  data-ss-type="single-submit-form"
  data-ss-loading-text="Submitting...">
  <!-- Your form fields here -->
  <button type="submit">Submit</button>
</form>

Customize the process indicator

Out of the box, there is one indicator available: spinner-border-single-submit. You can switch to any other indicator by specifying the data-ss-indicator attribute to the form or button or passing the indicator class in init options.

The following example using assuming you are using Bootstrap's spinner-grow class. However you can specify you custom class to customize the process indicator animation.

Using data-ss-indicator:

<!-- Assuming you are using Bootstrap -->
<form
  data-ss-type="single-submit-form"
  data-ss-indicator="spinner-grow spinner-grow-sm">
  <!-- Your form fields here -->
  <button type="submit">Submit</button>
</form>

Using SingleSubmit.init() options:

SingleSubmit.init({
  processIndicatorClass: "spinner-grow spinner-grow-sm", // assuming you are using Bootstrap
});

To further customizing the implementation refer to configuration options.

Configuration Options

HTML Data Attributes

data-ss-type

Required with value of single-submit-form. This attribute is used to detect the forms on which to enable the single submit.

data-ss-loading-text (If set this will override the options passed through init function)

(Optional). Using this you can specify what text to show when the form is submitted and being processed. The default value is captured form the element's inner text.

data-ss-indicator If set this will override the options passed through init function

(Optional). You can set a custom processing indicator. The default value is spinner-border-single-submit which is taken inspiration from Bootstrap framework.

Init Options

Single submit offers the following options. The containerClass allows to override the default container class spinner-container-single-submit for edge cases.

interface SingleSubmitOptions {
  containerClass?: string;
  processIndicatorClass?: string;
}

single submit prevent duplicate submission button progress submit progress npm package form submission file uploads processing indicator duplicate submissions HTML form validation cdn customization spinner bootstrap

@everything-registry/sub-chunk-2770

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago