Duvida Javascript básico.

26/02/2018

0

Duvida Javascript.
Bom dia, estou com uma duvida relacionado a função on change mais tabela.
Estou usando o metodo on change em conjunto com um select e uma tabela.

Exemplo :

O colaborador abre um formulário e nele aparece 1 campo combo box, nele pode-se selecionar 2 informações Sim ou Não.

Se o colaborador escolhe sim não acontece nada, se ele escolhe não é apresentado para ele 3 locais de preenchimento, (Produtos adquiridos, preço do produto e prazo de pagamento).

$(document).ready(function(){
	    //Chama o evento após selecionar um valor
	    $(''#novo_cliente'').on(''change'', function() {
	        //Verifica se o valor é igual a 1 e mostra a divCnpj
	      if ( this.value == ''novo_client_n'')
	      {
	            
	        $("#info_cli_antig").show();
	        
	        	        
	      }
	        //Se não for nem 1 nem 2 esconde as duas
	        else{
	             
	              $("#info_cli_antig").hide();
	              
	            
	           
	        } 
	    });
	});


HTML
 <head>
    <script type="text/javascript" src="esp_cliente.js"></script>
  </head>

  <body>

    <div class="fluig-style-guide">
      <form name="form" role="form">

        <div class="panel panel-default" id="pn_aberturaProjetEmbala">
          <div class="panel-heading">
            <h3 class="panel-title">Abertura de projetos de embalagem </h3>
          </div>
          <div class="panel-body">

            <div class="col-md-3">
              <label class="control-label">Novo Cliente</label>
              <select id="novo_cliente">
                <option value="">Selecione</option>
							  <option value="novo_client_s">Sim</option>
							  <option value="novo_client_n">Nao</option>	         
              </select>
            </div>

            <div class="table-responsive" style="display: none;" name="info_cli_antig" id="info_cli_antig">
              <table class="table table-striped table-bordered" tablename="tb_info_cli_antig" id="tb_info_cli_antig" deleteicon="/ecm_resources/resources/assets/images/delete_24_Original.png">
                <thead>
                  <tr>
                    <th>Informacoes</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <label class="control-label">Produtos adquirios</label>
                      <input type="text" id="pro_adquir" name="pro_adquir" class="form-control">
                    </td>
                    <td>
                      <label class="control-label">preco do produto</label>
                      <input type="text" id="prec_produt" name="prec_produt" class="form-control">
                    </td>
                    <td>
                      <label class="control-label">prazo de pagamento</label>
                      <input type="text" id="praz_pag" name="praz_pag" class="form-control">
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

      </form>
      </div>

  </body>
Danilo

Danilo

Responder

Post mais votado

26/02/2018

Tente desta forma:

<code>
$("#novo_cliente).on("change", function(){
if($(this).val() == "novo_client_n"){
$("#info_cli_antig").show();
} else {
$("#info_cli_antig").hide();
}
});
</code>

O único erro que percebi foi no uso do $(this).val() que vc colocou this.value. Confira também estas aspas, pois está parecendo que vc usou duas aspas simples e não aspas duplas.

Espero ter ajudado.

Nathália Hirth

Nathália Hirth
Responder

Mais Posts

27/02/2018

Danilo

Bom dia Galera.

Felizmente consegui resolver com muita pesquisa e ajuda de um outros fórums.

Porem venho aqui para informar como foi resolvido.



JAVASCRIPT
function show(){
		if($('#novo_cliente').val()=="novo_client_n") document.getElementById("tb_novo_client").style.display="block";
		if($('#novo_cliente').val()=="novo_client_s") document.getElementById("tb_novo_client").style.display="none";
		if($('#novo_cliente').val()=="") document.getElementById("tb_novo_client").style.display="none";
					}


HTML

<div class="panel panel-default" id="pn_aberturaProjetEmbala">
				<div class="panel-heading">
					<h3 class="panel-title">Abertura de projetos de embalagem </h3>					
				</div>
				<div class="panel-body">

					<div class="col-md-4">
						<label class="control-label">Novo Cliente</label>
							<select id="novo_cliente" onchange="show()">
								<option value="">Selecione</option>
								<option value="novo_client_s">Sim</option>
								<option value="novo_client_n">Não</option>
							</select>
					</div>

					<div id="tb_novo_client" style='display:none;'>
					<table>
						<thead>
								<tr>
									<th >Informacoes</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<label class="control-label">Produtos adquirios</label>
										<input type="text" id="pro_adquir"  name="pro_adquir" class="form-control" >
									</td>
									<td>
										<label class="control-label">preco do produto</label>
										<input type="text" id="prec_produt" name="prec_produt" class="form-control" >
									</td>
									<td>
										<label class="control-label">prazo de pagamento</label>
										<input type="text" id="praz_pag" name="praz_pag" class="form-control" >
									</td>
								</tr>
							</tbody>
						</table>
					</table>
					</div>


Obrigado a todos que me ajudaram.
Responder

27/02/2018

Danilo

Tente desta forma:

<code>
$("#novo_cliente).on("change", function(){
if($(this).val() == "novo_client_n"){
$("#info_cli_antig").show();
} else {
$("#info_cli_antig").hide();
}
});
</code>

O único erro que percebi foi no uso do $(this).val() que vc colocou this.value. Confira também estas aspas, pois está parecendo que vc usou duas aspas simples e não aspas duplas.

Espero ter ajudado.


Infelizmente desta forma não consegui, obter resultado.
Porem Obrigado da mesma forma.
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar