Add button, insert input value into the form itself

Question

Add button, insert input value into the form itself

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a PHP form for registering recipes (for food). By filling out 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 the "Add" button, it would insert that ingredient into a text field, for example: If you type salt in the ingredient field and click add and then type pepper and add / p>

<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 have to be a textarea, it may be some other solution.

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

php javascript html

asked by anonymous 11.10.2017 / 13:11

2 answers

0

The solution with textarea is bad and unusual. The function of this element is to store a text, not a list, so using it is wrong and nothing semantic. If your problem is to have 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 ingredients field to ingredientes[] , with the brackets at the end. PHP, when parsing this data, will convert to an 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 have more elements created by pressing the Add button. 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>

In this way, when the Add button is pressed, another field for ingredient is added. This also 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 pick up the ingredient list with:

$ingredientes = $_POST["ingredientes"];

It will be an array with all the ingredients typed in.

11.10.2017 / 15:31

Routine to clear listview checkbox C # Capture the value of the selected item in selectOneRadio with JavaScript

score 1 · Accepted Answer

To do what you want, you should 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>