Clonar Formulário com JQuery


(Felipe Jardim Evangelista) #1

Eu estou criando um formulário de cadastro, onde o cliente poderá cadastrar mais de um gato nesse formulário (É um hotel para gatos). O problema é que não sei bem a forma mais correta de fazer isso. Estive pensando em usar o JQuery para clonar os inputs de cadastro do gato, colocando um botão de "Adicionar Gato", mas pelo que eu vi na documentação, a função clone não copia todos os elementos para o clone, né? Quando eu copio, os botões não funcionam, alguns estilos também não, enfim, não dá certo rs. Então como eu posso fazer para clonar os inputs? Ou nesse caso, tem outra maneira melhor de fazer essa funcionalidade de poder cadastrar mais de um gato?

<div id="clone-form">
            <div id="clonedForm" class="cadastroGato" style="margin-top: 80px;">
                <h3>Dados do gato</h3>

                    <hr style="margin-bottom: 70px;" class="hr-color2"/>

                    <label>
                        <input type="text" name="nome-gato[]" placeholder="Nome*:" value=""
                                data-constraints="@Required"/>
                        <span class="empty-message">*Campo obrigatório</span>
                    </label>

                    <label>
                        <input type="text" name="apelido[]" placeholder="Apelidos*:" value=""
                                data-constraints="@Required"/>
                        <span class="empty-message">*Campo obrigatório</span>
                    </label>

                    <label>
                        <input type="text" class="date" name="nascimento" placeholder="Data de nascimento*:" value=""
                                data-constraints="@Required"/>
                        <span class="empty-message">*Campo obrigatório</span>
                    </label>

                    <label>
                        <input type="text" name="raca" placeholder="Raça*:" value=""
                                data-constraints="@Required"/>
                        <span class="empty-message">*Campo obrigatório</span>
                    </label>

                    <label>
                        <input type="text" name="cor[]" placeholder="Cor*:" value=""
                                data-constraints="@Required"/>
                        <span class="empty-message">*Campo obrigatório</span>
                    </label>

                    <select name="sexo">
                        <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" name="vacina[]" placeholder="Última vacinação*:" value=""
                                data-constraints="@Required"/>
                        <span class="empty-message">*Campo obrigatório</span>
                    </label>

                    <label>
                        <input type="text" name="antirrabica[]" 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" value="sim">Sim
                        <input type="radio" name="vacinas" value="nao">Nao
                    </label></p>

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

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

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

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

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

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

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

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


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

                    <label class="message">
                        <textarea name="mensagem[]" placeholder="Descreva a rotina do seu gato (o que gosta, não gosta, hábitos, etc)*:" 
                            data-constraints='@Required @Length(min=20,max=999999)'></textarea>
                    </label>  

                        <button type="button" class="clonador">Adicionar Gato</button>
                        <button type="submit">Enviar</button>
                </div>
             </div

Js

$('.clonador').click(function(e){
e.preventDefault();
$('.cadastroGato').clone().appendTo($('#clone-form'));
});

(Luan Maik) #2

1º - Ou vc esqueceu de colocar tudo dentro de um <form> ou vc não colocou todo o código
2º - Vc está clonando um elemento com id="clonedForm", caso utilize-o como seletor CSS não funcionará, pois ID não pode ser duplicado, crie uma classe para usar como seletor CSS;


(Felipe Jardim Evangelista) #3

Acabei não colocando todo o código, para não deixar tão extenso. E o id não estou usando como seletor CSS :confused: