Serializing Form Data
In this page:
What is serialize()?
serialize() walks a form's named inputs and encodes their current values into a single URL-encoded query string, the same format a browser would generate for a traditional form submission. This makes it easy to capture an entire form's state in one call.
Example: What is serialize()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input name="q" value="hello"></form>
<script>
console.log($("#myForm").serialize());
</script>
</body>
</html>Serialize Form Inputs
Only named, successful form controls are included in the serialized string, so every input that should be submitted needs a name attribute. An input without a name is silently skipped, which is a common source of confusion when a value seems to go missing.
Example: Serialize Form Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input name="q" value="hello"><input value="ignored, no name"></form>
<script>
console.log($("#myForm").serialize());
</script>
</body>
</html>Serialize Checkboxes and Radios
Checked checkboxes and selected radio buttons are included when they have names, but unchecked checkboxes are left out of the string entirely rather than being sent as false. This matches native browser form-submission behavior, so server-side code that expects standard form encoding will work correctly.
Example: Serialize Checkboxes and Radios
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input type="checkbox" name="subscribe" checked><input type="checkbox" name="promo"></form>
<script>
console.log($("#myForm").serialize());
</script>
</body>
</html>Send Serialized Data
The serialized string can be sent to a server with an AJAX POST request, most commonly through $.post() or $.ajax(), reproducing a normal form submission without a page reload. This is a common pattern for submitting forms via AJAX while keeping the user on the same page.
Example: Send Serialized Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input name="q" value="hello"></form>
<script>
$.post("data.php", $("#myForm").serialize(), function(response) {
console.log(response);
});
</script>
</body>
</html>Small Form Project
serialize() is useful for contact forms, registration forms, feedback forms, and search forms -- any form whose values need to be captured and sent as a whole rather than field by field. It saves manually building a query string out of each individual input's value.
Example: Small Form Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="contactForm"><input name="email" value="[email protected]"><input name="message" value="Hi"></form>
<script>
const data = $("#contactForm").serialize();
console.log(data);
</script>
</body>
</html>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: