I am entering an array in the database through a script I did but saves only the first and second digit

Question

I’m inserting a array in the database through a script I did, but save only the first and second digit.

HTML:

<script type="text/javascript">
	//ADICIONAR MAIS CAMPOS OUTRO SCRIPT
			
	$(function() {
		var spanCont = $('#addingt_pizza');
	  var add_btn_pizza = $('button[data-id="1"]');
		var i = 1;

$(add_btn_pizza).click(function() {
$('<br/><input type="text" name="ingt_pizza['+i+']" class="form-control" placeholder="Escreva o ingrediente que pretende adicionar ex: sal, ovo, tomate, batata, etc." required/>').appendTo(spanCont);
});
});
</script>

<form action="process_novo.php"  enctype="multipart/form-data" method="POST">
<div class="form-group">
	<label for="text">Ingredientes:</label>
	<span id="addingt_pizza">
	  <input type="text" name="ingt_pizza[]" class="form-control" placeholder="Escreva o ingrediete que pretende adicionar ex: sal, ovo, tomate, batata, etc." >
	</span><br>
    <button type="button" data-id="1" class="btn btn-default"><img src="../imagens/add.png" alt="" width="15"> Campos</button>
</div>
</form>

PHP file:

if (isset($_POST['adicionar_pizza'])) {

    $nome_pizza = $_POST['nome_pizza'];
    $preco_pizza = $_POST['preco_pizza'];
    $data = date("d-m-Y H:s");
    $imagem_pizza = $_FILES['imagem_pizza']['name'];

    $ingredient = $_POST['ingt_pizza'];

    $ingredientes = implode(',', (array)$ingredient);                   


    if (file_exists("imagens_pizzas/$imagem_pizza")) {
        $a = 1;
        while (file_exists("imagens_pizzas/[$a]$imagem_pizza")) {
                $a++;
            }
            $imagem_pizza = "[".$a."]".$imagem_pizza;
    }

    $insert_pizza = "INSERT INTO pizza (nome, ingredientes, preco, imagem, data) VALUES ('$nome_pizza', '$ingredientes', '$preco_pizza', '$imagem_pizza', '$data')";                        

    $resul_pizza=mysqli_query($conexao, $insert_pizza);

    (move_uploaded_file($_FILES['imagem_pizza']['tmp_name'], "imagens_pizzas/".$imagem_pizza));

    if ($resul_pizza) 
    { 
        echo "<script>alert('Guardado com sucesso!');location.href='index.php';</script>;";

    }else{

        echo "<script>alert('Nao foi possivel guardar. Ocorreu um erro por favor, tente novamente!');location.href='index.php';</script>;";
    }        

}   
?>

Answer 1

The problem is that you are creating several fields with the same name. When we click on campos, the value of the variable i it doesn’t change, it always continues as 1. This generates several fields with the same name, for example:

<input type="text" name="ingt_pizza[1]"  />
<input type="text" name="ingt_pizza[1]"  />
<input type="text" name="ingt_pizza[1]"  />
<input type="text" name="ingt_pizza[1]"  />
<input type="text" name="ingt_pizza[1]"  />

The correct is to add one to the value of the variable. You can do this with i++; by clicking the button, for example:

  $(add_btn_pizza).click(function() {
    $(' .. ').appendTo(spanCont);

    i++; //Essa operação equivale a i = i + 1
  });

Tip: This is optional, you can simply create multiple fields with the name name="ingt_pizza[]"

Example:

$(function() {
  var spanCont = $('#addingt_pizza');
  var add_btn_pizza = $('button[data-id="1"]');

  $(add_btn_pizza).click(function() {
    $('<br/><input type="text" name="ingt_pizza[]" class="form-control" placeholder="Escreva o ingrediente que pretende adicionar ex: sal, ovo, tomate, batata, etc." required />').appendTo(spanCont);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="process_novo.php" enctype="multipart/form-data" method="POST">
  <div class="form-group">
    <label for="text">Ingredientes:</label>
    <span id="addingt_pizza">
	  <input type="text" name="ingt_pizza[]" class="form-control" placeholder="Escreva o ingrediete que pretende adicionar ex: sal, ovo, tomate, batata, etc." >
	</span><br>
    <button type="button" data-id="1" class="btn btn-default"><img src="../imagens/add.png" alt="" width="15"> Campos</button>
  </div>
</form>