Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the POST values from serializeArray in PHP?
The jQuery serializeArray() method serializes form elements into a JSON array of name-value pairs. When sent via $.post(), PHP receives these values through the $_REQUEST or $_POST superglobal.
PHP Backend (serialize.php)
This file receives and displays the POST values ?
<?php
if (isset($_REQUEST["name"])) {
$name = $_REQUEST['name'];
echo "Welcome " . htmlspecialchars($name);
$age = $_REQUEST['age'];
echo "<br>Your age: " . htmlspecialchars($age);
$sex = $_REQUEST['sex'];
echo "<br>Your gender: " . htmlspecialchars($sex);
}
?>
jQuery Frontend (HTML)
The form collects user data and sends it using serializeArray() ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#driver").click(function(event) {
// Send serialized form data via POST
$.post(
"/jquery/serialize.php",
$("#testform").serializeArray(),
function(data) {
$('#stage1').html(data);
}
);
// Display values locally
var fields = $("#testform").serializeArray();
$("#stage2").empty();
jQuery.each(fields, function(i, field) {
$("#stage2").append(field.value + " ");
});
});
});
</script>
</head>
<body>
<form id="testform">
Name: <input type="text" name="name" size="40"><br>
Age: <input type="text" name="age" size="40"><br>
Sex: <select name="sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br><br>
<input type="button" id="driver" value="Load Data">
</form>
<div id="stage1" style="background-color:maroon; color:white; padding:10px; margin:10px 0;">
STAGE 1 - Server Response
</div>
<div id="stage2" style="background-color:maroon; color:white; padding:10px;">
STAGE 2 - Local Values
</div>
</body>
</html>
How serializeArray() Works
The serializeArray() method returns an array of objects, each with name and value properties ?
[
{ "name": "name", "value": "John" },
{ "name": "age", "value": "25" },
{ "name": "sex", "value": "Male" }
]
When passed to $.post(), jQuery converts this into standard POST parameters that PHP reads via $_REQUEST['name'], $_REQUEST['age'], and $_REQUEST['sex'].
Conclusion
Use jQuery's serializeArray() to convert form data into a JSON array of name-value pairs, then send it via $.post(). PHP receives these values through $_REQUEST or $_POST like any standard form submission. Ensure all form fields have a name attribute for serialization to work.
3K+ Views
