• Stars
    star
    149
  • Rank 247,224 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 13 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Encode a set of form elements as a JSON object for manipulation/submission.

Build Status

What is it?

$.serializeObject is a variant of existing $.serialize method which, instead of encoding form elements to string, converts form elements to a valid JSON object which can be used in your JavaScript application.

Why?

Whilst it isn't necessary in most cases, and by that I mean 99.99% kind of most, there are times when we manipulate form data on client side. Personally I find JSON much easier to work with than DOM or string manipulation.

How do I use it?

If you want to see the code and demo first: http://jsfiddle.net/davidhong/PRpJT/

Simply include the jQuery.serializeObject.js along with any jQuery instance and use it like $.serialize.

If you have a form like the following:

<form id="minutes">
	<input type="text" name="subject">
	<input type="text" name="minute-taker">
	<!-- ... -->
	<input type="checkbox" name="attendees" value="David" checked="checked">
	<input type="checkbox" name="attendees" value="Daniel" checked="checked">
	<input type="checkbox" name="attendees" value="Darwin" checked="checked">
</form>

and wish to convert them to a JSON object:

var minutes = $('form#minutes').serializeObject();

will return:

{
	"subject": "",
	"minute-taker": "",
	"attendees": [
		"David",
		"Daniel",
		"Darwin"
	]
}

Change log

2.0.3

  • Add MIT License

2.0.2

  • Add support for $.noConflict mode

2.0.0

Major version change: Camel casing of names have been removed. Please use version 1.0.4 if you require camel casing of names.

  • Remove $.data like camelCasing on names

1.0.4

  • Fix an issue (#2) where arrays longer than 2 resulted in incorrect values

Known issues

Bitdeli Badge

More Repositories

1

react-number-input

React input field component designed to display formatted currency values
JavaScript
86
star
2

k2

Koa2 API template with passport, GraphQL, flowtype, knex and more.
JavaScript
49
star
3

statik

A simple and easy-to-use static file server written on Node.js.
JavaScript
24
star
4

Backbone.LinkedCollection

Backbone.js plugin to make Backbone.Collection smarter. Consumes Link field (RFC 5988) in the HTTP Response header to enable Web Linking between partial list resources.
JavaScript
10
star
5

jshint-teamcity

JSHint TeamCity Reporter which group by files using TeamCity Test Suites
JavaScript
7
star
6

learninglocker

Learning Locker LRS docker container
Shell
6
star
7

EpicEditor-demos

EpicEditor usage examples
JavaScript
4
star
8

aws-xray-sdk-koa

AWS X-Ray Middleware for Koa (Javascript)
JavaScript
3
star
9

Speedstar

Safari extension to control Netflix, Youtube video playback speed
JavaScript
3
star
10

scrooge

The best mortgage calculation tool ever made in CoffeeScript, doesn't quite handle all screen sizes yet…
JavaScript
3
star
11

react-collapsible-mixin

React.js based collapsible/expandable element (follows Bootstrap convention)
JavaScript
2
star
12

docker-compose-collection

Collection of docker-compose files to be deployed on Docker Cloud or Rancher
2
star
13

auth0-logs-to-google-cloud

Auth0 extension to send logs to Google Cloud Logging/Stack Driver.
JavaScript
2
star
14

hongy.number-input.js

Non Standard Angular HTML5 Number input with thousand separators
JavaScript
1
star
15

ng-range-slider

Angular element directive for creating cross browser range input i.e., `input[type=range]`
JavaScript
1
star
16

jesspresso

Simple JavaScript based Presentation Clientware using Sammy.js
JavaScript
1
star
17

glossy-rails

First attemp at creating rails application. Glossy allows people to create, read, update and delete definitions – alas Glossary. Any findings and opinions will be noted on `README.md`
JavaScript
1
star