PHP jQuery add field to list multiple fields - php

Question

I got a code where you can add field inputs to a list, and then echo it out. What I'm looking for is a way of having a total of 3 fields. I not sure how to do it with the loop and so on, since the name of the field is the loop itself.
<?php
if(isset($_REQUEST['submit'])){
$field_values_array = $_REQUEST['field_name'];
foreach($field_values_array as $value){
echo $value;
}
}
?>
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><img src="remove-icon.png"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){ //Check maximum number of input fields
x++; //Increment field counter
$(wrapper).append(fieldHTML); // Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
</script>
<div class="field_wrapper">
<div>
<input type="text" name="field_name[]" value=""/>
<img src="add-icon.png"/>
</div>
</div>
Edit: 3 inputs instead of one being echoed out at the same row, and will be looped out as one. Something like an array $array[0],$array[1],$array[2]
I tried this solution, but doesn't work:
<?php
if(isset($_REQUEST['submit'])){
$field_values_array = $_REQUEST['field_name']." - ".$_REQUEST['field_name2']." - ".$_REQUEST['field_name3'];
foreach($field_values_array as $value){
echo $value;
}
}
?>

Answer 1

This is how you loop through each value in a $_REQUEST and get all values where the name is equal to field_name.
<?php
if(isset($_REQUEST['submit'])){
foreach ($_REQUEST as $parent => $value) { //Loop over $_REQUEST
if($parent == "field_name")
{
foreach ($_REQUEST[$parent] as $key=> $item){
//You can check if $item is empty
if(!empty($item))
{
echo "field_name[".$key ."] => ".$item."<br/>";
}
}
}
}
}
?>
<script type="text/javascript">
$(document).ready(function(){
var maxField = 10;
//Input fields increment limitation
var addButton = $('.add_button');
//Add button selector
var wrapper = $('.field_wrapper');
//Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/>X</div>';
//New input field html
var x = 1;
//Initial field counter is 1
$(addButton).click(function(){
//Once add button is clicked
if(x < maxField){
//Check maximum number of input fields
x++;
//Increment field counter
$(wrapper).append(fieldHTML);
// Add field html
}
}
);
$(wrapper).on('click', '.remove_button', function(e){
//Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove();
//Remove field html
x--;
//Decrement field counter
}
);
}
);
</script>
<form>
<div class="field_wrapper">
<div>
<input type="text" name="field_name[]" value=""/>
Add
<button name="submit" type="submit">
Send values
</button>
</div>
</div>
</form>
New full source demo