
Product
A New Overview in our Dashboard
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
form-serializer
Advanced tools
As seen on StackOverflow: Convert forms to JSON LIKE A BOSS.
Adds the method serializeObject
to jQuery, to perform complex form
serialization into JavaScript objects.
The current implementation relies in jQuery.serializeArray()
to grab the form
attributes and then create the object using the input name
attributes.
This means it will serialize the inputs that are supported by
.serializeArray()
, that use the standard W3C rules for successful controls
to determine which inputs should be included; in particular:
<input type="file">
inputs are not serialized.option 1: Bower
$ bower install jquery-serialize-object
option 2: Manual
Copy the dist/jquery-serialize-object.min.js
to your project.
You can include the plugin in the HEAD
element or at the bottom of your BODY
tag. Wherever you choose to add it, it must be included after your jQuery.
<head>
<script src="jquery.min.js"></script>
<script src="jquery.serialize-object.min.js"></script>
</head>
Version 2.0 takes jquery-serialize-object into maturity. It is now backed by a full test suite so you can be confident that it will work in your web app.
Moving ahead, on top of core serialization, .serializeObject
will support
correct serializaton for boolean
and number
values, resulting valid types
for both cases.
Look forward to these >= 2.5.0
Update: >= 2.4.0
now serializes <input type="checkbox">
as a boolean
. See
the test for specific behavior.
Given a basic HTML form
<form id="contact">
<input name="user[email]" value="jsmith@example.com">
<input name="user[pets][]" type="checkbox" value="cat" checked>
<input name="user[pets][]" type="checkbox" value="dog" checked>
<input name="user[pets][]" type="checkbox" value="bird">
<input type="submit">
</form>
.serializeObject — serializes the selected form into a JavaScript object
$('form#contact').serializeObject();
//=> {user: {email: "jsmith@example.com", pets: ["cat", "dog"]}}
.serializeJSON — serializes the selected form into JSON
$('form#contact').serializeJSON();
//=> '{"user":{"email":"jsmith@example.com","pets":["cat","dog"]}}'
FormSerializer.patterns — modify the patterns used to match field names
Many of you have requested to allow -
in field names or use .
to nest keys.
You can now configure these to your heart's content.
Hyphen example
$.extend(FormSerializer.patterns, {
validate: /^[a-z][a-z0-9_-]*(?:\[(?:\d*|[a-z0-9_-]+)\])*$/i,
key: /[a-z0-9_-]+|(?=\[\])/gi,
named: /^[a-z0-9_-]+$/i
});
Dot-notation example
$.extend(FormSerializer.patterns, {
validate: /^[a-z][a-z0-9_]*(?:\.[a-z0-9_]+)*(?:\[\])?$/i
});
Validating and Key parsing
validate
— only valid input names will be serialized; invalid names
will be skipped
key
— this pattern parses all "keys" from the input name; You will
want to use /g
as a modifier with this regexp.
Key styles
push
— pushe a value to an array
<input name="foo[]" value="a">
<input name="foo[]" value="b">
$("form").serializeObject();
//=> {foo: [a, b]}
fixed
— add a value to an array at a specified index
<input name="foo[2]" value="a">
<input name="foo[4]" value="b">
$("form").serializeObject();
//=> {foo: [, , "a", , "b"]}
named
— adds a value to the specified key
<input name="foo[bar]" value="a">
<input name="foo[bof]" value="b">
<input name="hello" value="world">
$("form").serializeObject();
//=> {foo: {bar: "a", bof: "b"}, hello: "world"}
If you have node.js installed, as a convenience, you can run
$ npm test
If you do not have node installed, simply
$ open ./test/test.html
CoffeeScript has been dropped for >= 2.0.0
. If members of the community would
like to support this, please feel free to add a CoffeeScript version.
If you'd like to use the the 1.0.0
version, it is still available here.
All pull requests must be backed by tests or they will be rejected.
Once you have finished your changes, build the new plugin:
$ npm run-script build
Do not bump the version. I will handle versioning.
FAQs
serialize form fields into an object or JSON
The npm package form-serializer receives a total of 4,970 weekly downloads. As such, form-serializer popularity was classified as popular.
We found that form-serializer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We redesigned Socket's first logged-in page to display rich and insightful visualizations about your repositories protected against supply chain threats.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.