Documentation

Read the official documentation.

Overview

Submits both <form/> element and FormData using the Fetch API with a single JS call. Submitting forms couldn't be easier!

Uses the Fetch API. Support for additional Fetch API options, such as form method (POST, GET), headers, CORS modes, etc. Defaults to POST.

Returns a Promise for handling response or error with then() and catch().

Features include:

• 📃 Submit form data quickly and easily
  • Just a simple call. Submitting forms couldn't be easier!
• ✅ Supports both <form/> element and FormData
  • Submit your forms your way.
• 👍 Uses basic fetch API config with optional customization
  • Use the default POST configuration, or customize the call to your heart's content.

Donate

If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!

Table of Contents

• Documentation
• Overview
  • Features include:
• Donate
• Table of Contents
• Installation
• Quick Start
  • Example
    • Submitting using a <form/> element
    • Submitting using a FormData object
• Fetch Options
• TypeScript
• Icon Attribution
• Contributing
• ⭐ Found It Helpful? Star It!
• License

Installation

npm i simple-form-submit

Quick Start

You can either:

• Submit a <form/> element using SimpleFormSubmit.submitForm(actionUrl, form)
• Submit FormData (see docs) using SimpleFormSubmit.submitFormData(actionUrl, formData). This is useful if you want to build form data manually or transform the form data before sending.

Both functions return a Promise so you can handle success/failure cases.

This library uses the Fetch API to make requests.

Example

We want to use JavaScript to send data for this simple form when it's submitted:

<form id="example-form" onSubmit="handleSubmit(e)">
  <div>Email: <input name="email" /></div>
  <div>Message: <input name="message" /></div>
  <button>Send</button>
</form>

Submitting using a <form/> element

We can submit the <form/> element itself to any URL, like so:

import SimpleFormSubmit from "simple-form-submit";

const handleSubmit = (e) => {
  e.preventDefault();

  const formActionUrl = "https://www.example.com/form";
  const form = document.getElementById("example-form");

  SimpleFormSubmit.submitForm(formActionUrl, form)
    .then((response) => {
      console.log("Response:", response);
    })
    .catch((err) => {
      console.log("Error:", err);
    });
};

Submitting using a FormData object

You can also submit using a FormData object. This allows you to modify the form data before sending.

You can use new FormData(form) to extract the form data from an existing form. (Or, if you want, you can manually build your own FormData object.)

For example:

import FormData from "form-data";

const formActionUrl = "https://www.example.com/form";
const formData = new FormData(document.getElementById("example-form"));

// Transform the data here if you'd like.
formData.set("email", formData.get("email").toLowerCase());
formData.append("date", new Date().toString());

SimpleFormSubmit.submitFormData(formActionUrl, formData)
  .then((response) => {
    console.log("Response:", response);
  })
  .catch((err) => {
    console.log("Error:", err);
  });

Fetch Options

You can specify the method (GET or POST), mode (such as no-cors), headers, and other Fetch API options if you'd like. The default method is POST.

const formActionUrl = "https://www.example.com/form";
const form = document.getElementById("example-form");

// You can specify any Fetch API options here.
const fetchOptions = {
  // method: "GET",
  // mode: "no-cors",
  // ...
};

SimpleFormSubmit.submitForm(formActionUrl, form, fetchOptions)
  .then((response) => {
    console.log("Response:", response);
  })
  .catch((err) => {
    console.log("Error:", err);
  });

TypeScript

Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.

Contributing

Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

⭐ Found It Helpful? Star It!

If you found this project helpful, let the community know by giving it a star: 👉⭐

License

See LICENSE.md.