JAVASCRIPT
All samples are using Ink.requireModules
, please read how to use it at Ink.requireModules section
Two way serialization of form data and javascript objects. Valid applications are ad hoc AJAX/syndicated submission of forms, restoring form values from server side state, etc.
Function name | Description |
---|---|
.asPairs(form, [options]) | Like serialize , but returns an array of [fieldName, value] pairs. |
.fillIn(form, map2) | Sets form elements' values with values from an object |
.serialize(form, [options]) | Serializes a form element into a JS object |
Like serialize
, but returns an array of [fieldName, value] pairs.
form
Form elementoptions
Options object, containing:options.elements
Instead of returning an array of [fieldName, value] pairs, return an array of [fieldName, value, fieldElement] triples.options.emptyArray
What to emit as the value of an empty select[multiple]. If you don't pass this option, nothing comes out.options.outputUnchecked
falseWhether to emit unchecked checkboxes and unselected radio buttons.Sets form elements' values with values from an object
Note: You can't set the values of an input with type="file"
(browser prohibits it)
form
Form element to be populatedmap2
Mapping of fields to values contained in fields. Can be a hash (keys as names, strings or arrays for values), or an array of [name, value] pairs.Code
<form id="form">
<input type="text" name="textfield">
<input type="radio" name="radio" value="1">
<input type="radio" name="radio" value="2">
<input type="checkbox" name="check[]" value="1">
<input type="checkbox" name="check[]" value="2">
<button type="submit">Submit</button>
</form>
<script>
Ink.requireModules(['Ink.Dom.FormSerialize_1'], function(FormSerialize) {
var form = Ink.i('form');
var toFillForm = {
textfield: 'foobar',
radio: "2",
"check[]": ["1"]
};
FormSerialize.fillIn(form, toFillForm);
});
</script>
Serializes a form element into a JS object
It turns field names (not IDs!) into keys and field values into values.
note: Multi-select and checkboxes with multiple values will result in arrays
form
Form element to extract dataoptions
Options object, containing:options.outputUnchecked
falseWhether to emit unchecked checkboxes and unselected radio buttons.Code
<form id="form">
<input type="text" name="textfield" value="foo">
<input type="radio" name="radio" value="1">
<input type="radio" name="radio" value="2" checked>
<input type="checkbox" name="check[]" value="1" checked>
<input type="checkbox" name="check[]" value="2" checked>
<button type="submit">Submit</button>
</form>
<script>
Ink.requireModules(['Ink.Dom.FormSerialize_1', 'Ink.Dom.Event_1'], function(FormSerialize, InkEvent) {
var form = Ink.i('form');
InkEvent.observe(form, 'submit', function(event){
InkEvent.stopDefault(event);
var oSerialize = FormSerialize.serialize(form);
Ink.log(oSerialize);
// {
// textfield: "foo",
// radio: "2",
// check: ["1", "2"]
// }
});
});
</script>