Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Felipe Evangelista

Clonar Formulário com JQuery

Recommended Posts

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?

 

HTML

<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'));
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá.

 

Experimente usar este script:

$(document).on('click', '.clonador', function(e){
    e.preventDefault();
    $('.cadastroGato:first').clone().appendTo($('#clone-form'));
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
22 minutos atrás, Eziquiel disse:

Olá.

 

Experimente usar este script:


$(document).on('click', '.clonador', function(e){
    e.preventDefault();
    $('.cadastroGato:first').clone().appendTo($('#clone-form'));
});

 

Tentei com esse script, mas o resultado foi o mesmo. Os campos são clonados, mas os botões ficam sem funcionalidade e alguns estilos não são clonados. Estou procurando outras formas também de fazer esse formulário.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sobre os estilos, eu meio que peguei o que acontece. Eu não participei do projeto de construção do site, então há coisas que eu nem sabia que tinham, mas resolvi. O problema agora é que quando eu clico em enviar, a validação dos dados só ocorre no formulario "original" e nos clonados não. Os dados dos formulários clonados também não são enviados. 

Eu pensei em tentar fazer algo parecido com o Infojobs, onde você cadastra suas experiências. Lá as suas experiências são colocadas pelo nome da empresa né e tal e quando você clica em adicionar aparece uma modal e você coloca os dados e aí a experiência que você colocou aparece lá também pelo nome. Mas é algo que eu ainda não sei como fazer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

No exemplo que te mostrei eu não implementei nenhuma função pra botão enviar.

Note que botão de "Adicionar" cria um novo formulário mesmo quando clicando em um botão antes clonado.

Inicialmente só funcionava no primeiro botão. Agora, em qualquer botão Adicionar que clicar irá funcionar.

 

O problema é o seguinte: quando você cria elementos em tempo real, você precisa atribuir os eventos à eles de uma outra maneira. Quando você implementa o seguinte evento, só irá funcionar para os elementos que foram interpretados quando a página foi criada e carregada. 

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

Este código acima ira funcionar para o botão clonador, mas somente no primeiro, pois esse foi o único interpretado pelo DOM no carregamento do documento.

 

Agora vejamos este código abaixo. Ele irá fazer a mesma coisa que o código acima, só que agora o evento será atribuído também aos elementos criados dinamicamente (depois do carregamento).

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

Aqui está o que tentei mostrar pra você. Use este método para implementar seus eventos para todos os elementos que forem clonados.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ah sim, agora estou conseguindo entender o que você diz. Nunca fiz nenhum fomulário que precisasse desse tipo de funcionalidade, então estou bem perdido pra fazer isso haha pelo menos essa parte foi resolvida. Agora, pra que esses dados sejam armazenados corretamente no bd, eu tenho que fazer com que os names sejam arrays e sejam incrementados conforme o formulário é clonado, né? Tipo nome-gato[0] nome-gato[1] e assim por diante e no php usar de alguma forma o for each depois. Claro que duvidas de php não é nesse tópico, então eu sei que você não vai ficar falando sobre, mas só para me dar um norte rs

Compartilhar este post


Link para o post
Compartilhar em outros sites

Felipe,

 

Você provavelmente vai ter que mudar mais uma coisa importante: os nomes dos seus inputs.

 

Cada vez que você clona você precisa dar um número unico para os seus inputs, se não você não vai conseguir pegar o POST do lado do servidor corretamente.

 

Por exemplo:

<input type="text" name="vacina[]" 
<input type="text" name="antirrabica[]"

 

Vira:

<input type="text" name="formulario[0][vacina]" .../>

<input type="text" name="formulario[0][antirrabica]" .. />

 

Aí na hora do clonar o formulário, você tem que incrementar o ZERO antes se clonar:

<input type="text" name="formulario[1][vacina]" .../>

<input type="text" name="formulario[1][antirrabica]" .. />

 

E assim por diante:

<input type="text" name="formulario[2][vacina]" .../>

<input type="text" name="formulario[2][antirrabica]" .. />

 

Entendeu? Se você não numerar cada clone, depois você não vai conseguir resgatar as informações em ordem.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Como eu posso incrementar os names dos inputs? 

Tentei dessa forma e de outros jeitos, mas ainda não consegui:

for( i = 0; i = clone.length; i++){
        camposClonados[i].setAttribute("name", i);  
    }

"clone" é a div que está sendo clonada, camposClonados são os inputs que estão sendo clonados.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu recomendo você a converter seu formulário pra uma string e então usar .replace() pra isso pra substituir todos os [0] que você encontrar:

 

var incrementor = 1;
var novoHtml = $('.cadastroGato:first').html().incrementor+']')
incrementor++

 

A lógica não tá completa, mas deu pra entender?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Veja este exemplo: http://codepen.io/Eziquiel/pen/dvEbWO?editors=1010

 

 

No html utilieze o index [0], exemplo:

<input type="text" name="formulario[0][nome]"        .../>
<input type="text" name="formulario[0][nascimento]"  ... />

 

No Javascript a ideia é a seguinte:

Após carregar o documento a variável elm_html armazenará uma cópia dos seus elementos que serão clonados futuramente.

Isso fará com que os elementos clonados futuramente não sejam clonados já preenchidos. E com isso você também terá um padrão de referência a ser substituído, que é o "[0]".

 

Na hora de clonar a variável "i" receberá a quantidade de clones pra saber qual o index do próximo. Daí a função replace faz seu brilhante papel. Dê uma estudada aí.

 

$(document).ready(function(){
  
      var elm_html = $('#clone-form').html();   //faz uma cópia dos elementos a serem clonados.

      $(document).on('click', '.clonador', function(e){
          e.preventDefault();
          var i = $('.cadastroGato').length;    //pega a quantidade de clones;
          var elementos = elm_html.replace(/\[[0\]]\]/g, '['+i+++']');  //substitui o valor dos index e incrementa++ para o próximo
          $('#clone-form').append(elementos);  //exibe o clone.
      });
  
  });

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Exatamente o que eu tava precisando! Valeu mesmo! Eu até consegui uma forma de mudar os names, mas aí teria que colocar um por um, ia dar um #@?&#036;%~ trabalho! Mas ainda sigo com uma porrada de problemas hahaha 

Claro que vocês já me ajudaram demais, então se a paciência de vocês tiverem se esgotado, não tem problemas.

 

Mas, vamos lá

Os inputs clonados não estão pegando a mascara que eu coloquei pelo js. A mascara é colocada no input pelo class que se mantém o mesmo nos inputs clonados, então não entendi o porque de não funcionar. Outro problema é que como não estou nesse projeto desde o começo, muita coisa ainda não sei bem como está feito, por exemplo, vi esses dias que os placeholders são editados, tipo colocando uma div por cima dos inputs com o texto do placeholder com tamanho e cor editado, e assim que você clica no input essa div fica com display none e você escreve nos inputs normalmente. Nos inputs clonados, os placeholders aparecem normal, sem nenhuma edição. Eu devo clonar então a div que fica por cima né? Estou tentando aqui, mas tá um pouco complicado haha 

E estou tentando criar um botão para remover as divs clonadas, na id da div do formulario, também deixei como formulario[0]... e coloquei o botão para pegar a id do ultimo clone, mas não exclui. 

 

Realmente essa história de mais de um gato no formulário está me dando uma boooa dor de cabeça, então quem puder dar mais uma ajudinha a esse estagiário ferrado aqui, será bem-vindo hahahahaha

 

A parte do formulário a ser clonado ficou assim 

<div id="clone-form">
                                    <div id="formulario[0]cloonedForm" class="cadastroGato" style="margin-top: 70px;">
                                        <h3>Dados do gato</h3>
                                        <hr style="margin-bottom: 70px;" class="hr-color2"/>
                                        <label>
                                            <input type="text" name="formulario[0][nome-gato]" placeholder="Nome*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="formulario[0][apelido]" placeholder="Apelidos*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" class="date" name="formulario[0][nascimento]" placeholder="Data de nascimento*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="formulario[0][raca]" placeholder="Raça*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="formulario[0][cor]" placeholder="Cor*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <select name="formulario[0][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" class="date" name="formulario[0][vacina]" placeholder="Última vacinação*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" class="date" name="formulario[0][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="formulario[0][vacinas]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][vacinas]" value="nao">Nao
                                        </label></p>
                                        <label onclick="alergiaQual()">
                                            Tem alguma doença ou alergia? 
                                            <input type="radio" name="formulario[0][alergia]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][alergia]" value="nao">Nao
                                        </label>
                                        <label id="qualAlergia" style="visibility: hidden;">
                                            <input type="text" name="formulario[0][qual]" placeholder="Qual?" value=""/>            
                                        </label>
                                        <label class="register">
                                            Castrado?<br />
                                            <input type="radio" name="formulario[0][castrado]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][castrado]" value="nao">Nao
                                        </label>
                                        <label onclick="medicacao()">
                                            Toma alguma medicação?<br>
                                            <input type="radio" name="formulario[0][medicacao]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][medicacao]" value="nao">Nao
                                        </label>
                                        <label id="qualMedicacao" style="visibility: hidden;">
                                            <input type="text" name=formulario[0]"[med]" placeholder="Qual?" value=""/>            
                                        </label>
                                            <br>
                                        <label onclick="alimentacao()">
                                            Necessita alimentação especial? <br>
                                            <input type="radio" name="formulario[0][alimentacao]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][alimentacao]" value="nao">Nao
                                        </label>
                                        <label id="qualAlimentacao" style="visibility: hidden;">
                                            <input type="text" name="formulario[0][alimentacao]" placeholder="Qual?" value=""/>            
                                        </label>
                                            <br>
                                        <label onclick="fiv()">
                                            Já realizou teste para FIV e FELV? <br>
                                            <input type="radio" name="formulario[0][teste]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][teste]" value="nao">Nao
                                        </label>
                                        <label id="testeFiv" class="register" style="display: none;">
                                            <input type="radio" name="formulario[0][fiv]" value="posfiv">Positivo para FIV
                                            <input type="radio" name="formulario[0][fiv]" value="posfelv">Positivo para FELV
                                            <input type="radio" name="formulario[0][fiv]" value="posambos">Positivo para ambos
                                            <input type="radio" name="formulario[0][fiv]" value="negambos">Negativo para ambos
                                        </label>
                                        <label class="register">
                                            Já ficou em hotelzinho antes?
                                            <p><input type="radio" name="formulario[0][hotelzinho]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][hotelzinho]" value="nao">Nao</p>
                                        </label>

                                        <label class="message">
                                            <textarea name="formulario[0][temperamento]" 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="formulario[0][descricao]" 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>
                                    </div>

O js que clona e exclui, assim: 

$(document).ready(function(){
  
      var elm_html = $('#clone-form').html();  
      var remover = document.getElementById('remove');
      var i = $('.cadastroGato').length; 
      
      $(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);
      });
      $('.remover').on('click', function(e) {
        e.preventDefault();
        $('#formulario[' + (i-1) + ']cloonedForm').remove();
        alert ('#formulario[' + (i-1) + ']cloonedForm'); //Coloquei esse alerta apenas para verificar se a função retonar o id correto, e retorna mesmo
      })
  
  });

E aqui as máscaras dos inputs, que fiz usando JQuery Mask Plugin

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

 

E mais uma vez vou agradecer a quem está ajudando aí com toda a paciência, estão me ajudando demais aqui!

Compartilhar este post


Link para o post
Compartilhar em outros sites
Você vai ter que re-aplicar as máscaras toda vez que adicionar um campo novo.

Coloque todas suas máscaras dentro de uma função "aplicarMascaras()", e toda vez que clonar um campo novo, você deve aplicarMascaras() no campo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tente usar assim. Apenas isso.

Não é legal criar varias funções "$(document).ready(function(){".

Crie apenas uma e coloque tudo dentro dela. 

 

$(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();
      $('#formulario[' + (i-1) + ']cloonedForm').remove();
      alert ('#formulario[' + (i-1) + ']cloonedForm'); //Coloquei esse alerta apenas para verificar se a função retonar o id correto, e retorna mesmo
    })
  
    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');
    }
  
  });

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma pequena dúvida, referente a PEGAR AUTOMATICAMENTE a HORA e alimentar o campo INPUT.
       
      Tenho uma rotina, que estava aparentemente funcionando corretamente, mas agora estou tendo problema.
       
      A rotina, pega a HORA atual e informa automaticamente o INPUT, não estou entendendo porque agora não está mais fazendo.

      Abaixo a rotina.

       
      <div class="col-lg-3"> <label for="cotaHrsinicio">Hora da Abertura<span class="required">*</span></label> <div class="controls"> <input type="time" id="cotaHrsinicio" name="cotaHrsinicio" class="form-control" style="width:100%;" value="" /> <!-- NESSE INPUT A ROTINA INFORMA A DATA ATUAL --> </div> </div>  
       
      function date_time() { var date = new Date(); //var am_pm = "AM"; var hour = date.getHours(); /* if(hour>=12){ am_pm = "PM"; } */ if (hour == 0) { hour = 12; } if(hour<12){ hour = hour - 12; } if(hour>12){ hour + 12; } if(hour<10){ hour = "0"+hour; } var minute = date.getMinutes(); if (minute<10){ minute = "0"+minute; } var sec = date.getSeconds(); if(sec<10){ sec = "0"+sec; } /* *Formato da Hora (h:m:s) * Passar para a Variável: Hora Atual */ var cotaHrsinicio = document.getElementById("cotaHrsinicio").value = hour+":"+minute; }
      Grato,
       
      Cesar

       
    • Por luiz monteiro
      Bom dia.
      Estou precisando formatar um campo de entrada type text somente para numero com a seguinte formatação.
      se menor que 999 mostrar dessa forma mesmo, nesse caso seria para centena.dezena.unidade. Tipo 001 até 009 depois 010 até 099 depois 100 até 999
      de 1.000 até 999.999  mostrar com o ponto, nesse caso seria para milhar.centena.dezena.unidade. Tipo 001.000 até 001.999 e assim por diante.
      de 1.000.000 até 9.999.000, nesse caso seria para milhão.milhar.centena.dezena.unidade. aqui mesma ideia....
      Parecidos com aqueles campos de preço, que ao digitar os zeros ficam a esquerda até o valor atingirem a unidade correspondente.
       
      Tentei adaptar esse que encontrei na net.
      function moeda(a, e, r, t) { let n = "" , h = j = 0 , u = tamanho2 = 0 , l = ajd2 = "" , o = window.Event ? t.which : t.keyCode; if (13 == o || 8 == o) return !0; if (n = String.fromCharCode(o), -1 == "0123456789".indexOf(n)) return !1; for (u = a.value.length, h = 0; h < u && ("0" == a.value.charAt(h) || a.value.charAt(h) == r); h++) ; for (l = ""; h < u; h++) -1 != "0123456789".indexOf(a.value.charAt(h)) && (l += a.value.charAt(h)); if (l += n, 0 == (u = l.length) && (a.value = ""), 1 == u && (a.value = "0" + r + "0" + l), 2 == u && (a.value = "0" + r + l), u > 2) { for (ajd2 = "", j = 0, h = u - 3; h >= 0; h--) 3 == j && (ajd2 += e, j = 0), ajd2 += l.charAt(h), j++; for (a.value = "", tamanho2 = ajd2.length, h = tamanho2 - 1; h >= 0; h--) a.value += ajd2.charAt(h); a.value += r + l.substr(u - 2, u) } return !1 } Mas sem sucesso.
       
      Grato por enquanto.
       
       
       
    • Por Giovanird
      O script abaixo atualiza a página (centro.php) a cada um minuto e dentro desta página terei uma div que não poderá ser atualizada.
      Tentei colocar esta div como pagina com setInterval de 100 minutos porem ao dar o refresh no centro.php  tudo vai junto.  Será que isto é possivel?

      Desde já meu muito obrigado!
      <script> function atualiza(){ var url = 'centro.php'; $.get(url, function(dataReturn) { $('#centro').html(dataReturn); }); } setInterval("atualiza()",60000); </script>  

    • Por luiz monteiro
      Bom dia. Eu estou tentando encontrar uma maneira de evitar que após o usuário selecionar, se selecionar, uma imagem, essa seja substituída apenas por outra selecionada. Porém quando o usuário cancela a seleção, o input file remove o arquivo se já foi selecionado anteriormente.
      Essa é a estrutura que estou usando HTML
      form action="#" method="post" name="formulario" id="formulario" enctype="multipart/form-data"
      input type="file" name="file_name[]" br input type="file" name="file_name[]" br button enviar /button /form
      JS PURO
      Peguei esse script em um post aqui do stackoverflow e adaptei
      script type="text/javascript"
      let formulario = document.querySelector("#formulario"); formulario.addEventListener("change", (e)=>{ e.preventDefault(); var file = e.target.files[0]; if (e.target.files.length === 1 && e.target.files !== undefined && e.target.files !== null && file.type.match('image.*')) { console.log("if okay"); } else { //preciso entender o que devo fazer aqui para verificar se há arquivo no DOM desse target caso, o usuário cancele a seleção, para evitar que se há um arquivo no DOM esse permaneça. console.log(file); //CASO O USUÁRIO CANSELA A SELEÇÃO, RETORNA undefined } }); /script
      O if está correto, porém o que falta é o que fazer no else. Agradeço desde já.
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Tô tentando fazer um pre-loading, mas não consigo de jeito algum.
      Quero mostrar uma animação enquanto a página é carregada e depois de caregada, esconder a animação e mostrar conteúdo.
       
      Aguém pode me ajudar?
       
      Segue código abaixo
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
          <title>PÁGINA LOAD</title>

      <style type="text/css">
      .loadclass {
          border: 2px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #ffc401; /* Blue */
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 2s linear infinite;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .conteudo {
          display:none;
      }
      </style>
      <script>
          function loading(){
              document.getElementsByClassName('loadclass')[0].style.display="none";
              document.getElementsByClassName('conteudo').style.display="block";
          }
      </script>
      </head>
      <body onLoad="loading()">
      <div class="loadclass"></div>
      <div class="conteudo">SEU CONTEUDO AQUI DENTRO!!!</div>
      </body>
      </html>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.