Jump to content
medice99

Id Dinamico no javascript - Passar parâmetros por onclick

Recommended Posts

Bom dia a todos,

 

Gostaria de saber se existe alguma forma de passar parametro por onclick?

Minha dúvida se da ao seguinte: (Nem sei na verdade se a melhor forma seria através de JS que faria isso)

 

Eu tenho um formulário dinâmico onde os vendedores aqui da empresa irão digitar os pedidos, dessa forma cada vendedor que acessar terá sua lista de clientes (por isso é dinamico, um vendedor não pode ter acesso ao conteúdo do outro).

Consegui criar o formulário ao ponto de pesquisar os clientes e aparecer na tela o ID, Razão Social e CNPJ/CPF. Porém gostaria que ao clicar na linha da tabela referente ao cliente que será feito o pedido, preenchesse um input text com a Razão Social daquele cliente e se possível armazenasse em uma váriavel PHP o ID do cliente, que será a referência para outras informações que irão vir no formulário (forma de pagamento, valores dos produtos e etc).

 

O que eu consegui até agora é o seguinte:

 

Pelo while do PHP indicar uma ID HTML para cada linha da tabela, no caso "ID=Linha-1", "ID=Linha-2"...

Coloquei o evento onclick na table e consegui efetuar um alert com o ID. Porém o alert está estatico, mostrando sempre a mesma ID.

 

Segue o código abaixo:

 

/*PARTE DO PHP QUE BUSCA OS DADOS E DESTINA UMA ID UNICA PARA CADA LINHA, TANTO PARA A RAZÃO SOCIAL COMO PARA A ID DO CLIENTE*/

<?php
            while($dados = sqlsrv_fetch_array($consulta)){
        ?>                    
        <tr onclick="Alerta()">
            <td <?php echo "id=ClienteLinha-".$idLinhaTabela ?>><?php echo $dados["IDCLIENTE"]; ?></td>
            <td <?php echo "id=Razao-".$idLinhaTabela ?>><?php echo $dados["DSENTIDADE"]; ?></td>
            <td><?php echo $dados["CNPJCPF"]; ?></td></td>
        </tr>
        <?php
            $idLinhaTabela++;
            }
        ?>

/*ABAIXO O JAVASCRIPT*/
function Alerta(){
	var Linha = document.getElementById("ClienteLinha-3").innerHTML;
	alert(Linha);
}

O que eu gostaria era que tivesse uma forma de passar por parâmetros o ID da linha para o JS, exemplo "Alerta(IDCLIENTE)".

E no JS ficaria algo tipo "var Linha = document.getElementById(IDCLIENTE).innerHTML;"

 

Assim quando clicasse na linha do cliente, passasse o ID do cliente para o JS. Dessa forma iria preencher os inputs que eu preciso e etc...

 

P.S.: Qualquer sugestão é válida, inclusive se eu tiver que refazer toda a lógica do sistema :tounge_wink:

 

Obrigado a todos desde já e tenham um grande dia.

Share this post


Link to post
Share on other sites

 

function Alerta(ID_CLIENTE){
	var Linha = document.getElementById(ID_CLIENTE).innerHTML;
	alert(Linha);
}
e na hora de chamar:

 

Alerta('ClienteLinha-3')

 

Share this post


Link to post
Share on other sites

Não funciona amigo.

Dessa forma irá continuar estático.

O que eu quis dizer é que quando eu colocar o "Alerta('ClienteLinha-3')" na tag TD do meu table, ele reconheça como "Alerta(idclicado)", dessa forma, pra cada linha que foi clicada o "Alerta()" será diferente. Entende?

 

Mesmo assim obrigado pela informação.

Share this post


Link to post
Share on other sites

é só você fazer:

 

        <tr onclick="Alerta('<?php echo "ClienteLinha-".$idLinhaTabela ?>')">
            <td <?php echo "id=ClienteLinha-".$idLinhaTabela ?>><?php echo $dados["IDCLIENTE"]; ?></td>
            <td <?php echo "id=Razao-".$idLinhaTabela ?>><?php echo $dados["DSENTIDADE"]; ?></td>
            <td><?php echo $dados["CNPJCPF"]; ?></td></td>
        </tr>

 

  • +1 1

Share this post


Link to post
Share on other sites

:tired::tired:

Puts manooo...que burrice a minha kkkk

Valeu, era isso mesmo que eu precisava cara.

 

Muito obrigado mesmo, eu quebrando a cabeça pra fazer um negócio tão elaborado e era uma coisa tão simples kkk

 

Obrigado.

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 Richard.Ribeiro
      Fala Pessoal.. Bom dia.. uma ajuda por favor.
      não sei se e a melhor opção mais, gostaria de criar um id sequencial id="material"
      para resolver seguinte problema.. com javascript eu crio select com dados selecionados anteriormente, e crio mais opção no caso de haver mais pedido, porém toda vez que preciso troca a categoria o PRIMEIRO selecte que já possui um item e resetado. como posso resolver isso O PRIMIEIRO SELECT NÃO MUDAR. uma vez que á possui value selected
       
      segue todo código:

        <div id="box" >
        <form id="cadastro"  method="post">
          <?php
            if(isset($_POST['acao'])){
              $ide = $_POST['ide'];
              $data = $_POST['data_pedido'];
              $username=$_SESSION['username'];
              $justificativa = $_POST['justificativa'];
              $id_tipo_material = $_POST['material'];
              $qnt_solicitada = $_POST['qnt_solicitada'];

              //cadastrar no banco de dados!
                  $gravar = new Painel();
                  $id_gsm = $gravar->cadastrarGsm($data,$username,$justificativa,$ide);
                  $gravar->cadastrarItem($id_gsm,$id_tipo_material,$qnt_solicitada);
                  Painel::alert('sucesso','Pedido realizado com sucesso!');
                  }
                  $ConsultaIde = ConexaoBD::conectar()->prepare("SELECT  vsat_gilat, 'IDE: '||vsat_gilat|| ', Situação:'|| situacao|| ', Localidade:'||localidade|| ', Logradouro: '||logradouro as local
        FROM vsat WHERE vsat_gilat != '' AND situacao = 'Ativo'");
                  $ConsultaIde->execute();
                  $ConsultaIde = $ConsultaIde->fetchAll();
        ?>
        <div >
        <div class="form-group">
              <label>Selecione uma IDE</label>
              <select class="ide" name="ide" id="ide" required>
                <option disabled selected>-- Selecione IDE --  </option>
                  <?php
                  foreach ($ConsultaIde as $key => $value) {
                    ?>
                    <option value="<?php echo $value['vsat_gilat'];?>">
                      <?php echo $value['local'];?>

                </option>
              <?php }?>
              </select>

              <label>Data da Solicitação do Material :</label>
              <input type="text"value="<?php   echo date('d/m/Y');    ?>"  name="data_pedido" readonly >
        </div><!--form-group-->
            <div class="form-group">
              <label>Justificativa do pedido:</label>
              <textarea  rows="8" cols="80" name="justificativa" required></textarea>
        </div><!--form-group-->

        <div class="form-group">
              <label>Selecione Sistema:</label>
              <select name="id_categoria" id="id_categoria">
              <option selected disabled> --- Selecione o Sistema ---</option>
            <?php
        $consulta= ConexaoBD::conectar()->prepare("SELECT id_sistema, descricaos FROM public.cadastrar_sistema");
        $consulta->execute();
        while($row_cat_post = $consulta->fetch(PDO::FETCH_ASSOC) ) {
        echo '<option value="'.$row_cat_post['id_sistema'].'">'.$row_cat_post['descricaos'].'</option>';
              }
        ?>
          </select>
        </div><!--form-group-->
        <div class="form-group">
          <label>Selecione Padrão:</label>
          <span class="carregando">Aguarde, carregando...</span>
          <select name="id_sub_categoria" id="id_sub_categoria" >
            <option value="">--- Selecione o Padrão ---</option>
          </select>
        </div><!--form-group-select-->

        </div>
        <div class="pedido">
          <div class="remover">
          <label>Selecione Material:</label>
          <span class="carregando">Aguarde, carregando...</span>
          <select name="material[]" id="material">
            <option value="">--- Selecionte o Material ---</option>
          </select>
          <input type="text" id="quantidade" name="qnt_solicitada[]" placeholder="Digite a Quantidade" >
      <button type="button" name="button" class="removedor">Remover Item</button>
      </div>
      </div>
      </div>
        <button type="button" name="button" class="clonador">Novo Item</button>
        <input type="submit" name="acao" value="Cadastrar!">
        </form>
       
       
       
       
       
       
       
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                <script type="text/javascript">
                  google.load("jquery", "1.4.2");
                </script>
      <script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
      <script type="text/javascript">
        $(function(){
          $('#id_categoria').change(function(){
            if( $(this).val() ) {
              $('#id_sub_categoria').hide();
              $('.carregando').show();
              $.get('sub_categorias_post?search=',{id_categoria: $(this).val(), ajax: 'true'}, function(j){
                html = $.parseHTML(j);
                j=JSON.parse(html[16].textContent.trim());
                var options = '<option value="">Escolha Subcategoria</option>';
                for (var i = 0; i < j.length; i++) {
                  options += '<option value="' + j.id + '">' + j.nome_sub_categoria + '</option>';
                }
                $('#id_sub_categoria').html(options).show();
                $('.carregando').hide();
              });
            } else {
              $('#id_sub_categoria').html('<option value="">– Escolha Subcategoria –</option>');
            }
          });
        });
        $(function(){
          $('#id_sub_categoria').change(function(){
            if( $(this).val() ) {
              $('#material').hide();
              $('.carregando').show();
              $.get('sub_categorias_post2?search=',{id_sub_categoria: $(this).val(), ajax: 'true'}, function(j){
                html = $.parseHTML(j);
                console.log(html);
                j=JSON.parse(html[16].textContent.trim());
                var options = '<option value="">Escolha Subcategoria</option>';
                for (var i = 0; i < j.length; i++) {
                  options += '<option value="' + j.id + '">' + j.nome_sub_categoria + '</option>';
                }
                $('#material').html(options).show();
                $('.carregando').hide();
              });
            } else {
              $('#id_sub_categoria2').html('<option value="">– Escolha Subcategoria –</option>');
            }
          });
        });
        </script>
        <script>
        $(document).ready(function(){
       
              $(document).on('click', '.clonador', function(e){
                var elm_html = $('.pedido').html();
                var counter = 0;  //faz uma cópia dos elementos a serem clonados.
                  e.preventDefault();
                  var elementos = elm_html.replace(/\[[0\]]\]/g, '['+ counter +']');  //substitui o valor dos index e incrementa++
                  counter++;
                  $('#cadastro').append(elementos);  //exibe o clone.
              });
          });

          $(document).on('click', '.removedor', function (event) {
            event.preventDefault();
            $(this).parents('.remover').remove(); // navega até o pai com a classe pedido e remove ele inteiro
          });
        </script>
       
        <?php
        die();
        ?>
      </div><!--box-content-->
    • By Renan Leite
      Fala pessoal, Estou utilizando grunt + babel para compilar meu código, acontece que minhas pastas estão organizadas da seguinte maneira.
      - pasta1 - amd -src - arquivo.js - pasta2 - amd -src - arquivo.js - pasta3 -subpasta3 - amd - src -arquivo.js E eu só consigo usar o babel de uma forma muito específico, por exemplo:
      grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: './pasta1/amd/src', // aqui so especifico a pasta1 src: ['*.js'], dest: '.pasta1/amd/babel/' // aqui so especifico a pasta1 }] } } Eu queria que ele rodasse em todas as pastas amd/src e gerasse dentro da propria pasta src/ os arquivos compilados pelo babel, já tentei o seguinte:
      grunt.initConfig({ babel: { options: { sourceMap: false, presets: ['env'] }, dist: { files: [{ expand: true, cwd: '**/amd/src', src: ['*.js'], dest: '**/amd/babel/' }] } } CWD: Não sei porque nao funciona, a ideia era pegar todas as pastas que contem as pastas amd/src e tornar isso a base
      DEST: nessa parte eu não faço ideia de como deixar o dest (pasta babel/ gerada) exatamente dentro da pasta que está o src, por exemplo... dentro de pasta1/src criar a pasta babel/ com todos arquivos .js compilados da pasta1, dentro de pasta2/src criar a pasta babel/ com todos arquivos .js compilados da pasta2
    • By thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
    • By VCastilho
      Bom Dia
      Estou fazendo uma pagina do meu site via Elementor, e começou a aparecer alguns erros no console que não consigo localizar a raiz.
      Inclusive a função de Carrossel de Imagens não está funcionando, esta inserido na Div porém não funciona, poderia me ajudar?
      Segue o link referente ao site:
       
×

Important Information

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