0.0.0 • Published 2 years ago
@uppercod/form-tools v0.0.0
@uppercod/form-tools
Transform forms into objects, example:
Module
import { formToObject } from "@uppercod/form-tools";
Syntax
formToObject(defaultData?: Object<string,any> )(target: HTMLFormElement):Object<string,any>
Example
import { formToObject } from "@uppercod/form-tools";
const form = document.createElement("form");
form.innerHTML = /**html */ `
<input type="hidden" name="hidden" value="-1" />
<input type="text" name="name" value="1" />
<input type="checkbox" name="checkbox.1" value="01" />
<input type="checkbox" name="checkbox.2" value="02" checked />
<input type="checkbox" name="checkbox.3" />
<input type="checkbox" name="checkbox.4" checked />
<input type="radio" name="radio.1" value="001" />
<input type="radio" name="radio.1" value="002" />
<input type="radio" name="radio.2" value="001" />
<input type="radio" name="radio.2" value="002" checked />
<select name="options">
<option value="0001"></option>
<option value="0002" selected></option>
<option value="0003"></option>
</select>
<textarea name="textarea">00001</textarea>
`;
formToObject()(form);
// {
// checkbox: { 1: null, 2: "02", 3: false, 4: true },
// hidden: "-1",
// name: "1",
// options: "0002",
// radio: { 1: null, 2: "002" },
// textarea: "00001",
// }
Expressions
formToObject creates the object based on extracts from the name attribute associated with the field, example:
Input:
<input name="user.name" value="UpperCod" />
<input type="checkbox" name="skills[1]" value="js" checkbox />
<input type="checkbox" name="skills[2]" value="css" checkbox />
Output:
{
"user": {
"name": "UpperCod"
},
"skills": ["js", "css"]
}
0.0.0
2 years ago