How to add more form fields and data to a serialized AJAX form in JQuery

In a jQuery form post, here is how you add more data to the serialized form data.  This is useful if you find yourself needing to pass some extra data along with the AJAX post.  This is a barebones example of a blind AJAX post to a form handler script called “form_handler.php”.

I find jQuery’s “serialize” and “serializeArray” functions are very efficient when collecting form data, you can’t get much easier than that.  The beauty of using a framework, whether it’s a Javascript framework, or PHP framework, these built-in libraries and functions save coding time.

var data = $('#myForm').serializeArray();

data.push({name: 'wordlist', value: wordlist});

$.post("form_handler.php", data);

I hope this saves someone time!  This solution works well in many different instances you have to post a form through Javascript.

– Aaron  Belchamber

About Author:

Senior Cloud Software Engineer and 25+ years experienced video production, video editing and 3D animation services for a variety of global clients including local video production here in Jacksonville, Florida.

Leave a Comment

Your email address will not be published. Required fields are marked *