Thursday, February 6, 2014

Get a JSON Object from HTML form

Found this great JS library which can be used to serialize an HTML Form to a JavaScript Object

Example HTML form
<form id="my-form">
  <input type="text" name="name"              value="david" />

  <!-- object -->
  <input type="text" name="address[city]"         value="Melbourne" />
  <input type="text" name="address[state][name]"  value="Victoria" />
  <input type="text" name="address[state][abbr]"  value="VIC" />

Java Script
var jsonData = $('#my-form').serializeJSON();

Return value
  name: "david",

  address: {
    city: "Melbourne",
    state: {
      name: "Victoria",
      abbr: "VIC"


Download the jquery.serializeJSON.min.js( script and include in your page after jQuery, for example:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.serializeJSON.min.js"></script>

Reference :

No comments:

Post a Comment