Michael Granados

Só, PELAMORDEDEUS gatanta que o usuário não consiga alterar a query com outros dados... tipo: https://suapagina.local/produtos?sct_id=%27%20OR%20%27%27%20=%20%27 Que, escapado fica assim: https://suapagina.local/produtos?sct_id=' OR '' = ' Que, acaba gerando a seguinte variável no seu script: <?php $_GET['sct_id'] === "' OR '' = '"; // true E, consequentemente, sua query fica assim: SELECT * FROM psd_produtos WHERE ctg_id = 1 AND sct_id = '' OR '' = '' Deixando o usuário listar o que quiser ou mesmo executar outras queries como apagar os produtos de sua loja. Recomendo você estudar sobre escapamento e preparação de queries. Referencias: https://www.php.net/manual/pt_BR/function.mysql-real-escape-string.php https://www.php.net/manual/pt_BR/mysqli.real-escape-string.php https://www.php.net/manual/pt_BR/pdo.prepare.php https://imasters.com.br/back-end/sql-injection-com-php

Olá @luannsr12, conseguiu resolver seu problema?

Olá, @marcelocardoso. Conseguiu resolver?

Eu só faria um pouquinho diferente... $('#search').on('input', function () { var search = $.trim(this.value).replace(/"/g, '\\\"'); if (!search) { return $('[data-search]').show(); } $('[data-search]') .hide() .filter('[data-search^="' + search + '"]') .show(); }); A ideia é só deixar mais fácil de entender...

Olá, dá uma olhada na respota do @luannsr12 lá na outra dúvida: https://forum.imasters.com.br/topic/582827-validação-de-data-maior-que-atual/

Segue: https://jsfiddle.net/tf85bx9g/ Este é o javascript adicionado... aproveitei boa parte do exemplo que você passou. Mas basicamente o segredo está no setInterval e no clearInterval. Quanto à navegação você pode utilizar o window.history.pushState mas como você me parece um cara sagaz vou deixar você quebrar a cabeça :-) Qualquer coisa, grita! var slideshowInterval = null; function startSlideshow() { slideshowInterval = setInterval(function () { var next = $('.active').next('.bar'); if (!next.length) { next = $('.bar:eq(0)'); } next.click(); }, 2000); } function stopSlideshow() { clearInterval(slideshowInterval); } startSlideshow(); $('.slides') .on('mouseover', stopSlideshow) .on('mouseleave', startSlideshow); --- Referencias: http://api.jquery.com/next/ https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

O player começa de novo por que você abre outra página com um player novo... é como se a cada mudança de página você fechasse o navegador e abrisse de novo: Algumas soluções: - SPA (single page application) - react - vuejs - navegação utilizando AJAX (jQuery, Backbone, etc) - criar páginas com frames (frameset) ou iframes Acho que a solução mais ráṕida com base no que você já em hoje, possa ser as páginas com frames... e depois mudar para um formato de SPA com calma... Referencias: https://www.w3schools.com/tags/tag_frame.asp https://www.w3schools.com/tags/tag_frameset.asp https://www.tutorialspoint.com/html/html_frames.htm

Hmmm... esse exercício é bom, ein... Vamos pensar em um único caso, só duas imagens, uma em cima da outra esmaecendo e aparecendo "em cima" da outra... como poderiamos fazer...? Imagino uma div com duas imagens dentro posicionadas absolutamente.... uma em cima da outra... com a mais em cima, partindo de transparência total, indo para 100% de opacidade... Pensei em uma estrutura como esta... <div class="image-box"> <img src="https://picsum.photos/id/1008/200/200" alt="" /> <img src="https://picsum.photos/id/1012/200/200" alt="" /> </div> E fazer a mágia da animação com CSS... aglo assim... .image-box { position: relative; /* as imagens vão se basear na posição deste elemento para saber sua referencia no plano X, Y */ width: 200px; height: 200px; display: inline-block; /* só para deixar uma do lado da outra */ } .images-box > img { width: 200px; height: 200px; } @keyframes reveal { /* nossa animação, aqui vai o nome de referencia */ 0% { opacity: 0; } 100% { opacity: 1; } } .image-box > img + img { /* uma imagem que apareça depois de outra imagem... */ position: absolute; /* posição absoluta, ou seja, fica "voando" sobre os outros elementos, sua posição se baseia naquele position relative lá em cima */ top: 0; left: 0; animation: reveal 5s ease 5s 1 normal forwards; opacity: 0; /* precisa informar o valor inicial pra não ficar pulando... */ } É... até que ficou bom... https://codepen.io/dgmike/pen/ZNrNvO?editors=1100 Agora, vamos colocar um javascript pra ficar legal... a animação leva em torno de 10s, 5s de espera e 5s de animação de fato (veja a referência do atributo animation). Então... vamos fazer com que o script remova a primeira imagem e adicione uma nova imagem depois, dando inicio a um novo ciclio.... que tal fazer isso em 15 segundos? function changeImage() { setTimeout(function () { var boxes = document.querySelectorAll('.image-box'); var box = Array.from(boxes).sort(function(){ return (.5 - Math.random()); })[0]; // pega um aleatório if (box.querySelectorAll('img').length > 1) { // se só tiver 1 imagem, a gente não remove ela var firstImage = box.querySelector('img'); firstImage.parentNode.removeChild(firstImage); // remove a anterior } var img = document.createElement('img'); // abaixo, geramos uma imagem aleatória img.src = 'https://picsum.photos/id/' + parseInt(Math.random() * 1000) + '/200/200'; img.alt = ''; box.appendChild(img); // e por fim, colocamos a imagem na box changeImage(); // e chamamos de novo, só pra não acabar nunca.... }, 15000); // 15 segundos... } changeImage(); // o inicio é no fim... Bom, já coloquei pra escolher uma caixa aleatória... mas acho que dá pra melhorar como colocar o tempo de 15 segundos aleatório entre 15 e 20... escolher mais de uma imagem por vez... bom, agora é contigo... Ah, segue a versão até agora.... https://codepen.io/dgmike/pen/KLQLBd?editors=1011 Qualquer coisa, grita! --- Referencias https://www.w3schools.com/cssref/css3_pr_animation.asp

Só um detalhe, você está executando o validation no momento da atribuição da mesma, assim ele não vai validar a cada keyup e sim apenas quando o script chegar nesta linha. A correção seria... $("#ID_INPUT").keyup(validation);

Talvez o que você quer fazer não precise de javascript: https://jsfiddle.net/5bL3kehj/

Adicionei lá as máscaras e a alteração, utilizei o removeEventListener e o addEventListener... também precisei colocar o mesmo ao iniciar a página... https://jsbin.com/yobubidifa/1/edit?html,js,output

E a dúvida seria...? Não, brincadeira... Bom, neste caso você tem três opções: - manipular a forma como o input vai manipular as máscaras encapsulando-as em um método só variando conforme o tipo de campo, recomendo limpar o campo no momento em que o usuário trocar de CNPJ para CPF e vice-versa - trocar o campo de input inteiro, atribuindo devida máscara no momento da troca de tipo de campos - deixar os dois campos na página com names distintos para fazer o tratamento do lado do servidor e apenas trocar o display/classe deles quando trocar o radio Use your illusion.

Achei o desafio bem interessante, uma vez que precisamos trabalhar com comparações muito numerosas... Por exemplo, para combinações de três botões existem nove possível alternativas, para 4 existem 16 e assim por diante. Basicamente é o número de botões elevado ao quadrado. Já havia visto um sistema funcional que aproveitava o comparativo binário para isso. Muitas configurações no PHP se valhem disso. Valeu a pena para estudar mais a fundo o assunto (que era bem fraco na minha mente) e implementei uma versão também... está muito rebuscada, mas quem sabe em outro momento faço uma refatoração mais elegante... segue: https://jsbin.com/resoxobiwa/1/edit?html,css,js,output Ah, o jsbin é interativo, você pode trocar a quantidade de "botões" no começo do script :-). --- Referencias: Utilizando operadores binários no mundo real: https://codeburst.io/using-javascript-bitwise-operators-in-real-life-f551a731ff5 Configuração de erros no PHP utilizando valores binários: https://www.php.net/manual/en/errorfunc.constants.php

Toma! HTML: <div> <fieldset> <legend>Escolha o tipo</legend> <label> <input type="radio" value="fisica" data-target="tipo_documento" name="tipo_documento" checked /> Pessoa Física </label> <label> <input type="radio" value="juridica" data-target="tipo_documento" name="tipo_documento" /> Pessoa Jurídica </label> </fieldset> <label> <span data-target="label_documento">Digite o CPF:</span> <input type="text" /> </label> </div> Javascript: var radioInputs = document.querySelectorAll('[data-target=tipo_documento]'); radioInputs.forEach(function (input) { input.addEventListener('change', function (event) { var pergunta = event.target.value === 'fisica' ? 'Digite o CPF:' : 'Digite o CNPJ:'; document.querySelector('[data-target=label_documento]') .innerText = pergunta; }); }); Resultado: https://jsbin.com/soqajorefu/3/edit?html,js,output O código está utilizando o atributo data-* para dizer quem é quem... os radios precisam ter o mesmo name pra funcionar. Acredito que você terá problemas com a função de máscara, mas aí já é outro problema.... Qualquer dúvida, grita! :-)

@SrTunes Como diria Jack, vamos por partes... Primeira dúvida... Sobre o trecho do $.getJSON('/busca.php', { busca: valor }, fn); Por ser GET, a jQuery vai entender que se trata de um valor para apendar/adicionar/concatenar a sua URL, só que de forma mais segura, então você não precisa se preocupar em escapar caracteres como + ou &. Desta forma, digamos que valor tenha o conteúdo de pipoca. Então a jQuery vai montar a URL como /busca.php?busca=pipoca. Agora, o valor vem de uma instrução um pouquinho mais pra cima... var valor = this.value; No caso, this é o input onde você está colocando o texto e value é o valor desse mesmo input. A jQuery utiliza muito essa notação. Sobre a segunda dúvida, acho que vale a pena analisar o que está sendo enviado para o servidor utilizando a ferramenta de desenvolvimento do seu navegador. Sim, você tem.... rsss... Se estiver no chrome, aperte CTRL+i e vai abrir uma área de desenvolvimento, mas não se assuste... vá até a aba network ou rede em português e veja cada requisição acontecendo... Tem um botão com simbolo de proibido, ele limpará o histórico para facilitar.... limpe-o e faça a sua requisição... veja qual URL ele está tentando acessa e como ele está fazendo... Aqui um print do que estou falando... aconteceu um POST na URL do youtube que resultou em um 200 (OK/sucesso).

var botao = document.querySelector('.proximo-passo'); botao.addEventListener(function (event) { event.preventDefault(); document.querySelector('.partial-email').classList.add('hide'); document.querySelector('.partial-twitter').classList.remove('hide'); }); <form action="finaliza.php" id="formulario"> <div class="partial-email"> Informe seu e-mail: <input type="email" name="email" /> <button type="button" class="proximo-passo">Próximo passo</button> </div> <div class="partial-twitter"> Informe seu twitter: <input type="text" name="twitter" /> <button type="submit">Salvar</button> </div> </form> Pensei em começar com uma estrutura simples, que conforme com todos os requisitos que você disse. Daí pensei em fazer uma mágina com o CSS, criar uma classe hide que irá sumir com parte da estrutura... temos um botão fake (type=submit) que o usuário irá clicar achando que está indo para a próxima página e um botão de submit que irá enviar o formulário como um todo. <style> .hide { display: none; } </style> <form action="finaliza.php" id="formulario"> <div class="partial-email"> Informe seu e-mail: <input type="email" name="email" /> <button type="button" class="proximo-passo">Próximo passo</button> </div> <div class="partial-twitter hide"><!-- perceba que adicionei o .hide aqui para que este bloco possa sumir --> Informe seu twitter: <input type="text" name="twitter" /> <button type="submit">Salvar</button> </div> </form> Agora, via JavaScript vamos adicionar uma ação naquele botão de Próximo passo para colocar o .hide no bloco de e-mail e removê-lo do bloco de twitter. var botao = document.querySelector('.proximo-passo'); botao.addEventListener(function (event) { event.preventDefault(); document.querySelector('. }); Simple like that! Tomei a liberdade de utilizar métodos mais simples de entender e mais modernos do que tentar usar coisas como jQuery ou mesmo caçar todos os elementos e fazer um for para procurar por classe ou manipular a classe como string e adicionar a classe ou fazer expressão regular... deixo nas referencias os links das compatibilidades dessas tecnologias para o caso de você querer saber se te atende... Sobre sua dúvida sobre input ou button. O primeiro funciona muito bem para fazer ações distintas no mesmo formulário, já que você precisa adicionar um value, aproveira e adicionar um name e pronto, você receberá qual botão o usuário "clicou". Vejo essa funcionalidade ser pouco explorada, na verdade... mas é uma possíbilidade. Já no outro, temos outras vantagens como por exemplo, poder colocar código HTML como texto do botão.... experimente utilizar uma ag img ;-) .... e fica muito mais fácil de estilizar todos os outros campos já que você diferencia um input de um button mais fácil que pela classe.... não sei se elucidou, mas enfim. Abraços, qualquer coisa, grita! --- Referencias: https://caniuse.com/#feat=classlist https://caniuse.com/#feat=queryselector https://caniuse.com/#feat=addeventlistener

Olá @SrTunes, Vamos do zero. Primeiro, vamos entender uma estrutura json. Ela é uma estrutura de natação de objetos que são facilmente parseados/entendidos/interpretados pelo JavaScript. Basicamente é uma notação que deve ser colocada entre chaves. E não é o chaves da SBT não... são os caracteres { e }. Dentro deles você vai ter uma sequência de atributos e valores separados por dois-pontos... Veja o exemplo: { "nome": "Michael", "frase": "Amigo novo, vinho novo. É quando envelhece que o beberás com gosto.", "idade": 37 } Perceba que entre cada item existe uma vírgula para separar... As aspas nos atributos fazem parte da notação json. Apesar de o javascript poder interpretar sem a necessidade delas, algumas outras linguagens podem ter problemas com isso, então vamos manter, ok :-) Bom, no exemplo inicial, apontei um inteiro para minha idade. Você pode mesclar outras estruturas como arrays e até outros objetos nessa estrutura, fazendo com que você tenha flexibilidade para montar os dados como achar mais conveniente. Veja o exemplo: { "recurso": "busca", "qantidadeTotal": 25, "paginas": 5, "paginaAtual": 1, "proxima": true, "anterior": false, "busca": [ { "recurso": "tweet", "mensagem": "Olá mundo", "usuario": "@dgmike" }, { "recurso": "tweet", "mensagem": "Olá @dgmike", "usuario": "@elcio", "em resposta a": "@dgmike", "links": [ "https://twitter.com/dgmike", "https://twitter.com/elcio" ] } ] } E por aí vai... O legal é que para acessar esses dados você utiliza pontos e colchetes... exemplo: items[1].links[0] === "http://twitter.com/dgmike" Mas por que estou falando tudo isso? Porque você vai usar a estrutura para fazer a chamada AJAX, tanto para enviar quanto para receber os dados. Imagine que a chamada AJAX é como você acessar uma página do servidor sem precisar sair da página. Ela vai "por baixo dos panos" utilizando um objeto XMLHttpRequest ou algo similar. Acontece que existem umas três ou quatro formas de fazer essa requisição e tratar o resultado dependendo do navegador e é aí que a jQuery entra, fazendo a abstração e deixando as requisições mais simples. Para fim de exemplo, vou considerar o exemplo acima como um arquivo que consigo acessar no meu servidor como dados.json, vamos ver como isso funciona... jQuery.ajax({ type: 'GET', url: '/dados.json', error: function () { alert('ocorreu um problema com a requisicao'); }, success: function (dados) { alert('sucesso ao resgatar os dados do servidor: ' + dados.recurso); } }); A jQuery ainda tem uma forma mais acessível para as requisições mais comuns: jQuery.get('/dados.json', function (dados) { alert('consulta realizada com sucesso:' + dados.recurso ); }); Bom, a pesquisa não precisa de fato ser um arquivo com extensão .json, ela pode ser um script PHP que retorne a estrutura JSON. Vamos a um exemplo: <?php $dados = array( "recurso" => "tweet", "tweet" => array( "mensagem" => "Em um ninho de mafagafos", ), ); header("Content-Type: application/json"); // aqui informamos ao servidor que isso é um JSON ;-) echo json_encode($dados); Óbvio que seus dados não precisam ser fixos, eles podem vir de um banco de dados realizando uma query talvez filtrando por um dado vindo do $_GET. Veja... <?php require './conexao.php'; if (!isset($_GET['pesquisa']) || !trim($_GET['pesquisa'])) { header('Content-Type: application/json'); echo json_encode(array('erro' => 'a pesquisa é obrigarória')); exit; } // só vou abrir a conexao pra usar o banco de fato, o mysql_real_escape_string se baseia no banco que está conectado $con = new conexao(); // instancia classe de conxao $con->connect(); // abre conexao com o banco $prepara = 'SELECT `campo` FROM `tabela` WHERE `campo_pesquisa` = \'%s\' LIMIT 1'; $sql = sprintf($prepara, mysql_real_escape_string($valor)); // evitando SQL Injections ;-) $resultado = mysql_query($sql); if (mysql_num_rows($resultado) == 0) { $con->disconnect(); header('Content-Type: application/json'); echo json_encode(array('erro' => 'a pesquisa não retornou nada')); exit; } $dados = mysql_fetch_assoc($resultado); $con->disconnect(); // e, por fim... header('Content-Type: application/json'); echo json_encode(array('erro' => false, 'dados' => $dados)); Agora, basta acessar a URL /busca.php?pesquisa=javali que teremos um arquivo JSON com os dados do banco de dados. Neste ponto cabe um disclaimer: pare de utilizar as funções mysql_* por questões de segurança, experimente o mysqli_* que tem suporte a versão orientada a objetos ou, se preferir, pule diretamente para PDO. Agora, acoplando o seus inputs... <form action="" method="post"> <div class="ui-widget"> <label for="tags">PN do Item:</label> <input id="tags" type="text" name="nome" /> </div> <div class="ui-widget"> <label>Descrição:</label> <input id="descricao" type="text" name="descricao" /> </div> <input type="submit" name="cadastrar" value="Cadastrar" /> </form> <script> $(function(){ var availableTags = <?php echo json_encode($dados); ?>; $("#tags").autocomplete({ source: availableTags, change: function () { // aqui vem a mágica var valor = this.value; if (!$.trim(valor)) { return; } $.getJSON('/busca.php', { busca: valor }, function (dados) { $('#descricao').val(dados.resultado); // ou seja lá o que for... }); } }); }); </script> Aliás, agora pensando aqui... não sei qual o volume de informação que você resgata lá do servidor na primeira requisição, se vale a pena trazer toda a informação e fazer a busca local, sem precisar de requisição extra alguma.... <form action="" method="post"> <div class="ui-widget"> <label for="tags">PN do Item:</label> <input id="tags" type="text" name="nome" /> </div> <div class="ui-widget"> <label>Descrição:</label> <input id="descricao" type="text" name="descricao" /> </div> <input type="submit" name="cadastrar" value="Cadastrar" /> </form> <script> $(function(){ var availableTags = [ { value: "jQuery", desc: "the write less, do more, JavaScript library" }, { value: "jQuery UI", desc: "the official user interface library for jQuery" }, { value: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine" } ]; var selecionado = function (event, ui) { if (!ui.item) { $('#descricao, #tags').val(''); return; } $('#descricao').val(ui.item.desc); }; $("#tags").autocomplete({ source: availableTags, select: selecionado, change: selecionado }); }); </script> Desculpa a colcha de retalhos, mas fui escrevendo conforme as ideias iam surgindo... :-D Qualquer coisa, grita. --- Referencias: http://json.org/ http://api.jquery.com/category/ajax/ http://api.jquery.com/jQuery.getJSON/ https://php.net/json_encode https://www.php.net/mysqli https://www.php.net/pdo

Vi que está utilizando a jQuery-UI. Parabéns por isso :-) Você pode utilizar o evento change do autocomplete: https://api.jqueryui.com/autocomplete/#event-change Com o AJAX da jQuery: http://api.jquery.com/jQuery.getJSON/ Para isso você vai ter uma "página" que vai imprimir apenas o resultado esperado... imagino algo como resgatavalor.php?pn_nome=XPTO e pegar o $_GET pra fazer a devida consulta no banco de dados. Estou meio sem tempo agora pra explicar... tenta aí e posta a versão final pra gente :-D Qualquer coisa, grita.

Experimente, por conta e risco, acessar via contentWindow. Mas como te falei, lá dentro é vida nova, sem jQuery, propenso ao que existir por lá... Veja um exemplo do uso em https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument

Ali na primeira linha... jQuery(document).ready(function( $ ) { O .ready executa a função sem passar o argumento $. Então ele deve estar utilizando o método $ global na página, em alguns casos, como o chrome, é implementado um buscador parecido com a jQuery, que faz a busca sobre os elementos da páginas mas não retorna a mesma coisa, retorna um objeto HTMLDocument (aquele encontrado na mensagem de erro). Recomendo você fazer algo parecido com isto: (function ($) { $(document).ready(function() { // ... aqui de fato vem a implementação } })(jQuery); Veja que você cria uma função anônima que recebe como argumento o $ e instantaneamente executa essa função passando como parâmetro a jQuery, que a partir de agora passa a ser o $. Existem outras abordagens que a própria jquery recomenda. Leia a documentação ;-) Qualquer coisa, grita!

Desculpa, eu não entendi bem a pergunta mas acredito que você queira algo como... <style> .wrapper .table { border-collapse: collapse; } .wrapper .table .table-header th { font-weight: bold; border: 1px solid silver; background: #eee; } .wrapper .table .table-body td { border: 1px solid silver; } </style> <div id="wrapper" class="wrapper"></div> <!-- estes scripts são polifills para que as Promises (then, catch) e o método fetch funcionem em navegadores mais antigos --> <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js"></script> <script> (function () { // utilizado para isolar as variáveis e não causar problemas de segurança futuros var url = 'https://www.governotransparente.com.br/transparencia/api/v1/json/remessas/1194487'; var resultWrapper = document.getElementById('wrapper'); // aqui fica a requisição e as ações sobre cada uma delas fetch(url) .then(checkServerResponse) .then(toJSON) .then(createTable) ['catch'](showErrorMessage); // caso aconteça algum erro em qualquer uma das ações anteriores, faça o tratamento de erros ;-) // tratamento de erros function showErrorMessage(err) { resultWrapper.innerHTML = '<pre>Erro:\r' + err.toString() + '</pre>'; } // verifica se a resposta do servidor foi um sucesso function checkServerResponse(res) { if (res.ok) { return res; } throw new Error('Unable to fetch data from server. Status: ' + res.status); } // tenta converter a resposta do servidor em objeto json manipulável ao invés de texto puro function toJSON(res) { return res.json(); } // converte os dados em tabela e insere no resultWrapper function createTable(data) { var heads = Object.keys(data).map(function (item) { return '<th>' + item + '</th>'; }).join(''); var contents = Object.values(data).map(function (item) { return '<td>' + item + '</td>'; }).join(''); resultWrapper.innerHTML = [ '<table class="table">', '<thead class="table-header">', '<tr>', heads, '</tr>', '</thead>', '<tbody class="table-body">', '<tr>', contents, '</tr>', '</tbody>', '</table>', ].join(''); } }); </script> Você pode ver o código funcionando aqui: https://jsfiddle.net/gkezhv85/5/ Tomei a liberdade de fazer um código mais moderno, não utilizando jQuery e utilizando funcionalidades que os navegadores mais modernos já utilizam como o fetch e as Promises, o que faz o código ficar, na miha opinião, mais organizado, já que cada ação fica em uma função isolada. Também optei por fazer dessa maneira para instigar os estudos do pessoal aqui no fórum... espero ter ajudado, qualquer coisa dá um grito :-D

Se um dia você quiser adicionar um botão de remover o material, a lógica do seu script pode falhar. Recomendo deixar o contador de fora, assim como você fez com o elm_html e incrementá-lo separadamente... $(document).ready(function(){ var elm_html = $('.pedido').html(); //faz uma cópia dos elementos a serem clonados. var counter = 0; $(document).on('click', '.clonador', function(e){ e.preventDefault(); var elementos = elm_html.replace(/\[[0\]]\]/g, '[' + counter +']'); //substitui o valor dos index counter++; // incrementa o contador $('#cadastro').append(elementos); //exibe o clone. }); }); Ah, e o removedor... é claro... <div class="pedido"> { ... } <button type="button" class="removedor">remover</button> </div> <script> $(document).on('click', '.removedor', function (event) { event.preventDefault(); $(this).parents('.pedido').remove(); // navega até o pai com a classe pedido e remove ele inteiro }); </script> Quando ao fato de chegar a informação no seu servidor com possibilidade de números faltando na chave, abstraia... você pode utilizar o foreach($_POST['material'] as $key => $value) do php para saber o que está chegando, onde o $key é a chave que você vai utilizar para saber o $_POST['quantidade'][$key] que você precisa. ;-)

Isto acontece por causa de como o anúncio é montado. A maioria das empresas de publicidade montam os anúncios dentro de um iframe o que significa que o anúncio está em outra página, e dentro dela todo o conteúdo do anínco que varia de um HTML com apenas textos, imagens e links até páginas complexas com React ou até mesmo flash. Basicamente você está deixando uma "janela" aberta para outro site exibir o anúncio. Li o script que está no link que você passou e pude comprovar a existencia do tal iframe: Segue a transcrição (apaguei alguns caracteres da linha para ficar legível)... var content = '<iframe width="300" [...] src="'+ url +'" scrolling="no"></iframe>'; Dessa forma, os eventos (de click por exemplo) precisam ser anexados nessa página onde está apontando o iframe. Geralmente isso não vai ser possível por segurança interdomínios, o próprio navegador barra essa possibilidade. Ainda bem que existe essa proteção, já pensou se um anúncio malicioso pudesse resgatar as chaves de segurança nos cookies dos seus usuários? Existe um arquivo chamado crossdomain.xml que o servidor da página de destino pode adicionar permitindo que os scripts de outros domínios possam "entrar" na página, mas acho muito pouco provavel que qualquer empresa de publicidade abra essa brecha de segurança e confiar que o seu site ou o de terceiros possa nunca sofrer um ataque ;-) Referencias/Recomendações sobre segurança: http://blog.securelayer7.net/owasp-top-10-security-misconfiguration-5-cors-vulnerability-patch/ https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.md https://code.tutsplus.com/tutorials/quick-tip-a-guide-to-cross-domain-policy-files--active-3832

O que aparece no script que você está fazendo o POST via AJAX? Você pode verificar isso escrevendo o seguinte código em PHP. <pre><?php var_dump($_POST); ?></pre> Aparentemente o código está correto... eu só usaria .map ao invés de .each e removeria a seguinte referência pois ela é redundante... $(document).ready(function() { ... e consequentemente, o fechamento da chamada também...

Pelo que entendi, você quer que o usuário possa te enviar um pedido com vários materiais e um valor para cada um deles, certo? Algo como.... <?php $dados = array( 'materiais' => array( 1 => 'cimento', 2 => 'tijolo', ), 'quantidades' => array( 1 => '21', 2 => '200', ), ); ?> Ou ainda... para ficar mais fácil... <?php $dados = array( 1 => array( 'produto' => 'cimento', 'quantidade' => '200', ), 2 => array 'produto' => 'tijolo', 'quantidade' => '400', ), ); ?>