1

Tenho um formulário em PHP para cadastrar receitas (de comida). Ao preencher esse formulário, ele é registrado em um banco de dados MySQL.

<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">

Eu gostaria de no campo ingrediente, para cada ingrediente que eu adicionar clicando no botão "Adicionar", ele inserisse esse ingrediente em um campo de texto, por exemplo: Se escrever sal no campo ingrediente e clicar adicionar e depois escrever pimenta e adicionar, o form ficaria assim:

<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">

Não precisa necessariamente ser um textarea, pode ser alguma outra solução.

Se possível, fazer isso sem ter que atualizar a página.

2
  • Pode ser usando javascript? Ou seria apenas php? Commented 11/10/2017 às 11:15
  • pode sim, jquery, o que precisar...rs Commented 11/10/2017 às 11:19

2 Respostas 2

1

Para fazer o que você deseja, você deve usar javascript, o código abaixo vai com javascript puro, mas jQuery também é possível:

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>
 

1
0

A solução com textarea é ruim e nada usual. A função desse elemento é armazenar um texto, não uma lista, então utilizá-la é errado e nada semântico. Se o seu problema consiste em possuir vários campos de ingredientes, o seu HTML deve ser consistente com essa ideia: possuir vários campos.

Como está utilizando PHP no servidor, você pode definir o nome do campo de ingredientes como ingredientes[], com os colchetes no final. O PHP, ao analisar esse dado, irá converter para um array. Assim, seu HTML ficaria algo como:

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>

Assim, para adicionar mais ingredientes, basta fazer com que seja criado mais elementos ao pressionar o botão Adicionar. Com JavaScript, podemos fazer algo como:

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>

Desta forma, ao ser pressionado o botão Adicionar, outro campo para ingrediente é adicionado. Isso permite, inclusive, que o usuário edite as informações de qualquer ingrediente e, se implementado, remover ingredientes também.

No lado do servidor, quando o formulário for submetido, você pode pegar a lista de ingredientes com:

$ingredientes = $_POST["ingredientes"];

Será um array com todos os ingredientes digitados.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .