https://github.com/degjs/formmapper

utility to get the values of form inputs
https://github.com/degjs/formmapper

forms

Last synced: about 1 month ago
JSON representation

utility to get the values of form inputs

• Host: GitHub
• URL: https://github.com/degjs/formmapper
• Owner: DEGJS
• Created: 2018-02-12T20:48:59.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T18:33:52.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T23:15:38.832Z (9 months ago)
• Topics: forms
• Language: JavaScript
• Size: 1.19 MB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# formMapper

![Run Tests](https://github.com/DEGJS/formMapper/workflows/Run%20Tests/badge.svg)

A utility to take in an element or array of elements and return an object consisting of their values

## Install

formMapper is an ES6 module. Consequently, you'll nee an ES6 transpiler ([Babel](https://babeljs.io) is an option) as part of your Javascript workflow.

If you are already using NPM for your project, you can install formMapper with the following command:

```

$ npm install @degjs/form-mapper

```

## Usage 

### Importing individual methods:

```

import { getValues } from "@degjs/form-mapper";

.

.

.

const formData = getValues(formEl);

```

### Importing all methods:

```

import formMapper from "@degjs/form-mapper";

.

.

.

const formData = formMapper.getValues(formEl);

```

## DefaultElementSelectors

The options represent the default selector names for various input elements. Can be replaced with a string of any selectors that `querySelectAll` and `matches` supports.

Default: `input, select, textarea`

Example override: `.js-input, .js-checkbox-input, select[multiple], textarea`

## Methods

### getValues(input, opts)

The getValues method returns an object with key value pairs being { inputName: inputValue }

#### input

Type: `Element | Element[]`

The container element, input element or array of elements to get values from.

#### opts

Type: `Object`   

Default: `{elementSelectors: defaultElementSelectors, shouldStringify: false, shouldReturnAllCheckboxVals: false}`

An object to override the default settings.  

`shouldStringify` declares if the returned value should be a string representation of an object or just the object.  

`shouldReturnAllCheckboxVals` declares if checkbox groups (i.e., multiple inputs with the same name) should return an array of only "checked" values, or an object of all inputs with a boolean value.

### getInputElements(formEl, selectorSettings)

The getInputElements method returns an array of input elements as found by the default selectors.

#### formEl

Type: `Element`

The form element to extract inputs from.

#### selectorSettings

Type: `String`

Default: `defaultElementSelectors`

And string representing a comma-separated list of selectors to override any default element selectors.

## Browser Support

formMapper depends on the following browser APIs:

+ matches: [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) | [Polyfill](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill)

As of Febrary 2018, matches is supported in IE9 and up.

To support legacy browsers, you'll need to include polyfills for the above APIs.