washalbano

<div style="float: left; margin-right: 20px"> checkbox1<input type="checkbox" id="aprendiz" value="aaa" data-target="item1" /><br /> checkbox2<input type="checkbox" id="aluno" value="bbb" data-target="item2" /><br /> </div> <div style="float: left"> <select multiple size="2"> <option id="item1">item1</option> <option id="item2">item2</option> </select> </div> ... <script> for (const checkBox of document.querySelectorAll('input[type="checkbox"]')) { checkBox.addEventListener('input', (e) => { document.getElementById(e.currentTarget.dataset.target).selected = e.currentTarget.checked }) } </script>

Se a id for tipo primary key, não será possível ter duas ids iguais. essa linha vai tentar fazer com que duas ids sejam iguais

Olá @Mauricio Molina! Nos ajude a entender melhor o cenário: Esse site foi construído com o framework wordpress, laravel, codeigniter, zend ou outro? Foi codado em php5, php7 ou php8? O front tb usa algum framework ou lib: react, vue, jquery ou outro? Os dados referentes a imagem são gravados em algum database? MySql/MariaDB, Postgresql ou outro?

Certifique-se de que os outros inputs neste form tenham o mesmo nome e perceba que o nome da variável é nome_produto, no singular. remova o s do final Para verificar o conteúdo de $_POST: echo '<pre>$_POST: '; print_r($_POST); echo '</pre>'; die(FILE . ' at line: ' . LINE);

Veja se consegue se orientar por esse exemplo: https://github.com/w-studies/frequency-table

<div class="container-fluid mb-5"> <div class="row"> <div class="col-lg-2"></div> <div class="col-lg-8 mb-5"> <div class="caixa-orcamento pb-5"> <form action="" method="POST" onchange="atualizarPreco()" name="formulario"> <h3 class="text-center pt-5 pb-4 labels">Pedido de Orçamento:</h3> <table class="m-auto"> <tr> <td class="fw-bold labels">Tipo de página web:</td> <td> <!-- Três tipos de pãgina Fictícia com os valores de 400, 500 e 600 respetivamente --> <select name="tipopagina" id="tipopagina" required> <option value="0"></option> <option value="400" id="estatica">Estática</option> <option value="500" id="dinamica" >Dinâmica</option> <option value="600" id="loja" >Loja</option> </select> </td> </tr> <tr> <!-- Descontos de Prazo - de 1 Mes- 5%, 2 Meses-10%, 3 Meses- 15$, 4 Meses- 20%, em diante sempre 20% --> <td class="fw-bold labels">Prazo em meses:</td> <td><input type="number" min='0' id="prazo"></td> </tr> </table> <h5 class="text-center pt-5 pb-4 labels">Marque os separadores desejados</h5> <!-- Cada check selecionado soma 400 ao valor total --> <div class="checkbox labels text-center mb-5"> <input type="checkbox" class="checkbox" name="separador-1" value="400">Quem Somos <input type="checkbox" class="checkbox" name="separador-2" value="400">Onde estamos <input type="checkbox" class="checkbox" name="separador-3" value="400">Galeria de fotografias <br> <input type="checkbox" class="checkbox" name="separador-4" value="400">eCommerce <input type="checkbox" class="checkbox" name="separador-5" value="400">Gestão Interna <input type="checkbox" class="checkbox" name="separador-6" value="400">Notícias <input type="checkbox" class="checkbox" name="separador-7" value="400">Redes Sociais </div> <h5 class="text-center labels">Orçamento estimado:</h5> <p class="text-center labels">(É um valor meramente indicativo, pode sofrer alterações)</p> <div class="resultado-orcamento text-center"> <!-- Valor total do orçamento com os botões de resetar e submeter o orçamento --> <input type="text" id="valor-orcamento" name="valor-orcamento" value=""> <br> <button type="reset" class="btn btn-primary mt-4" id="reset" name="reset">Apagar Orçamento</button> <button type="submit" class="btn btn-primary mt-4" id="submeter" name="submeter">Submeter Orçamento</button> </div> </form> </div> </div> <div class="col-lg-2"></div> </div> </div> const eTipoPagina = document.getElementById('tipopagina') const eValorOrcamento = document.getElementById('valor-orcamento') // elementos que, ao serem alterados, devem atualizar o preço const eObserved = document.querySelectorAll('#tipopagina, #prazo, div.checkbox input[type="checkbox"]') for (const element of eObserved) { element.addEventListener('input', atualizarPreco) } function atualizarPreco() { let preco = eTipoPagina.value // Desconto de 5% por cada mês de prazo (sobre valor total do orçamento) (máximo 20% de desconto que equivale a 4 meses máximo. A partir daí é sempre 20%) var prazo = document.getElementById('prazo').value if (prazo == 0) { preco = +preco + 0 } else if (prazo == 1) { preco = +preco - (preco * 0.05) } else if (prazo == 2) { preco = +preco - (preco * 0.10) } else if (prazo == 3) { preco = +preco - (preco * 0.15) } else { preco = +preco - (preco * 0.20) } // percorre cada checkbox marcado e acrescenta o valor ao preço for (const checkBox of document.querySelectorAll('div.checkbox input[type="checkbox"]')) { if (checkBox.checked) { preco = +preco + +checkBox.value } } eValorOrcamento.value = preco }

Olá! Aparentemente é erro de conexão com o database. Verifique se os acessos estão corretos e o database existe. O sistema usa algum orm?

pelo screenshot não entendi o que o sr. quer. Mas veja se isso te ajuda: <!doctype html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Document</title> <style> * { box-sizing: border-box; } article { display: flex; flex-direction: column; align-items: center; } .page { display: flex; flex-direction: column; align-items: center; max-width: calc(210mm - 5mm); height: calc(297mm - 5mm); max-height: calc(297mm - 5mm); padding: 10mm 15mm 10mm; font-size: 12px; border: thin solid black; font-family: courier, arial, helvetica; } #texto1 { line-height: 1.5; text-align: justify; display: flex; flex-direction: column; flex-grow: 1; } footer.signature { width: 50%; display: flex; flex-direction: column; } .signature-line { border: none; border-bottom: thin solid #777; width: 100%; } .signature-items { display: flex; justify-content: space-around; } </style> </head> <body> <main> <article> <div class='page'> <div id="texto1"> <h2>What is Lorem Ipsum?</h2> <p> <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <h2>Why do we use it?</h2> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> <h2>Where does it come from?</h2> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p> <h2>Where can I get some?</h2> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p> </div> <footer class='signature'> <hr class='signature-line'> <div class='signature-items'> <small>Cliente</small> <small>Convenção</small> <small>SECRETÁRIO(A)</small> </div> </footer> </div> </article> </main> </body> </html>

Olá! Se puder, mostre-nos um screenshot do que pretendes fazer

Olá! Da forma como o sr. fez, ids ficaram repetidas. ids devem ser únicas (não podem se repetir) Crie um wrapper, use classes... segue sugestão: <div class="container preview-wrapper"> <label> <input type="file" accept=".png, .jpeg, .jpg, .pdf" multiple> <i class="fas fa-upload"></i> Escolha seus arquivos </label> <p class="num-of-files">Nenhum arquivo escolhido</p> <div class="preview-images"></div> </div> <div class="container preview-wrapper"> <label> <input type="file" accept=".png, .jpeg, .jpg, .pdf" multiple> <i class="fas fa-upload"></i> Escolha seus arquivos </label> <p class="num-of-files">Nenhum arquivo escolhido</p> <div class="preview-images"></div> </div> * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik", sans-serif; } body { background-color: #f5f8ff; } .container { background-color: #ffffff; width: 60%; min-width: 450px; position: relative; margin: 50px auto; padding: 50px 20px; border-radius: 7px; box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05); } input[type="file"] { display: none; } label { display: block; position: relative; background-color: #025bee; color: #ffffff; font-size: 18px; text-align: center; width: 300px; padding: 18px 0; margin: auto; border-radius: 5px; cursor: pointer; } .container p { text-align: center; margin: 20px 0 30px 0; } .preview-images { width: 80%; position: relative; margin: auto; display: flex; justify-content: space-evenly; gap: 20px; flex-wrap: wrap; } figure { width: 45%; } img { width: 100%; } figcaption { text-align: center; font-size: 2.4vmin; margin-top: 0.5vmin; } const handleFileInput = async e => { const fileInput = e.target const wrapper = e.currentTarget const imagesContainer = wrapper.querySelector('.preview-images') const diplayNumOfFiles = wrapper.querySelector('.num-of-files') // limpa imagesContainer imagesContainer.innerHTML = '' // exibe o número de arquivos selecionados diplayNumOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados` // para cada arquivo selecionado for (const file of fileInput.files) { const figure = await fileReader(file) imagesContainer.append(figure) } } const fileReader = async (file) => { const reader = new FileReader() const figure = document.createElement('figure') const figCap = document.createElement('figcaption') figCap.innerText = file.name figure.appendChild(figCap) reader.onload = () => { let img = document.createElement('img') if (figCap.innerText.split('.').pop() == 'pdf') { img.setAttribute('src', 'pdf.png') } else { img.setAttribute('src', reader.result) } figure.insertBefore(img, figCap) } await reader.readAsDataURL(file) return figure; } // encontra todos .preview-wrappers const previewWrappers = document.querySelectorAll('.preview-wrapper') // para cada wrapper encontrado for (const wrapper of previewWrappers) { // escuta o evento input wrapper.addEventListener('input', handleFileInput) }

Olá! Isso acontece pq você precisa "escutar" as alterações no checkbox. Sugestão: <script> const checkedCustomize = document.getElementById("checkbox"); checkedCustomize.addEventListener('input', (e) => { if (e.target.checked) { alert("Checkbox marcado"); } else { console.log("checkbox não marcado"); } }) </script> Dessa forma, cada vez que o checkbox sofrer alteração, será verificado novamente como está o seu atributo checked

Olá! Segue sugestão: <?php // Excluir um arquivo especificado $file = fopen('pagina2.php', 'w'); echo fwrite($file, 'Hello World. Testing!'); fclose($file); unlink('pagina2.php'); function removeCommentsFromFiles(array $files): void { // para cada arquivo em $files foreach ($files as $file) { // carregue o conteúdo do arquivo, cada linha em uma índice do array $fileContent $fileContent = file($file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); // para linha em $fileContent foreach ($fileContent as $index => $row) { // remova os espaços em branco no início e no fim da linha $trimmedRow = trim($row); // se a linha começa com duas barras: // // ou se a linha começa com hash: # // ou se a linha começa com barra asterisco: /* if (preg_match('/^(\/\/|#|\/\*)/', $trimmedRow)) { // remova essa linha de $fileContent unset($fileContent[$index]); } } // junte todas as linhas do array em uma string $fileString = implode("\n", $fileContent); // abre o arquivo $noCommnentsFile = fopen($file, 'w'); // grava a string sem comentários fwrite($noCommnentsFile, $fileString); // fecha o arquivo fclose($noCommnentsFile); } } // executa a função para remover os comentários dos arquivos page3.php e page4.php removeCommentsFromFiles(['page3.php', 'page4.php']);

html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <main> <div class="distribution-calc-wrapper"> <h1>Simule</h1> <small>Insira abaixo</small> <div class="form-wrapper"> <div> <label>Altura <small>(mm)</small></label> <input type="number" name="altura" step="1" min="1" value="10"> </div> <div> <label>Largura <small>(mm)</small></label> <input type="number" name="largura" step="1" min="1" value="10"> </div> <div> <label>Quantidade</label> <input type="number" name="quantidade" step="1" min="1" value="10"> </div> </div> <div class="messenger"></div> <div class="stage"></div> </div> </main> <script src="assets/js/app.js"></script> </body> </html> css * { box-sizing: border-box; } main { max-width: 480px; border: thin solid #ccc; margin: 0 auto; position: relative; } .form-wrapper, .messenger, .stage { display: flex; margin-top: 12px; } main, .form-wrapper div, .messenger, .stage { padding: 12px; } .messenger { background-color: #ccc; display: block } .messenger span { font-weight: bold; color: green; } .form-wrapper div { padding: 12px; max-width: 33.33%; vertical-align: baseline; } .stage { border: 2px solid red; width: 210mm; height: 297mm; transform: scale(.57); transform-origin: top left; position: absolute; top: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; } input { padding: 6px; display: block; max-width: 100%; } .adesivo { background-color: green; margin: 0; display: flex; align-items: center; justify-content: center; align-self: flex-start; font-size: 2rem; color: white; border: 2px solid white; } js const distributionCalc = document.querySelector('.distribution-calc-wrapper') const formWrapper = distributionCalc.querySelector('.form-wrapper') const messenger = distributionCalc.querySelector('.messenger') const stage = distributionCalc.querySelector('.stage') // margem de 5mm const margem = 5; // dados da página const page = { // A4 altura : 297 - (2 * margem), largura: 210 - (2 * margem), } page.area = page.altura * page.largura page.orientation = page.largura < page.altura ? 'portrait' : 'landscape' // dados para do adesivo let altura = 10; let largura = 10; let quantidade = 10; formWrapper.addEventListener('input', (e) => { const element = e.target; if (element.matches('[name="altura"]')) { altura = element.value } else if (element.matches('[name="largura"]')) { largura = element.value } else if (element.matches('[name="quantidade"]')) { quantidade = element.value } const adesivo = { altura, largura, area: altura * largura } // calcular quantos adesivos cabem em uma página portrait // Divide-se a largura maior pela largura menor, desconsiderando as casas decimais const divisaoLarguras = Math.floor(page.largura / adesivo.largura) // Divide-se a altura maior pela altura menor, desconsiderando as casas decimais const divisaoAlturas = Math.floor(page.altura / adesivo.altura) // Multiplica-se o resultado da divisão das larguras pelo resultado da divisão das alturas const maxItemsPerPage = divisaoLarguras * divisaoAlturas; const adesivoElement = document.createElement('div'); adesivoElement.classList.add('adesivo'); adesivoElement.style.width = `${largura}mm` adesivoElement.style.height = `${altura}mm` stage.innerHTML = ''; const maxItems = quantidade > maxItemsPerPage ? maxItemsPerPage : quantidade for (let i = 1; i <= maxItems; i++) { adesivoElement.textContent = i stage.appendChild(adesivoElement.cloneNode(true)) } const quantidadeDeFolhas = Math.ceil(quantidade / maxItemsPerPage); messenger.innerHTML = `Quantidade necessária de folhas: <span>${quantidadeDeFolhas}</span><br> Quantidade máxima de adesivos por folha: <span>${maxItemsPerPage}</span>` }) Só não tenho certeza se acertei a matemática que o sr. precisa