css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A plain JavaScript example of extracting a form's fields into an object using the field name as the key and the field value as the value. This can work in lieu of things like jQuery's .serialize() or .serializeArray(), which leave something to be desired if we need to work with the form data in JavaScript.


  1. Hi, I just saw your tutorial, and I was wandering how to make it work with multiple sequential forms. I've tried everything I could think of, but wasn't able to get it to work. Thanks

  2. Hi i am so grateful for your tutorial.

    I am using codeigniter, and i was wondering if you maybe have any idea how i can get the json value to my controller?

  3. If you can add in the feature to add fields having array convention like input id="street_1" name="shipping[street][]", input id="street_2" name="shipping[street][]"

  4. Hi there,

    VERY new user here, trying to rapidly learn Java as part of my final year University Group Project. I think I'm following so far, but how would I write the results to file, instead of printing them on screen?

    Thanks Adam

  5. Thanks. I really appreciate this tutorial. It's really clear. Just wondering how to tweak it so that for radio button fields the "label" is added to the object, rather than the "name"?

  6. Hi Jason, Thank you for your shared. It very helpful. However, I want to change result of the "snacks" as below. If the user have not checked to "cake" the result will be empty "".

    { "salutation": "Mr.", "name": "VAN LIEU HOANG", "email": "hoangbienit@gmail.com", "subject": "I have a general question.", "message": "test", "snacks": [ "pizza", "" ], "secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7" }

    How to do that?

    Thank you so much, Bien

  7. Awesome walkthrough Jason! I'm using this on a form I've created, but I need to add a file attachment to go along with it. I'm using Axios and FormData, but can't figure out how to include an attachment in my data object (which is run through your formToJSON function) Any thoughts would be frikkin amazin.

  8. This is a fabulous , so detailed, precise, funny and easy read. Thanks a lot!!!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.