code-boxx/0-PHP-POST-ARRAY.MD

## 0-PHP-POST-ARRAY.MD

      
    Raw
  

              0-PHP-POST-ARRAY.MD
            
          
    POST ARRAY FROM HTML TO PHP

https://code-boxx.com/post-array-html-form/
LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## 1a-basic.html
<!DOCTYPE html>
<html>
  <head>
    <title>POST Array To PHP</title>
    <link rel="stylesheet" href="x-dummy.css">
  </head>
  <body>
    <!-- JUST APPEND [] TO THE NAME -->
    <form method="post" action="1b-basic.php">
      <label>Favorite Colors</label>
      <input type="text" name="colors[]" required value="red">
      <input type="text" name="colors[]" required value="green">
      <input type="text" name="colors[]" required value="blue">
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

## 1b-basic.php
<?php
// (A) $_POST WILL CONTAIN ALL THE POSTED FORM DATA AS USUAL
print_r($_POST);

// (B) BUT $_POST["COLORS"] WILL BE AN ARRAY
foreach ($_POST["colors"] as $color) {
  echo "$color<br>";
}

## 2a-nested.html
<!DOCTYPE html>
<html>
  <head>
    <title>POST Multi-dimension Array</title>
    <link rel="stylesheet" href="x-dummy.css">
  </head>
  <body>
    <!-- USE NAME[KEY][] TO SPECIFY MULTI-DIMENSION ARRAYS -->
    <form method="post" action="2b-nested.php">
      <label>Favorite Colors</label>
      <input type="text" name="fav[color][]" required value="red">
      <input type="text" name="fav[color][]" required value="green">
      <input type="text" name="fav[color][]" required value="blue">

      <label>Favorite Food</label>
      <input type="text" name="fav[food][]" required value="bacon">
      <input type="text" name="fav[food][]" required value="eggs">

      <input type="submit" value="Submit">
    </form>
  </body>
</html>

## 2b-nested.php
<?php
// (A) $_POST["fav"] IS A MULTI-DIMENSIONAL ARRAY
print_r($_POST["fav"]);

// (B) FAVORITE COLORS
print_r($_POST["fav"]["color"]);

// (C) FAVORITE FOOD
print_r($_POST["fav"]["food"]);

## 3a-AJAX.html
<!DOCTYPE html>
<html>
  <head>
    <title>AJAX POST Array</title>
    <link rel="stylesheet" href="x-dummy.css">
    <script src="3b-AJAX.js"></script>
  </head>
  <body>
    <form id="myForm" method="post" onsubmit="return save()">
      <label>Favorite Colors</label>
      <input type="text" name="fav[color][]" required value="red">
      <input type="text" name="fav[color][]" required value="green">
      <input type="text" name="fav[color][]" required value="blue">

      <label>Favorite Food</label>
      <input type="text" name="fav[food][]" required value="bacon">
      <input type="text" name="fav[food][]" required value="eggs">

      <input type="submit" value="Submit">
    </form>
  </body>
</html>

## 3b-AJAX.js
function save () {
  // (A) GET FORM DATA
  var form = document.getElementById("myForm"),
      data = new FormData(form);

  // (B) TO MANUALLY APPEND MORE DATA
  data.append("address[]", "Foo Street 123");
  data.append("address[]", "Hello World #234");

  // (C) AJAX FETCH
  fetch("3c-AJAX.php", { method:"POST", body:data })
  .then(res => res.text())
  .then(res => {
    console.log(res);
    // DO SOMETHING
  });
  return false;
}

## 3c-AJAX.php
<?php
print_r($_POST);

## 4a-JSON.html
<!DOCTYPE html>
<html>
  <head>
    <title>JSON Send Array</title>
    <link rel="stylesheet" href="x-dummy.css">
    <script>
    // (A) ARRAY TO STRING
    var colors = ["Red", "Green", "Blue"];
    colors = JSON.stringify(colors);
    console.log(colors); // ["Red","Green","Blue"]

    // (B) APPEND DATA
    var data = new FormData();
    data.append("colors", colors);

    // (C) SEND!
    fetch("4b-JSON.php", { method:"POST", body:data })
    .then(res => res.text())
    .then(txt => console.log(txt));
    </script>
  </head>
  <body>
  </body>
</html>

## 4b-JSON.php
<?php
$colors = json_decode($_POST["colors"]);
print_r($colors);

## x-dummy.css
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body {
  padding: 10px;
  max-width: 500px;
}
form {
  padding: 15px;
  border: 1px solid #dfdfdf;
  background: #f5f5f5;
}
input, label {
  display: block;
  width: 100%;
}
label { padding: 10px 0; }
input {
  padding: 10px;
  margin: 10px 0;
}
input[type=text] {
  color: #6e6e6e;
  border: 1px solid #c5c5c5;
}
input[type=submit] {
  margin-top: 20px;
  border: 0;
  color: #fff;
  background: #515fc7;
  cursor: pointer;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>POST Array To PHP</title>
	<link rel="stylesheet" href="x-dummy.css">
	</head>
	<body>
	<!-- JUST APPEND [] TO THE NAME -->
	<form method="post" action="1b-basic.php">
	<label>Favorite Colors</label>
	<input type="text" name="colors[]" required value="red">
	<input type="text" name="colors[]" required value="green">
	<input type="text" name="colors[]" required value="blue">
	<input type="submit" value="Submit">
	</form>
	</body>
	</html>
	<?php
	// (A) $_POST WILL CONTAIN ALL THE POSTED FORM DATA AS USUAL
	print_r($_POST);

	// (B) BUT $_POST["COLORS"] WILL BE AN ARRAY
	foreach ($_POST["colors"] as $color) {
	echo "$color<br>";
	}
	<?php
	// (A) $_POST["fav"] IS A MULTI-DIMENSIONAL ARRAY
	print_r($_POST["fav"]);

	// (B) FAVORITE COLORS
	print_r($_POST["fav"]["color"]);

	// (C) FAVORITE FOOD
	print_r($_POST["fav"]["food"]);
	function save () {
	// (A) GET FORM DATA
	var form = document.getElementById("myForm"),
	data = new FormData(form);

	// (B) TO MANUALLY APPEND MORE DATA
	data.append("address[]", "Foo Street 123");
	data.append("address[]", "Hello World #234");

	// (C) AJAX FETCH
	fetch("3c-AJAX.php", { method:"POST", body:data })
	.then(res => res.text())
	.then(res => {
	console.log(res);
	// DO SOMETHING
	});
	return false;
	}
	<?php
	$colors = json_decode($_POST["colors"]);
	print_r($colors);
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	body {
	padding: 10px;
	max-width: 500px;
	}
	form {
	padding: 15px;
	border: 1px solid #dfdfdf;
	background: #f5f5f5;
	}
	input, label {
	display: block;
	width: 100%;
	}
	label { padding: 10px 0; }
	input {
	padding: 10px;
	margin: 10px 0;
	}
	input[type=text] {
	color: #6e6e6e;
	border: 1px solid #c5c5c5;
	}
	input[type=submit] {
	margin-top: 20px;
	border: 0;
	color: #fff;
	background: #515fc7;
	cursor: pointer;
	}