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 Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por belann
      Olá!
       
      Estou fazendo o upload de arquivos com fetch dessa forma
      fetch(url, {
              method: 'POST',
              headers: {'Content-Type': 'multipart/form-data',},
              body: formData 
          }).catch((error) => (console.log("Problemas com o Upload"), error));
       
      estou usando input type=file
      e criando uma const formData = new FormData(); 
      mas não faz e não dá nenhum erro.
      estou fazendo o upload com a url="http://localhost/dashboard/dados".
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
×

Informação importante

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