404

D7net
:/ var / www / html / crsys /
Filename : descricao.php
back
<form id="form_exemplo">
  <input type="number" id="qtde" placeholder="Qtde" min="1" />
  <input type="text" id="nome_produto" placeholder="Nome do produto" />
  <input type="number" id="largura" placeholder="Largura (cm)" />
  <input type="number" id="altura" placeholder="Altura (cm)" />

  <label><input type="checkbox" id="acabamento_brilho" /> Acabamento Brilho</label>
  <label><input type="checkbox" id="com_borda" /> Com Borda</label>
  <label><input type="checkbox" id="personalizado" /> Personalizado</label>

  <br><br>
  <strong>Descrição:</strong>
  <p id="descricao_saida"></p>
</form>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const campos = {
    qtde: document.getElementById('qtde'),
    nome: document.getElementById('nome_produto'),
    largura: document.getElementById('largura'),
    altura: document.getElementById('altura'),
    acabamento: document.getElementById('acabamento_brilho'),
    borda: document.getElementById('com_borda'),
    personalizado: document.getElementById('personalizado')
  };

  const campoDescricao = document.getElementById('descricao_saida');

  function atualizarDescricao() {
    let descricao = '';

    const qtdeRaw = parseInt(campos.qtde.value) || 0;
    const nome = campos.nome.value.trim();
    const larguraRaw = parseFloat(campos.largura.value.replace(',', '.')) || 0;
    const alturaRaw = parseFloat(campos.altura.value.replace(',', '.')) || 0;

    const largura = larguraRaw.toLocaleString('pt-BR', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });

    const altura = alturaRaw.toLocaleString('pt-BR', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    });

    if (qtdeRaw > 1) {
      descricao += `${qtdeRaw} `;
    }

    if (nome) {
      descricao += `${nome}`;
    }

    if (larguraRaw && alturaRaw) {
      descricao += ` (${largura} x ${altura} cm)`;
    }

    const adicionais = [];

    if (campos.acabamento.checked) {
      adicionais.push('acabamento em brilho');
    } else {
      adicionais.push('acabamento sem brilho');
    }

    if (campos.borda.checked) adicionais.push('com borda');
    if (campos.personalizado.checked) adicionais.push('personalizado');

    if (adicionais.length > 0) {
      descricao += ` - ${adicionais.join(', ')}`;
    }

    campoDescricao.textContent = descricao;
  }

  // Adiciona listeners a todos os campos
  Object.values(campos).forEach(el => {
    el.addEventListener('input', atualizarDescricao);
    el.addEventListener('change', atualizarDescricao);
  });

  // Inicializa a descrição
  atualizarDescricao();
});
</script>