Javascript Ajax Post Multiple Parameters - 2 Methods

2 Ways you can Post Data to the Server vai Ajax that goes Beyond Just Getting a Form Elements Name and Associated Value - the Possibilities are Limitless of the Data you can Post to PHP/Server for Processing

Method #1 to Post Multiple Parameters via Ajax to Server

An example of the value of this is lets say you want to post, via ajax the values of multiple text input elements to the php/server. For example maybe you want to validate the an input textboxes minlength and maxlength property values are enforced at the server level, simply because its easy for someone to alter and manipulate things on a web page via Google inspect.

Normally when submitting a forms elements values to the server we think mainly of the elements name="" property and its value. For example, when using the formData() object ...

let fd = new formData(); // lets assume the input elements we want to ajax post have the class="send" document.querySelectorAll(".send").forEach((el) => { fd.append(el.name, el,value); });

But what if we want the server to have more data about each of the elements, like as previously mentioned minlength and maxlength?

The answer is our good ole friendly function JSON.stringify which converts a Javascript object into a string. We will assume that the input elements we want to post to the server the ones with the class="send" have a minlength and maxlength property minlength="5" maxlength="15"

Let's assume the element values we want to submit to the server via Ajax look like this:

<input class="send" minlength="2" maxlength="12" name="firstname" type="text" value="jon" > <input class="send" minlength="4" maxlength="15" name="lastname" type="text" value="jones" > <input class="send" minlength="12" maxlength="40" name="email" type="text" value="jonjones@gmail.com">

Here is how to do that.

let fd = new formData(); document.querySelectorAll(".send").forEach((el) => { const name = elem.name, value = elem.value.trim(), // precaution against errors in case elem does not have a maxlength or minlength minlen = (elem.hasAttribute("minlength") ? elem.getAttribute("minlength") : null), maxlen = (elem.hasAttribute("maxlength") ? elem.getAttribute("maxlength") : null); fd.append(name, JSON.stringify({ value, minlen, maxlen })); });

If we run the following Javascript code to view what the formData looks like ...

for (const [key, value] of fd.entries()) { console.log(key, value); }

We will see something like this:

firstname {"value":"jon","minlen":"2","maxlen":"12"} lastname {"value":"jones","minlen":"4","maxlen":"15"} email {"value":"jonjones@gmail.com","minlen":"12","maxlen":"40"}

Process Multiple Form Data Parameters at the Server/PHP

function securityClean(string $data) { // Remove HTML tags $data = strip_tags($data); // Remove slashes $data = stripslashes($data); // Convert certain characters to HTML entities $data = htmlentities($data, ENT_QUOTES, 'UTF-8'); // Add slashes to special characters $data = addslashes($data); // Trim whitespace return trim($data); } /* remember in this example the data that will be post to php/server will be firstname {"value":"jon","minlen":"2","maxlen":"12"} lastname {"value":"jones","minlen":"4","maxlen":"15"} email {"value":"jonjones@gmail.com","minlen":"12","maxlen":"40"} */ if ($_SERVER["REQUEST_METHOD"] == "POST") { foreach ($_POST as $key => $jsonValue) { /* convert [$decodedValue] (JSON string) to a PHP associative array. 2nd parameter (true) ensures [$decodedValue] is an associative array. */ $decodedValue = json_decode($jsonValue, true); // Check if decoding was successful if (is_array($decodedValue)) { // Clean each value in the decoded array foreach ($decodedValue as $innerKey => $innerValue) { // Assuming [$innerValue] is a scalar value (string, number, etc.) if (is_scalar($innerValue)) { $decodedValue[$innerKey] = securityClean($innerValue); // security clean } } // re-encode the cleaned array back to JSON $arrPost[$key] = json_encode($decodedValue); } else { // If decoding fails, clean the raw JSON string $arrPost[$key] = securityClean($jsonValue); // security clean } } //=> foreach($_POST as $key => $jsonValue) } //=> if ($_SERVER["REQUEST_METHOD"] == "POST") /* At this point you can check and enforce minlength and maxlength of each of the elements values posted with ajax with a php function <code>validateInput()</code> like so ... */ function validateInput($input) { $errors = []; foreach ($input as $key => $value) { $data = json_decode($value, true); if (isset($data["minlen"]) && strlen($data["value"]) < $data["minlen"]) { $errors[] = "$key is shorter than the minimum length of " . $data["minlen"]; } if (isset($data["maxlen"]) && strlen($data["value"]) > $data["maxlen"]) { $errors[] = "$key is longer than the maximum length of " . $data["maxlen"]; } } return $errors; } $errors = validateInput($arrPost); if (!empty($errors)) { // Handle validation errors (e.g., return them to the client) echo json_encode(["errors" => $errors]); exit(); }

Method #2 to Post Multiple Parameters via Ajax to Server

While the first method to post multiple parameters to the server meets more with the coding purists approval, this second method of posting multiple data to the server meets more with my approval because it is just simple and there is less code.

This second method simply involves separating each of the parameters you with to ajax post to the server with a pipe character |.

let fd = new formData(); document.querySelectorAll(".send").forEach((el) => { const name = elem.name, value = elem.value.trim()), // if elem does not have min or maxlength return "" minlen = (elem.hasAttribute("minlength") ? elem.getAttribute("minlength") : ""), maxlen = (elem.hasAttribute("maxlength") ? elem.getAttribute("maxlength") : ""); fd.append(name, value + "|" + minlen + "|" + maxlen); });

Processing this ajax submission via php at the server is also easiers.

function securityClean(string $data) { // Remove HTML tags $data = strip_tags($data); // Remove slashes $data = stripslashes($data); // Convert certain characters to HTML entities $data = htmlentities($data, ENT_QUOTES, 'UTF-8'); // Add slashes to special characters $data = addslashes($data); // Trim whitespace return trim($data); } /* in this example the data that will be post to php/server in keeping with the data provided in example #1, will be jon|2|12 jones|4|15 jonjones@gmail.com|12|40 */ if ($_SERVER["REQUEST_METHOD"] == "POST") { foreach($_POST as $key => $value) { // trim each of the returned values after explode [$value, $minlen, $maxlen] = array_map("trim", explode("|", $value)); // validate and clean each value $value = securityClean($value, 200); // Store the values in the $arrPost array $arrPost[$key] = [ "value" => $value, "minlen" => $minlen, "maxlen" => $maxlen ]; } //=> foreach($_POST as $key => $value) } //=> if ($_SERVER["REQUEST_METHOD"] == "POST") /* At this point you can check and enforce minlength and maxlength of each of the elements values posted with ajax with a php function <code>validateInput()</code> like so ... */ function validateInput($input) { $errors = []; foreach ($input as $key => $value) { if (strlen($value["minlen"]) > 0) && strlen($value["value"]) < $value["minlen"]) { $errors[] = "$key is shorter than the minimum length of " . $value["minlen"]; } if (strlen($value["maxlen"]) > 0) && strlen($value["value"]) > $value["maxlen"]) { $errors[] = "$key is longer than the maximum length of " . $value["maxlen"]; } } return $errors; } $errors = validateInput($arrPost); if (!empty($errors)) { // Handle validation errors (e.g., return them to the client) echo json_encode(["errors" => $errors]); exit(); }

My personal opinion is the second way is just a whole lot simpler and easier to understand and maintain and is a lot less lines of code as well.