1

O formulário é uma ficha de cadastro para um hotel para gatos. A ficha tem a opção de adicionar mais de um gato por cadastro, então eu clono o formulário de cadastro do gato para que seja feita a inclusão do segundo gato, mas eu não consigo fazer com que o formulário clone seja fechado por um botão Fechar. Eu sei que, por ser dinâmico, não dá pra utilizar o .remove(), mas eu tentei outras formas e não consegui ainda. Segue o código da ultima forma que tentei:

$(document).ready(function() {

  var elm_html = $('#clone-form').html();
  var remover = document.getElementById('remove');
  var i = $('.cadastroGato').length;
  setMask();

  $(document).on('click', '.clonador', function(e) {
    e.preventDefault();
    remover.style.display = "inline-block";

    var elementos = elm_html.replace(/\[[0\]]\]/g, '[' + i++ + ']');
    $('#clone-form').append(elementos);
    setMask();
  });

  $('.remover').on('click', function(e) {
    e.preventDefault();
    $(this).parent('#cloonedForm[' + (i - 1) + ']').remove();
  })

  if (i == 0) {
    remover.style.display = "none";
  }

  function setMask() {
    $('.rg').mask('00.000.000-0');
    $('.cpf').mask('000.000.000-00');
    $('.cep').mask('00000-000');
    $('.res').mask('(00) 0000-0000');
    $('.cel').mask('(00) 00000-0000');
    $('.date').mask('00/00/0000');
  }

});
label {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

<div id="clone-form">
    <div id="cloonedForm[0]" class="cadastroGato" style="margin-top: 70px;">
        <h3>Dados do gato</h3>
        <hr style="margin-bottom: 70px;" class="hr-color2" />
        <label>
            <input type="text" name="nome-gato[0]" placeholder="Nome*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" name="apelido[0]" placeholder="Apelidos*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" class="date" name="nascimento[0]" placeholder="Data de nascimento*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" name="raca[0]" placeholder="Raça*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" name="cor[0]" placeholder="Cor*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>

        <select name="sexo[0]">
            <option class="selectClass" value="masc">Sexo*:</option>
            <option class="selectClass" value="masc">Masculino</option>
            <option class="selectClass" value="fem">Feminino</option>
        </select>

        <label>
            <input type="text" class="date" name="vacina[0]" placeholder="Última vacinação*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" class="date" name="antirrabica[0]" placeholder="Antirrábica*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>

        <p>
            <label>Vacinas em dia?
                <br>
                <input type="radio" name="vacinas[0]" value="sim" required>Sim
                <input type="radio" name="vacinas[0]" value="nao">Nao
            </label>
        </p>

        <label onclick="alergiaQual()">Tem alguma doença ou alergia?
            <input type="radio" name="alergia[0]" value="sim" required>Sim
            <input type="radio" name="alergia[0]" value="nao">Nao
        </label>

        <label id="qualAlergia" style="visibility: hidden;">
            <input type="text" name="qual[0]" placeholder="Qual?" value="" />
        </label>

        <label class="register">Castrado?
            <br />
            <input type="radio" name="castrado[0]" value="sim" required>Sim
            <input type="radio" name="castrado[0]" value="nao">Nao
        </label>

        <label onclick="medicacao()">Toma alguma medicação?
            <br>
            <input type="radio" name="medicacao[0]" value="sim" required>Sim
            <input type="radio" name="medicacao[0]" value="nao">Nao
        </label>

        <label id="qualMedicacao" style="visibility: hidden;">
            <input type="text" name="med[0]" placeholder="Qual?" value="" />
        </label>
        <br>
        <label onclick="alimentacao()">
            Necessita alimentação especial?
            <br>
            <input type="radio" name="alimentacao[0]" value="sim" required>Sim
            <input type="radio" name="alimentacao[0]" value="nao">Nao
        </label>

        <label id="qualAlimentacao" style="visibility: hidden;">
            <input type="text" name="alimentacaoo[0]" placeholder="Qual?" value="" />
        </label>
        <br>
        <label onclick="fiv()">
            Já realizou teste para FIV e FELV?
            <br>
            <input type="radio" name="teste[0]" value="sim" required>Sim
            <input type="radio" name="teste[0]" value="nao">Nao
        </label>

        <label id="testeFiv" class="register" style="display: none;">
            <input type="radio" name="fiv[0]" value="posfiv">Positivo para FIV
            <input type="radio" name="fiv[0]" value="posfelv">Positivo para FELV
            <input type="radio" name="fiv[0]" value="posambos">Positivo para ambos
            <input type="radio" name="fiv[0]" value="negambos">Negativo para ambos
        </label>

        <label class="register">
            Já ficou em hotelzinho antes?
            <p>
                <input type="radio" name="hotelzinho[0]" value="sim" required>Sim
                <input type="radio" name="hotelzinho[0]" value="nao">Nao</p>
        </label>

        <label class="message">
            <textarea name="temperamento[0]" placeholder="Descreva o temperamento do seu gato (exemplo: tímido, assustado, carinhoso, agressivo, etc)*:" data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
            <span class="empty-message">*Campo obrigatório</span>
        </label>

        <label class="message">
            <textarea name="descricao[0]" placeholder="Descreva a rotina do seu gato (o que gosta, não gosta, hábitos, etc)*:" data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
            <span class="empty-message">*Campo obrigatório</span>
        </label>
    </div>
    <div id="status" style="visibility: hidden;"></div>
</div>

<button type="button" class="clonador">Adicionar Gato</button>
<button type="button" id="remove" class="remover" style="display: none;">Remover Gato</button>
<button type="submit" id="enviar" name="submit">Enviar</button>

Esse é o código onde eu clono o formulário. Dei uma lida, e até tentei outras formas, mas o botão fechar sempre fica sem ação nenhuma e sem nenhum erro no log. Segue o formulário de cadastro do gato, está sem a tag form, mas é porque não vou colocar o formulário todo aqui por ser bem extenso

2
  • Cadê o botão "fechar"? É o botão com o id "remove"? Commented 12/04/2017 às 14:01
  • Isso, é o botão com id "remove", eu deixei com o display none para que o botão apareça somente quando tiver pelo menos um clone Commented 12/04/2017 às 14:02

1 Resposta 1

1

Eu não utilizaria [ ] num id, utilizaria cloonedForm1, ids podem ter algumas incompatibilidades na maneira de escrever. Dependendo do browser e da versão do DOM. Neste caso a incompatibilidade é pq o jQuery utiliza os colchetes para filtrar várias coisas em selector, por exemplo input[name=nome]. Ids começados por numeros, por exemplo, também não é recomendado. Para escrever ids, opte por utilizar apenas letras, números apenas no final. Esqueça qualquer outro caracter ou espaços.

Outro erro que você cometeu foi utilizar a variavel i no count do clique do .remover. Pois ela é contada apenas no começo da execução do script, portanto eu alterei para:

$('#cloonedForm' + ( $('.cadastroGato').length - 1) ).remove();

E também no replace do id do objeto default que será clonado: var elementos = elm_html.replace('cloonedForm0', 'cloonedForm' + $('.cadastroGato').length );

Ficaria assim portanto:

$(document).ready(function() {

  var elm_html = $('#clone-form').html();
  var remover = document.getElementById('remove');

  setMask();

  $(document).on('click', '.clonador', function(e) {
    e.preventDefault();
    remover.style.display = "inline-block";

    var elementos = elm_html.replace('cloonedForm0', 'cloonedForm' + $('.cadastroGato').length );
    $('#clone-form').append(elementos);
    setMask();
  });

  $('.remover').on('click', function(e) {
    e.preventDefault();
    $('#cloonedForm' + ( $('.cadastroGato').length - 1) ).remove();
  })

  if (i == 0) {
    remover.style.display = "none";
  }

  function setMask() {
    $('.rg').mask('00.000.000-0');
    $('.cpf').mask('000.000.000-00');
    $('.cep').mask('00000-000');
    $('.res').mask('(00) 0000-0000');
    $('.cel').mask('(00) 00000-0000');
    $('.date').mask('00/00/0000');
  }

});

E o html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>

<div id="clone-form">
    <div id="cloonedForm0" class="cadastroGato" style="margin-top: 70px;">
        <h3>Dados do gato</h3>
        <hr style="margin-bottom: 70px;" class="hr-color2" />
        <label>
            <input type="text" name="nome-gato[0]" placeholder="Nome*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" name="apelido[0]" placeholder="Apelidos*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" class="date" name="nascimento[0]" placeholder="Data de nascimento*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" name="raca[0]" placeholder="Raça*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" name="cor[0]" placeholder="Cor*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>

        <select name="sexo[0]">
            <option class="selectClass" value="masc">Sexo*:</option>
            <option class="selectClass" value="masc">Masculino</option>
            <option class="selectClass" value="fem">Feminino</option>
        </select>

        <label>
            <input type="text" class="date" name="vacina[0]" placeholder="Última vacinação*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>
        <label>
            <input type="text" class="date" name="antirrabica[0]" placeholder="Antirrábica*:" value="" data-constraints="@Required" />
            <span class="empty-message">*Campo obrigatório</span>
        </label>

        <p>
            <label>Vacinas em dia?
                <br>
                <input type="radio" name="vacinas[0]" value="sim" required>Sim
                <input type="radio" name="vacinas[0]" value="nao">Nao
            </label>
        </p>

        <label onclick="alergiaQual()">Tem alguma doença ou alergia?
            <input type="radio" name="alergia[0]" value="sim" required>Sim
            <input type="radio" name="alergia[0]" value="nao">Nao
        </label>

        <label id="qualAlergia" style="visibility: hidden;">
            <input type="text" name="qual[0]" placeholder="Qual?" value="" />
        </label>

        <label class="register">Castrado?
            <br />
            <input type="radio" name="castrado[0]" value="sim" required>Sim
            <input type="radio" name="castrado[0]" value="nao">Nao
        </label>

        <label onclick="medicacao()">Toma alguma medicação?
            <br>
            <input type="radio" name="medicacao[0]" value="sim" required>Sim
            <input type="radio" name="medicacao[0]" value="nao">Nao
        </label>

        <label id="qualMedicacao" style="visibility: hidden;">
            <input type="text" name="med[0]" placeholder="Qual?" value="" />
        </label>
        <br>
        <label onclick="alimentacao()">
            Necessita alimentação especial?
            <br>
            <input type="radio" name="alimentacao[0]" value="sim" required>Sim
            <input type="radio" name="alimentacao[0]" value="nao">Nao
        </label>

        <label id="qualAlimentacao" style="visibility: hidden;">
            <input type="text" name="alimentacaoo[0]" placeholder="Qual?" value="" />
        </label>
        <br>
        <label onclick="fiv()">
            Já realizou teste para FIV e FELV?
            <br>
            <input type="radio" name="teste[0]" value="sim" required>Sim
            <input type="radio" name="teste[0]" value="nao">Nao
        </label>

        <label id="testeFiv" class="register" style="display: none;">
            <input type="radio" name="fiv[0]" value="posfiv">Positivo para FIV
            <input type="radio" name="fiv[0]" value="posfelv">Positivo para FELV
            <input type="radio" name="fiv[0]" value="posambos">Positivo para ambos
            <input type="radio" name="fiv[0]" value="negambos">Negativo para ambos
        </label>

        <label class="register">
            Já ficou em hotelzinho antes?
            <p>
                <input type="radio" name="hotelzinho[0]" value="sim" required>Sim
                <input type="radio" name="hotelzinho[0]" value="nao">Nao</p>
        </label>

        <label class="message">
            <textarea name="temperamento[0]" placeholder="Descreva o temperamento do seu gato (exemplo: tímido, assustado, carinhoso, agressivo, etc)*:" data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
            <span class="empty-message">*Campo obrigatório</span>
        </label>

        <label class="message">
            <textarea name="descricao[0]" placeholder="Descreva a rotina do seu gato (o que gosta, não gosta, hábitos, etc)*:" data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
            <span class="empty-message">*Campo obrigatório</span>
        </label>
    </div>
    <div id="status" style="visibility: hidden;"></div>
</div>

<button type="button" class="clonador">Adicionar Gato</button>
<button type="button" id="remove" class="remover" style="display: none;">Remover Gato</button>
<button type="submit" id="enviar" name="submit">Enviar</button>
5
  • Não sabia que podem ter problemas utilizando [] em ids, obrigado pela dica. Funcionou, está removendo os clones, mas agora não está incrementando nos names dos inputs, eu consigo colocar esse incremento no mesmo replace()? Commented 12/04/2017 às 16:55
  • nao reparei neste detalhe, desculpa....mas acredito eu que se vc colocar apenas [] no name do campo ele ira entender qual numero que é de acordo com a ordem no documento. Não testei isso, mas normalmente isso funciona em php e outras linguagens, nao vejo pq nao funcionar em html tb. Commented 12/04/2017 às 17:27
  • por exemplo name="nome-gato[]" quando tiver dois campos com isso, ele deve postar atutomaticamente com indice 0 e 1 Commented 12/04/2017 às 17:28
  • senao faz um replace de [0] var elementos = elm_html.replace('cloonedForm0', 'cloonedForm' + $('.cadastroGato').length ).replace(/\[[0\]]\]/g, '[' + $('.cadastroGato').length + ']'); Commented 12/04/2017 às 17:38
  • No html não tinha funcionado, estava tentando algo tipo var elementos = elm_html.replace('cloonedForm0', 'cloonedForm' + $('.cadastroGato').length ) + (/\[[0\]]\]/g, '[' + i++ + ']');, mas minha lógica estava um pouco errada. Da sua forma funcionou perfeitamente. Sinceramente, não sei quanto tempo ia demorar pra pegar esse erro, então obrigado! Commented 12/04/2017 às 17:43

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 .