4

Boas tenho neste momento o seguinte código em jquery para adicionar inputs conforme o numero existente numa caixa de texto,

No entanto caso no formulário já exista por algum campo ao clicar para adicionar mais um é apagado todos os campos e o seu conteúdo e inserido novos campo em branco,

É possível quando por exemplo, a caixa de texto estiver em 5 e com o conteúdo preenchido eu ao clicar para adicionar apenas mais um ou seja um total 6 ele apenas adicionar e não apagar os que já existem, e caso pretenda retirar um ele apenas eliminar a ultima entrada?

Segue o código que tenho de momento

$(document).ready(function() {
    var $txtQuantidade = $('#txtQuantidade');
    var $btnAdicionar = $('#btnAdicionar');
    var $divForm = $('#divForm');

    $btnAdicionar.on('click', function() {
        var qtde = $txtQuantidade.val();
        console.log(qtde);
        var html = '';

        for (var i = 0; i < qtde; i++) {
            html += '<div>';
            html += '<input type="date" id="txtData_' + i + '" name="data[]">';
            html += '<input type="time" id="txtHoraIni_' + i + '" name="hinicio[]">'
            html += '<input type="time" id="txtHoraFim_' + i + '" name="hfim[]">';
            html += '<div>';
        }

        $divForm.html(html);
    });
});

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtQuantidade" />
<input type="button" id="btnAdicionar" value="Adicionar" />
<div id="divForm"></div>
2

2 Respostas 2

5

Utilize append ao invés de html

$divForm.append(html);

O append serve para adicionar elementos ou textos no final do conteúdo do elmento alvo.

Se quiser fazer o contrário, isso é, colocar no início do elemento alvo, utilize a função prepend.

3
  • agora só tenho um problema, imaginemos que tenho uma caixa já preenchida, mas qu adicionar mais uma ele vai me adicionar duas caixas de texto, mas eu na verdade queria no total apenas 2 (a que já existia e uma nova), provavelmente necessito de saber quantos inputs já existem e no meu ciclo apenas adiconar essa relação, sabe me dizer como sei o numero de inputs que existem? Commented 9/12/2015 às 12:39
  • Faça outra pergunta nesse caso. Vou te ajudar Commented 9/12/2015 às 12:39
  • acabei de adiciona, obrigado Commented 9/12/2015 às 12:46
4

Bom dia Amigo, no jQuery tem as seguintes funções

html() - $divForm.html('......'): essa função sobrescreve todo o conteúdo dentro do elemento e insere o conteúdo passado no parâmetro.

append() - $divForm.append('......'): essa função adiciona o conteúdo passado como parâmetro após o elemento que está presente dentro da div ou outro elemento capturado no seletor.

prepend() - $divForm.prepend('......'): essa função adiciona o conteúdo passado como parâmetro no início da div ou outro elemento capturado no seletor.

Tem a função appendTo() também que insere elementos dentro de um seletor, mas de forma reversa ao append(), exemplo $('........').appendTo($divForm);

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 .