serializeObject
This jquery plugin will map the serialized form data array to JSON Object.
Dependency
- jquery library.
To Get Started
- import the jquery library.
- import the jquery.serializeObject.js plugin.
First Usage
$( "form" ).serializeObject();
Second Usage
var rFormat = {
id: 0,
name: "John Doe"
};
$( "form" ).serializeObject( { requiredFormat: rFormat } );
Example 01
<form>
<input type="text" name="txt01" value="Text 01" />
<input type="text" name="txt02" value="Text 02" />
<input type="submit" value="Submit" />
</form>
<script>
( function( $ ){
$( document ).ready( function(){
$( "form" ).submit( function( e ) {
e.preventDefault();
var jsonObject = $( this ).serializeObject();
console.log( jsonObject );
} );
} );
} )( jQuery );
</script>
Example 01: Console Output
Object {
txt01: "Text 01",
txt02: "Text 02"
}
Example 02
<form>
<input type="text" name="txt01[]" value="Text 01" />
<input type="text" name="txt01[]" value="Text 02" />
<input type="submit" value="Submit" />
</form>
<script>
( function( $ ){
$( document).ready( function(){
$( "form" ).submit( function( e ) {
e.preventDefault();
var jsonObject = $( this ).serializeObject();
console.log( jsonObject );
} );
} );
} )( jQuery );
</script>
Example 02: Console Output
Object {
txt01: Array(2) {
0: "Text 01",
1: "Text 02"
}
}
Example 03
<form>
<input type="text" name="txt01[name][]" value="Text 01" />
<input type="text" name="txt01[name][]" value="Text 02" />
<input type="text" name="txt01[phone][]" value="000001" />
<input type="text" name="txt01[phone][]" value="000002" />
<input type="submit" value="Submit" />
</form>
<script>
( function( $ ){
$( document ).ready( function(){
$( "form" ).submit( function( e ) {
e.preventDefault();
var jsonObject = $( this ).serializeObject();
console.log( jsonObject );
} );
} );
} )( jQuery );
</script>
Example 03: Console Output
Object
{
txt01: Object
{
name: Array()
{
0: Text 01
1: Text 02
},
phone: Array()
{
0: 000001
1: 000002
}
}
}
Example 04
<form>
<input type="text" name="txt01[][name]" value="Text 01" />
<input type="text" name="txt01[][phone]" value="000001" />
<input type="text" name="txt01[][name]" value="Text 02" />
<input type="text" name="txt01[][phone]" value="000002" />
<input type="submit" value="Submit" />
</form>
<script>
( function( $){
$( document ).ready( function(){
$( "form" ).submit( function( e ) {
e.preventDefault();
var jsonObject = $( this ).serializeObject();
console.log( jsonObject );
} );
} );
} )( jQuery );
</script>
Example 04: Console Output
Object
{
txt01: Array(2)
{
0: Object
{
name: Text 01
phone: 000001
},
1: Object
{
name: Text 02
phone: 000002
}
}
}
Example 05
<form>
<input type="text" name="txt01[][name]" value="Text 01" />
<input type="text" name="txt01[][phone]" value="000001" />
<input type="text" name="txt01[][name]" value="Text 02" />
<input type="text" name="txt01[][phone]" value="000002" />
<input type="submit" value="Submit" />
</form>
<script>
(function( $ ){
$( document ).ready( function(){
$( "form" ).submit( function( e ) {
e.preventDefault();
var reqFormat = {
id: 0,
company: "ACN"
};
var jsonObject = $( this ).serializeObject( { requiredFormat: reqFormat } );
console.log(jsonObject);
} );
} );
})( jQuery );
</script>
Example 05: Console Output
Object
{
id: 0,
company: "ACN",
txt01: Array(2)
{
0: Object
{
name: Text 01
phone: 000001
},
1: Object
{
name: Text 02
phone: 000002
}
}
}