Ir para conteúdo
vinicius.david

Como adicionar uma classe caso um input não for preenchido em jquery

Recommended Posts

Gostaria de saber como adicionar a classe se um input de uma função de preenchimento automático estiver vazio? Existe uma função que autocomplete o endereço ao colocar o código postal. Se, por exemplo, o endereço_1 está vazio, addClass form-control senão sem-bordas.

Eu tentei assim: 

$('#input-address-1').on('change',function(){
if($(this).val() == ''){
  $(this).next().removeClass("form-control");
}else{
  $(this).next().addClass("sem-bordas");
}

Mas sem sucesso

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você não especificou onde deseja acrescentar a classe, então entendo que será no próprio elemento. Fica assim:

$("#input-address-1").on("change", function() {
    if($(this).val() == "") {
        $(this).removeClass("sem-bordas").addClass("form-control");
    } else {
        $(this).removeClass("form-control").addClass("sem-bordas");
    }
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Rengavitp
      Boa noite pessoal,
       
      Estou com a seguinte dificuldade, preciso habilitar o arrastar e soltar de uma tabela, as paginas em que preencho a tabela com java a função funciona normal, mas onde preencho a tabela com jquey nao consigo habilitar essa funcao de arrastar e soltar, alguém pode me ajudar? abaixo segue o modal que contem a tabela.
       
      <!--Janela para listar pedidos--> <div class="modal fade" id="visualizaPedidos" role="dialog"> <div class="modal-sm center-block margin-top-30"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Lista de Pedidos</h4> </div> <div class="panel-body"> <table id="tabela_ordens" class="table tab table-striped"> <!--aqui preencho com jquery--> </table> </div> <script type="text/javascript"> $('tbody').sortable(); </script> <br> <div class="modal-footer center-block"> <button type="button" class="btn btn-primary" onclick="geraOrdemEntrega()">Entrega</button><button type="button" class="btn btn-primary" onclick="geraOrdemCarga()">Carga</button> </div> </div> </div> </div> <!--encerra modal-->  e abaixo o servlet que preenche a tabela
       
      try { //recebe parametros Carga carga = new Carga(); carga.setCd_status_carga(Integer.parseInt(request.getParameter("status"))); carga.setCd_uf_carga(Integer.parseInt(request.getParameter("estado"))); List<Carga> pedidos = new CargaDao().listaPedidosPorStatusEUf(carga); if (pedidos.size() > 0) { out.print( "<thead>" + "<th>Pedido</th>" + "<th>Unidade</th>" + "</thead>" ); out.print("<tbody>"); for (Carga dado : pedidos) { out.print( "<tr>" + "<td>" + dado.getPedido() + "</td>" + "<td>" + dado.getUn() + "</td>" + "</tr>" ); } out.print("</tbody>"); } else { out.print("vaziu"); } } catch (NumberFormatException e) { out.print("erro"); System.err.println("errrrrrou"); }  
    • Por kenio Junio
      Estou desenvolvendo um sistema com PHP e AJAX adiciono em uma tabela uma linha ate ai tudo normal, mas depois que adicionei a linha na tabela quero apagar. 
      estou usando o on(), mas parece não esta funcionando. 
       
      JAVASCRIPT
      $('.extList').on('click', function(){ var idPordEx = $(this).attr('id'); $(".addStatus").html('<span class="add"><i class="fa fa-spinner fa-spin fa-3x fa-fw" style=""></i> Excluindo... <span></span></span>'); $.ajax({ type: "POST", url: "sys/excluirPreco.php", data: 'id='+idPordEx+'', success: function( data ) { var dadosOb = JSON.parse(data); var segundos = 7; if (dadosOb.excluiu == 'sim') { $(".addStatus").html('<span class="checkVeri"><i class="fa fa-check-circle" aria-hidden="true"></i> Excluido com sucesso! </span>'); setTimeout(function(){ $('.checkVeri').hide(); }, segundos*1000); $('#consu_'+dadosOb.idList).remove(); }else if(dadosOb.excluiu == 'sim' || dadosOb.erro == 'sim'){ $(".addStatus").html('<span class="FailVeri"><i class="fa fa-times-circle" aria-hidden="true"></i> Erro ao excluir! </span>'); setTimeout(function(){ $('.FailVeri').hide(); }, segundos*1000); } }, error: function(){ } }); }); PHP
      <?php include_once "../../../config.php"; include_once "../../../classes/BD.class.php"; if (isset($_POST['id'])) { $id = $_POST['id']; $DeletProd = BD::conn()->prepare("DELETE FROM `preco_estado` WHERE id = ?"); if($DeletProd->execute(array($id))){ die(json_encode(array('excluiu' => 'sim','idList' => $id))); }else{ die(json_encode(array('excluiu' => 'nao'))); } }else{ die(json_encode(array('erro' => 'sim'))); } ?> E O HTML 
      <tr id="consu_<?php echo $finalization->id; ?>"> <td><?php echo $finalization->id; ?></td> <td><?php echo $finalization->estado; ?></td> <td><span class="badge bg-light-blue">R$ <?php echo number_format($finalization->preco,2,',','.'); ?></span></td> <td><div class="extList" id="<?php echo $finalization->id;?>"><i class="fa fa-times lixo" aria-hidden="true"></i></a></td> </tr>  
    • Por Wualace Chaves
      Estou utilizando o código abaixo para acessar uma imagem com jquery:

      window.addEventListener('DOMContentLoaded', function (e) {
          var minhaimagem = document.querySelector('#id_da_minha_imagem');
          minhaimagem.addEventListener('click', function (e) {
             alert('Voce clicou na imagem');
          }, false);
      }, false);
       
      O código acima funciona perfeitamente quando a imagem está fora de um Gridview.
      Minha dúvida é: Como faço para acessar uma imagem que está dentro de um Gridview em um EditItemTemplate??
      Pelo que pesquisei na net o código acima não funciona porque o elemento ainda não existe no momento do document.ready.
       
      Não tenho experiência com jquery. Existe um jeito de contornar esta situação??

      Desde já agradeço!
    • Por Omar~
      É o seguinte: Num projeto aqui venho a receber vários entradas do banco de dados. Normalmente usaria <table> para exibir esses resultados.
      Mas nessa em questão decidir exibir cada resultado referente em linhas, e no design responsivo apenas exibir uma linha de cada resultado e criar um botão para abrir uma caixa com os dados em questão.
      Vamos a simulação que fiz como deve funcionar o negócio:
       
      Nessa simulação temos 10 linhas geradas, digamos que seja o resultado de um loop gerado a partir de dados obtidos. Em cada linha tem um botão para exibir todo contudo daquela tabela do banco em vigor.
      Muito bem vamos a dúvida:
      Como eu faço para manipular o bloco de exibição de resultados que abre para cima (essa direção deve ser a padrão) de forma que se não houver espaço em tela para cima, o bloco seja seja exibido para baixo?
      Que é possível fazer é, um exemplo é o próprio fórum aqui que usa isso ao se levar o mouse em cima de um tópico na lista um bloco aparece com os dados do post, mas se não houver espaço em tela para uma direção o mesmo bloco é reposicionado. Em outras palavras o que quero fazer é a mesma coisa.
    • Por kewyn
      Boa noite pessoal.
       Estou com problema na logica da .animate de meu banner,
      quero q as imagens entre umas atras da outra, e não q ele fique atras como esta, quero q ela ganhe esse feito na hora q eu clico no botão, quanto para a esquerda, quanto para a direita, tipo slide mesmo, já quebrei a cabeça e n consigo, se alguém puder me ajuda , agradeço desde ja.
      segue meu jquery:
          $(document).ready(function(){
                  
                  //Clique do botão esquerda
                  $('#esquerda').click(function(){
                  
                      var largura_div_container = $('#banners').width();
                      var qtde_imagens = $('#banners img').length;
                      
                      $('#banners img').each(function(){    
                          var zindex = parseInt($(this).css('z-index'))+1;
                          
                          $(this).css('z-index', zindex);    
                          if (qtde_imagens == (zindex-1)) {
                              
                              $(this).animate({
                                  'left' : '-'+largura_div_container+'px'
                              }, 1500, function() {
                                  $(this).css({
                                      'z-index': '1',
                                      'left': '0px'
                                  });
                              });
                          }
                              
                              
                          
                      });
                      
                  });
                  
                  
                  $('#direita').click(function(){
                  
                      var largura_div_container = $('#banners').width();
                      var qtde_imagens = $('#banners img').length;
                      
                      $('#banners img').each(function(){    
                          var zindex = parseInt($(this).css('z-index'))+1;
                          
                          $(this).css('z-index', zindex);    
                          if (qtde_imagens == (zindex-1)) {
                              
                              $(this).animate({
                                  'left' : largura_div_container+'px'
                                  }, 1500, function() {
                                      $(this).css({
                                      'z-index': '1',
                                      'left': '0px'
                                  });
                              });
                          }
                          
                      });
                      
                  });
                  
              
              });
          </script>
      index.html
×

Informação importante

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