Jump to content
vinicius.david

[Resolvido] 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

Share this post


Link to post
Share on other 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");
    }
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 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"); }  
    • By 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>  
    • By 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!
    • By 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.
    • By 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
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.