Javascript - Passar Parâmetros para uma Função.

[violin101 0]

Caros amigos, saudações.

Estou com uma pequena dúvida se é possível ser realizado.

Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

Observação:
Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.

            <div class="card-body">
              <table id="tab_clie" class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th style="text-align:center; width:10%;">Pedido Nº</th>
                    <th style="text-align:center; width:10%;">Data Pedido</th>     
                    <th style="text-align:center; width:32%;">Fornecedor</th>              
                    <th style="text-align:center; width:10%;">Status</th>                 
                    <th style="text-align:center; width:5%;">Ação</th>
                </tr>
                </thead>
                <tbody>
                  <?php foreach ($results as $r) {

                    $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido));
                                          
                    switch ($r->pd_status) {
                        case '1':
                            $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;';
                            $txt = '#FFFFFF'; //Cor: Branco
                            $cor = '#000000'; //Cor: Preta
                            break;
                        case '2':
                            $status = 'Atendido Total';
                            $txt = '#FFFFFF'; //Cor: Branco                            
                            $cor = '#086108'; //Cor: Verde
                            break;
                        case '3':
                            $status = 'Atendido Parcial';
                            $txt = '#000000'; //Cor: Branco                            
                            $cor = '#FEA118'; //Cor: Amarelo
                            break;                     
                        default:
                            $status = 'Cancelado'; 
                            $txt = '#FFFFFF'; //Cor: Branco                            
                            $cor = '#D20101'; //Cor: Vermelho
                            break;
                    }     


                    echo '<tr>';
                      echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>';
                      echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>';
                      echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>';
                      echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>';

                      echo '<td width="5%" style="text-align:center;">'; ?>
                      <div class="row">
                        <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?>
                          <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" >
                            <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>">
                            <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>">
                            <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button>
                          </form>                         
                        <?php }                                       
                        if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?>
                          <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" >
                            <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>">
                            <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>">
                            <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button>
                          </form>  
                        <?php } ?>
                      </div>
                      <?php 
                      echo '</td>';
                    echo '</tr>';
                  } ?>
                </tbody>
              </table>
            </div>

Grato,

Cesar.

[Williams Duarte 431]

Para passar parâmetros para uma função JS, você pode utilizar atributos de dados (data attributes) nos elementos HTML e, em seguida, acessar esses atributos no JavaScript para obter os valores desejados. Segue o exemplo de como você pode modificar seu código para passar os parâmetros usando JavaScript


Modifique os botões "Visualizar" e "Editar" para incluir atributos de dados com os valores necessários:

<button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;" data-id-pedido="<?php echo $r->idPedidos; ?>" data-nr-pedido="<?php echo $r->pd_numero; ?>" onclick="visualizarPedido(this)"><i class="fa fa-search icon-white"></i></button>

<button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;" data-id-pedido="<?php echo $r->idPedidos; ?>" data-nr-pedido="<?php echo $r->pd_numero; ?>" onclick="editarPedido(this)"><i class="fa fa-edit icon-white"></i></button>

Remova os formulários que envolvem os botões, pois não serão mais necessários.

Adicione as seguintes funções JS no seu arquivo de JavaScript ou dentro de uma tag <script> na sua página:
 

function visualizarPedido(button) {
  const idPedido = button.getAttribute('data-id-pedido');
  const nrPedido = button.getAttribute('data-nr-pedido');
  
  // Faça uma requisição Ajax para a URL desejada, passando os parâmetros
  const url = '<?= base_url() ?>compras/pedidos/visualizar?idPedido=' + idPedido + '&nrPedido=' + nrPedido;
  
  // Exemplo usando fetch:
  fetch(url)
    .then(response => response.text())
    .then(data => {
      // Faça algo com a resposta recebida
      console.log(data);
    })
    .catch(error => {
      console.error('Erro:', error);
    });
}

function editarPedido(button) {
  const idPedido = button.getAttribute('data-id-pedido');
  const nrPedido = button.getAttribute('data-nr-pedido');
  
  // Faça uma requisição Ajax para a URL desejada, passando os parâmetros
  const url = '<?= base_url() ?>compras/pedidos/editar?idPedido=' + idPedido + '&nrPedido=' + nrPedido;
  
  // Exemplo usando fetch:
  fetch(url)
    .then(response => response.text())
    .then(data => {
      // Faça algo com a resposta recebida
      console.log(data);
    })
    .catch(error => {
      console.error('Erro:', error);
    });
}

No exemplo, adicionamos atributos de dados aos botões para armazenar os valores necessários. No JavaScript, obtemos esses valores usando `getAttribute` e construímos a URL com os parâmetros. Em seguida, fazemos uma requisição Ajax para a URL usando `fetch` e lidamos com a resposta de acordo com as necessidades. Essa abordagem permite passar os parâmetros sem a necessidade de formulários adicionais.