• Stars
    star
    89
  • Rank 372,305 (Top 8 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Convert a HTML form to a JS literal and multidimensional object.

form-to-object (formToObject.js)

Convert HTML forms with all their fields and values to multidimensional JavaScript objects

Workflow status Codecov branch npm version npm downloads

Install

As a npm package:

npm install form_to_object
import formToObject from 'form_to_object';
// or
const formToObject = require('form_to_object');

As a JS script:

<!-- Include minified script (~6kb) -->
<script src="build/formToObject.js"></script>

<!-- jsdelivr (CDN) -->
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/build/bundle/formToObject.min.js
"></script>

Example

  • Using the DOM node id: formToObject('myFormId');
  • Using the actual DOM Node reference: formToObject(document.getElementById('myFormId'));

Resulted value:

{
  "saveSettings": "Save",
  "name": "Serban",
  "race": "orc",
  "settings": {
     "input": "keyboard",
     "video": {
        "resolution": "1024x768",
        "vsync": "on"
     }
  }
}

Good to know:

  1. If <form> fields are found, but they lack of name attribute property, the result will be {} (empty object).
  2. If <form> contains only disabled fields, the result will be {} (empty object). If you force includeDisabledFields then key:value pairs will be returned.
  3. An empty <form> will throw an Error.
  4. In case of an error like non-existing form or invalid selector, an Error will be thrown.

Options

Option name Default Description
includeEmptyValuedElements boolean (default false) Return field names as keys with empty value "" instead of just ignoring them.
w3cSuccessfulControlsOnly boolean (default false) TBA, WIP
selectNameWithEmptyBracketsReturnsArray boolean (default true) <select> field names like name="select[]" always return an array [a,b] instead or array of arrays [0: [a,b]].
checkBoxNameWithEmptyBracketsReturnsArray boolean (default true) <input> checkboxes with field names like name=checkbox[] always return an array [a,b] instead or array of arrays [0: [a,b]].

Browser support

IE 8, Firefox 3.5, Chrome, Safari, Opera 10, every mobile browser.

Example

More Repositories

1

Mobile-Detect

Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.
PHP
10,512
star
2

jQuery-Chess

Chess chessboard and rules made in jQuery
JavaScript
16
star
3

jQM-dynamic-popup

Lightweight jQuery Mobile plugin based on the popup() method that allows creation of dynamic popups.
JavaScript
9
star
4

jquery-plugins

jQuery plugins made by Serban
JavaScript
8
star
5

TypeScript-Builds

TypeScript build examples and workflows.
TypeScript
8
star
6

webdriverio-docker

Run e2e tests with wdio and selenium-standalone in Docker containers.
JavaScript
7
star
7

http-client

Basic HTTP client used for talking with APIs.
PHP
6
star
8

PHP-Testing-Starter

Getting started with PHP and Unit Testing, the easy way!
HTML
5
star
9

REST

REST facts
5
star
10

learn-react

Learn React.js with TypeScript in a step-by-step tutorial.
4
star
11

Cordova-Windows-App-Boilerplate

Cordova Windows Web Application Boilerplate (using TypeScript)
CSS
4
star
12

Selenium-Setup-Webdriver

Facebook's Webdriver wrapper for writing tests using Selenium Setup
PHP
4
star
13

apache-windows

Apache and PHP webserver setup on Windows.
Shell
3
star
14

Responsive-Websites-presentation

Cum sa construiesti un website responsive de la 0, apoi folosind Twitter Bootstrap, apoi Zurb Foundation
3
star
15

HTML5-Game-Multiplayer-presentation

DevTalks 2014 keynote about making HTML5 multiplayer games for classic and mobile devices.
JavaScript
2
star
16

wdio5-docker

POC of wdio-docker-service with Webdriver.io 5 support without commiting it to monorepo (WDIO supports legacy style services).
JavaScript
2
star
17

linkedin-scripts

JavaScript snippets for LinkedIn UI scraping.
JavaScript
2
star
18

tooltip.js

Plain JavaScript method to create a tooltip for a HTML element.
JavaScript
2
star
19

working

Various code and build snippets.
JavaScript
2
star
20

Generic-API-Client

A generic API client with basic HTTP support written in PHP.
PHP
1
star
21

google-drive-delete-duplicates

JavaScript
1
star
22

vagrant-for-webdev

Vagrantfile configuration for web development
Shell
1
star
23

FlatSite

Generate and deploy pure HTML static websites.
HTML
1
star
24

http-client.ts

HTTP Client written in TypeScript.
1
star