Add button, insert input value inside the form itself

Question

I have a PHP form to register (food) recipes. When filling this form, it is registered in a Mysql database.

<form method="POST">
<input type="text" id="receita">
<input type="text" id="ingrediente"><button id="adicionar">Adicionar</button>
<textarea id="lista-ingredientes"></textarea>
<button type="submit" value="Cadastrar">

I would like in the ingredient field, for each ingredient I add by clicking on the "Add" button, it would insert that ingredient in a text field, for example: Write salt in ingredient field and click add and then write pepper and add, the form would look like this:

<form method="POST">
<input type="text" id="receita">
<input type="text" id="ingrediente"><button id="adicionar">Adicionar</button>
<textarea id="lista-ingredientes">
sal<br/>
pimenta
</textarea>
<button type="submit" value="Cadastrar">

It does not necessarily need to be a textarea, it may be some other solution.

If possible, do this without having to refresh the page.

Answer 1

To do what you want, you must use javascript, the code below goes with pure javascript, but jQuery is also possible:

function adicionarProduto(){
    ingrediente = document.getElementById('ingrediente').value;
    textarea = document.getElementById('lista-ingredientes').value;
    document.getElementById('lista-ingredientes').value = textarea+"<br>"+ingrediente;
}

<form method="POST">
    Receita:
    <br><input type="text" id="receita">
    <br>Ingrediente:
    <br><input type="text" id="ingrediente">
    <br><button type="button" id="adicionar" onclick="adicionarProduto();">Adicionar</button>
    <br><br><br><textarea id="lista-ingredientes"></textarea>
    <br><button type="submit" value="Cadastrar">Cadastrar</button>
</form>
 

Answer 2

The solution with textarea is bad and not usual. The function of this element is to store a text, not a list, so using it is wrong and not semantic. If your problem is having multiple ingredient fields, your HTML should be consistent with this idea: have multiple fields.

Since you are using PHP on the server, you can set the name of the ingredient field as ingredientes[], square brackets at the end. PHP, when parsing this data, will convert to a array. So your HTML would look something like:

input {
  display: block;
  margin-bottom: 10px;
}

<form method="POST">
  <label for="receita">Receita:</label>
  <input type="text" name="receita" placeholder="Ex: Pão de queijo">
  <label>Ingredientes:</label>
  <div id="ingredientes">
    <input type="text" name="ingredientes[]" placeholder="Ex: Sal">
  </div>
  <button type="button" id="adicionar">Adicionar</button>
  <button type="submit">Cadastrar</button>
</form>

So, to add more ingredients, just make more elements be created by pressing the button Add. With Javascript, we can do something like:

const adicionar = document.getElementById("adicionar");
const ingredientes = document.getElementById("ingredientes");

adicionar.addEventListener("click", function (event) {
  let campo = document.createElement("input");
  campo.name = "ingredientes[]";
  campo.placeholder = "Ex: Sal";
  ingredientes.appendChild(campo);
});

input {
  display: block;
  margin-bottom: 10px;
}

<form method="POST">
  <label for="receita">Receita:</label>
  <input type="text" name="receita" placeholder="Ex: Pão de queijo">
  <label>Ingredientes:</label>
  <div id="ingredientes">
    <input type="text" name="ingredientes[]" placeholder="Ex: Sal">
  </div>
  <button type="button" id="adicionar">Adicionar</button>
  <button type="submit">Cadastrar</button>
</form>

This way, when pressing the button Add, another ingredient field is added. This even allows the user to edit the information of any ingredient and, if implemented, remove ingredients as well.

On the server side, when the form is submitted, you can get the list of ingredients with:

$ingredientes = $_POST["ingredientes"];

Will be a array with all the ingredients typed.