Ir para conteúdo

POWERED BY:

Arquivado

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

  • -2
Visitante

Criação de Inputs Dinamicamente Herdando o Estilo

Perguntado por Visitante

Pergunta

Visitante   

Visitante
Postado

Preciso de uma ajuda para criar inputs dinamicamente, sou novato e não sei quase nada de javascript.

Quando a página carrega, aparece um modal box, que é o número de campos que vão ser criados, o usuário que vai digitar quantos ele quer, por exemplo se ele digitar 3 , é pra criar 3 campos.

O problema é que eu não sei como passar o valor do campo pra javascript e aí criar(eu não quero um botão que o usuário tenha que ficar clicando, isso eu já tenho!)

Obs: O campo tem que herdar o estilo do campo original(eu coloquei um só de exemplo), pra ficar alinhado e correto, segue o código:

Código do Modal: 

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">CNAE - Classificação Nacional de Atividades Econômicas</h4>
            </div>
            <div class="modal-body">
                <p>Quantos CNAE's serão registrados para essa empresa?</p>
                <form>
                    <div class="form-group">
                        <input type="number" class="form-control" required min="1" max="12" placeholder="Número de CNAE">
                    </div>
                    <button type="submit" class="btn btn-primary">Enviar Dados</button>
                </form>
            </div>
        </div>
    </div>
</div>

 

Código do campo a ser "Clonado": 

<div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> CNAE </label>

                                    <div class="col-sm-9">
                                        <input input type="text" name="cnae" maxlength="9" onKeyPress="formatar('****-*/**',this)" placeholder="Classificação Nacional de Atividades Econômicas" value="<?php echo $campo['lista_servico']?>" id="lista_servico" class="col-xs-10 col-sm-5">                                
                                          </div>
                                    </div>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

8 respostas a esta questão

Recommended Posts

Visitante   

Visitante
Postado

É Bem isso que eu preciso, só que o problema é que ele tá criando os inputs dentro do modal box ,   e ele tem que criar na página não no modal

Compartilhar este post

Link para o post
Compartilhar em outros sites

itlpps    109

itlpps
Postado

Ele vai criar onde estiver a div com id de 'cnae'. Se você por a div fora do modal, ele cria fora. 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Visitante   

Visitante
Postado
5 minutos atrás, itlpps disse:

Ele vai criar onde estiver a div com id de 'cnae'. Se você por a div fora do modal, ele cria fora. 

Então ele abre o modal ao iniciar a página, o usuário digita e  o input já é automaticamente criado mas na própria página e não dentro do modal box, mas é  mais ou menos isso, só tem que criar dentro do body e não do modal e a div com id 'cnae' tá fora do modal

Compartilhar este post

Link para o post
Compartilhar em outros sites

Visitante   

Visitante
Postado

Eu consigo com o mesmo código clonar outros campos, tipo todo meu formulário?

E depois como eu faço para passar os dados pro banco de dados, passo por array?

 

Código: 

<form class="form-horizontal" name="cadastro_economia" method="post" action="#" role="form">
                                    <!-- #section:elements.form -->
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> CNAE </label>

                                    <div class="col-sm-9">
                                        <input input type="text" name="cnae[]" maxlength="9" onKeyPress="formatar('****-*/**',this)" placeholder="Classificação Nacional de Atividades Econômicas" id="form-field-1" class="col-xs-10 col-sm-5">                                
                                          </div>
                                    </div>
<div id="cnae"></div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Descrição </label>

                                        <div class="col-sm-9">
                                            <textarea name="descricao" maxlength="250" placeholder="Descrição" value="<?php echo $campo['descricao']?>" id="form-field-1" class="col-xs-10 col-sm-5" /></textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Tipo de CNAE </label>

                                        <div class="col-sm-9">
                                        <input type="checkbox" name="tipo_cnae" onclick="document.getElementById('lista_servico').disabled = !this.checked;" value="SIM">
  <label for="CNAE">Empresa cadastrada com CNAE do tipo Serviço</label>                                
                                          </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Lista de Serviço </label>

                                        <div class="col-sm-9">
                                        <input input type="text" disabled="true" name="lista_servico" maxlength="40" placeholder="Lista de Serviço" value="<?php echo $campo['lista_servico']?>" id="lista_servico" class="col-xs-10 col-sm-5">
  <label for="CNAE"></label>                                
                                          </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Anexo Simples Nacional </label>

                                        <div class="col-sm-9">
                                            <input type="text" name="anexo_simples" maxlength="40" placeholder="Anexo Simples Nacional" value="<?php echo $campo['anexo_simples']?>" id="form-field-1" class="col-xs-10 col-sm-5" />
                                        </div>
                                    </div>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

itlpps    109

itlpps
Postado

Coloca propiedade name no input, com colchetes: 

name="cnae[]"

E no php, vai vir um array: 

$_POST['cnae']

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para lista de Perguntas Perguntas e respostas rápidas

  • Conteúdo Similar

    • belann
      Navbar no Nextjs
      Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • ILR master
      Fixar div até atingir uma certa altura
      Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • violin101
      Javascript - Calcular Valores Monetário em Tempo Real
      Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • violin101
      [Resolvido] JavaScript - Exibir logo dentro da Tabela html
      Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • violin101
      Javascript - Passar Parâmetros para uma Função.
      Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
×

Informação importante

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

  Aceito