javascript - How do I convert a standard HTML form to JSON representation that includes all data?

I have a simple HTML form:

<form id="formid1" action="#" method="post">
    <table>
        <tr><td> First name: </td><td><input type="text" name="firstname" id="firstname"/>  </td></tr>
        <tr><td>  Last name: </td><td><input type="text" name="lastname" id="lastname"/>  </td></tr>
        <tr><td> Address:  </td><td> <input type="text" name="address" id="address"/> </td></tr>
        <tr><td> Zip: </td><td> <input type="text" name="zip" id="zip"/> </td></tr>
        <tr><td> Sex:  </td><td> <input type="radio" name="sex" value="male" /> Male<br />
            <input type="radio" name="sex" value="female" /> Female<br /></td></tr>

        <tr><td>  </td><td>  <input type="submit" value="Submit" /></td></tr>

    </table>
</form>

I need to get a JSON representation of the Form elements including id, value, type, form action, form id etc.

I tried playing with the following code but I am not getting what I am looking for:

<script>
$(document).ready(function(){

    var encoded = $.toJSON($('#formid1')); 

    $("#formid1").submit(function() {
  $.colorbox({html:'<p>Form Converted to JSON Data: <br /><br /><br /><br /><br /></p>'+ encoded  });
      return false;
    });

    });
</script>

I get:

{"length":1,"0":{"firstname":{},"lastname":{},"address":{},"zip":{},"sex":{"0":{},"1":{}},"6":{}},"context":{"jQuery16108216209608688556":1},"selector":"#formid1"}

I have a simple HTML form:

<form id="formid1" action="#" method="post">
    <table>
        <tr><td> First name: </td><td><input type="text" name="firstname" id="firstname"/>  </td></tr>
        <tr><td>  Last name: </td><td><input type="text" name="lastname" id="lastname"/>  </td></tr>
        <tr><td> Address:  </td><td> <input type="text" name="address" id="address"/> </td></tr>
        <tr><td> Zip: </td><td> <input type="text" name="zip" id="zip"/> </td></tr>
        <tr><td> Sex:  </td><td> <input type="radio" name="sex" value="male" /> Male<br />
            <input type="radio" name="sex" value="female" /> Female<br /></td></tr>

        <tr><td>  </td><td>  <input type="submit" value="Submit" /></td></tr>

    </table>
</form>

I need to get a JSON representation of the Form elements including id, value, type, form action, form id etc.

I tried playing with the following code but I am not getting what I am looking for:

<script>
$(document).ready(function(){

    var encoded = $.toJSON($('#formid1')); 

    $("#formid1").submit(function() {
  $.colorbox({html:'<p>Form Converted to JSON Data: <br /><br /><br /><br /><br /></p>'+ encoded  });
      return false;
    });

    });
</script>

I get:

{"length":1,"0":{"firstname":{},"lastname":{},"address":{},"zip":{},"sex":{"0":{},"1":{}},"6":{}},"context":{"jQuery16108216209608688556":1},"selector":"#formid1"}

Share Improve this question edited Aug 12, 2013 at 14:22 rink.attendant.6 46.3k64 gold badges110 silver badges157 bronze badges asked Aug 24, 2011 at 19:39 Strong Like Bull 11.3k37 gold badges101 silver badges169 bronze badges

In this example what would you like your JSON to look like? – Ali Commented Aug 24, 2011 at 19:45
possible duplicate of Convert form data to JS object with jQuery – Jasper Commented Apr 23, 2014 at 17:55
possible duplicate of Serialize plex form to JSON object using jQuery – Paul Sweatte Commented Oct 6, 2014 at 19:09

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Try this:

$('#formid1').serializeArray().reduce(function(obj, v) { obj[v.name] = v.value; return obj; }, { });

Hi I'm working on the same problem! The way I went around it was by using an onsubmit function rather than action. You pass everything within the form to a javascript function which then gives you access to the form data. The function I made uses an alert to show you have access to that data. Here's the code:

<html>
<body>

<form onsubmit="handleForm(this)">
<table>
    <tr><td> First name: </td><td><input type="text" name="firstname"  id="firstname"/>  </td></tr>
    <tr><td>  Last name: </td><td><input type="text" name="lastname" id="lastname"/>  </td></tr>
    <tr><td> Address:  </td><td> <input type="text" name="address" id="address"/> </td></tr>
    <tr><td> Zip: </td><td> <input type="text" name="zip" id="zip"/> </td></tr>
    <tr><td> Sex:  </td><td> <input type="radio" name="sex" value="male" /> Male<br />
        <input type="radio" name="sex" value="female" /> Female<br /></td></tr>

    <tr><td>  </td><td>  <input type="submit" value="Submit" /></td></tr>

</table>
</form>

<script>
function handleForm(arr) {
    alert(arr['firstname'].value + arr['lastname'].value);
}
</script>

</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I convert a standard HTML form to JSON representation that includes all data? - Stack Overflow

2 Answers 2