Top Related Projects
Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays.
Quick Overview
jQuery-serialize-object is a lightweight jQuery plugin that extends the functionality of jQuery's serialize method. It allows you to easily convert form data into a JavaScript object or a JSON string, making it simpler to work with form submissions in JavaScript applications.
Pros
- Easy to use and integrate with existing jQuery projects
- Lightweight and has minimal dependencies (only requires jQuery)
- Supports nested object structures for complex forms
- Customizable through options and patterns
Cons
- Requires jQuery, which may not be ideal for modern projects moving away from jQuery
- Limited maintenance and updates (last significant update was in 2017)
- May not handle all edge cases or complex form structures perfectly
- Lacks built-in form validation features
Code Examples
- Basic usage to serialize a form into an object:
var formData = $('form').serializeObject();
console.log(formData);
- Serializing a form into a JSON string:
var jsonData = $('form').serializeObject({
serializer: JSON.stringify
});
console.log(jsonData);
- Using custom patterns to modify serialization behavior:
var formData = $('form').serializeObject({
patterns: {
validate: /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
key: /[a-zA-Z0-9_]+|(?=\[\])/g,
push: /^$/,
fixed: /^\d+$/,
named: /^[a-zA-Z0-9_]+$/
}
});
console.log(formData);
Getting Started
- Include jQuery and jquery-serialize-object in your HTML:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-serialize-object@2.5.0/dist/jquery.serialize-object.min.js"></script>
- Use the plugin in your JavaScript code:
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
var formData = $(this).serializeObject();
console.log(formData);
// Process the form data as needed
});
});
This setup allows you to serialize your form data into a JavaScript object when the form is submitted, which you can then use for further processing or sending to a server.
Competitor Comparisons
Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays.
Pros of jquery.serializeJSON
- Supports nested objects and arrays in form serialization
- Allows custom parsing of values (e.g., parsing numbers or booleans)
- Provides options for handling unchecked checkboxes and empty form elements
Cons of jquery.serializeJSON
- Slightly more complex API compared to jquery-serialize-object
- May have a larger file size due to additional features
- Requires more configuration for advanced use cases
Code Comparison
jquery.serializeJSON:
$('form').serializeJSON({
parseNumbers: true,
parseBooleans: true,
checkboxUncheckedValue: 'false'
});
jquery-serialize-object:
$('form').serializeObject();
The jquery.serializeJSON example demonstrates its ability to parse numbers and booleans, as well as handle unchecked checkboxes. In contrast, jquery-serialize-object offers a simpler API with fewer options but may require additional processing for advanced serialization needs.
Both libraries serve the purpose of serializing form data into JSON objects, but jquery.serializeJSON provides more built-in features for handling complex form structures and data types. jquery-serialize-object, on the other hand, offers a more straightforward approach that may be sufficient for simpler use cases or when custom post-processing is preferred.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
jQuery Serialize Object
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:
- The input cannot be disabled and must contain a name attribute.
- No submit button value is serialized since the form is not submitted using a button.
- Data from
<input type="file">inputs are not serialized.
Installation
option 1: NPM
$ npm install form-serializer
option 2: Bower
$ bower install jquery-serialize-object
option 3: 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>
2.0
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.
API
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/gas a modifier with this regexp.
Key styles
-
push— push 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"}
Tests
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
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.
Contributing
See : CONTRIBUTING
Top Related Projects
Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot