Como posso criar um formulário com campos dinâmicos seguindo as ideias da aula? Gostaria de ter um botão "Adicionar" e outro "Remover". Quando clicasse neles, adicionaria e removeria os campos de entrada (inputs), respectivamente. É possível?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como posso criar um formulário com campos dinâmicos seguindo as ideias da aula? Gostaria de ter um botão "Adicionar" e outro "Remover". Quando clicasse neles, adicionaria e removeria os campos de entrada (inputs), respectivamente. É possível?
Olá André, tudo bem?
Sim, é possível criar um formulário com campos dinâmicos no WordPress seguindo as ideias da aula. Para isso, você pode utilizar JavaScript para adicionar e remover os campos de entrada (inputs) ao clicar nos botões "Adicionar" e "Remover".
Uma opção é utilizar a biblioteca jQuery, que já vem incluída no WordPress por padrão. Você pode criar um código que clona o campo de entrada (input) e adiciona-o ao formulário quando o botão "Adicionar" é clicado. Para remover um campo, você pode adicionar um botão "Remover" ao lado de cada campo adicionado e, ao clicar nele, remover o campo correspondente.
Aqui está um exemplo básico de como fazer isso:
<form id="meu-formulario">
<div id="campos">
<div class="campo">
<label for="campo1">Campo 1:</label>
<input type="text" name="campo1" id="campo1">
<button class="remover-campo">Remover</button>
</div>
</div>
<button id="adicionar-campo">Adicionar</button>
</form>
<script>
jQuery(document).ready(function($) {
var campos = $('#campos');
var campoOriginal = $('.campo:first-child');
$('#adicionar-campo').click(function() {
var novoCampo = campoOriginal.clone();
novoCampo.find('input').val('');
novoCampo.find('.remover-campo').click(function() {
$(this).parent('.campo').remove();
});
campos.append(novoCampo);
});
});
</script>Neste exemplo, o formulário já tem um campo de entrada (input) e um botão "Remover". Ao clicar no botão "Adicionar", um novo campo é adicionado ao formulário com um botão "Remover" ao lado. Ao clicar no botão "Remover", o campo correspondente é removido do formulário.
Espero ter ajudado.
Um abraço e bons estudos.