on change mais tabela.

dmariano · Fevereiro 22, 2018

Bom dia Amigos, sou novo na área e estou com uma duvida.

Estou usando o metodo on change em conjunto com um select.

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).

Javascript

$(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>

Porem não esta funcionando.

Alguém tem alguma ideia ?

dmariano · Fevereiro 27, 2018

Bom dia Galera.

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

Porem venho aqui para informar como foi resolvido.

JAVA

	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>