Concatenate variables in Jquery to send php only from the selected record

Question

I have a loop where I show the user the result of a query, each query has 3 variáveis that I need to send to php, what I’m trying to do is send php the variables that correspond to the button clicked, see the image:

What I tried to do was sending out all the form variables, but since it’s a status change I need to send the record variables only to be changed.

What I have to script:

$(function() {      
$("#frmBusca").validate({
    submitHandler: function(form) {

        var IdOrdem = $("#IdOrdem");
        var IdUnicoop = $("#IdUnicoop");
        var Data = $("#Data");

        data: "IdOrdem=IdOrdem&IdUnicoop=IdUnicoop&Data=Data";

        console.log(data);
        return false;

        $.ajax({
            type: 'POST',
            url: 'pUpOrdemPagamento.php',
            data: data,
            dataType: 'json',
            beforeSend: function () {
                $("#msgOrdem").html('<div class="alert alert-info fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>AVISO!</strong> Enviando...</div>');
            },
            success: function (response) {
                if (response.codigo == "1") {
                    $("#msgOrdem").html('<div class="alert alert-success fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>AVISO!</strong>' + response.mensagem  + '</div>');
                window.setTimeout('location.reload()', 3000);                       
                } else {
                    $("#msgOrdem").html('<div class="alert alert-danger fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>ATENÇÃO!</strong> ' + response.mensagem + '</div>');
                }
                $('#frmBusca').each (function(){
                    this.reset();
                });
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr, ajaxOptions, thrownError);
                $("#msgOrdem").html('<div class="alert alert-danger fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>ATENÇÃO!</strong> Ocorreu um erro ao tentar enviar a pergunta. Contate o suporte técnico.</div>');
            }
        });
    }
});

});

My table is inside a foreach and is like this and the fields and form are in Hidden inputs.

    <table class="table table-bordered table-condensed">
      <tbody>
        <tr>
          <td width="161"><strong>Produto</strong></td>
          <td><?php echo $Retorno->Produto; ?></td>
        </tr>
        <tr>
          <td><strong>Safra</strong></td>
          <td><?php echo $Retorno->Safra; ?></td>
        </tr>
        <tr>
          <td><strong>Peso</strong></td>
          <td><?php echo $Retorno->Peso; ?></td>
        </tr>
        <tr>
          <td><strong>Valor</strong></td>
          <td><?php echo $Retorno->Valor; ?></td>
        </tr>
      </tbody>
      <?php if ( $Financiamento == 1 ) { ?>
      <tbody>
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2"><strong>Financiamento</strong></td>
        </tr>
        <tr>
          <td><strong>Banco</strong></td>
          <td align="left"><?php echo $Retorno->BancoFinanciamento; ?></td>
        </tr>
        <tr>
          <td><strong>Observação</strong></td>
          <td align="left"><?php echo $Retorno->Observacao; ?></td>
        </tr>
      </tbody>
      <?php } ?>
      <?php if ( $OrdemDeposito == 1 ) { ?>
      <tbody>
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2"><strong>Ordem de Depósito</strong></td>
        </tr>
        <tr>
          <td><strong>Banco</strong></td>
          <td align="left"><?php echo $Retorno->Banco; ?></td>
        </tr>
        <tr>
          <td><strong>Agência</strong></td>
          <td align="left"><?php echo $Retorno->Agencia; ?></td>
        </tr>
        <tr>
          <td><strong>Conta Corrente</strong></td>
          <td align="left"><?php echo $Retorno->ContaCorrente; ?></td>
        </tr>
        <tr>
          <td><strong>Correntista</strong></td>
          <td align="left"><?php echo $Retorno->Correntista; ?></td>
        </tr>
        <tr>
          <td><strong>CPF CNPJ</strong></td>
          <td align="left"><?php echo $Retorno->CPFCNPJ; ?></td>
        </tr>
        <tr>
          <td><strong>Observação</strong></td>
          <td align="left"><?php echo $Retorno->ObservacaoDeposito; ?></td>
        </tr>
      </tbody>
      <?php } ?>
      <tr>
        <td colspan="2" align="right"><button class="btn btn-primary btn-sm">Lido</button></td>
      </tr>          
      <input name="IdOrdem" id="IdOrdem" type="hidden" value="<?php echo $Retorno->IdOrdem; ?>" />
      <input name="IdUnicoop" id="IdUnicoop" type="hidden" value="<?php echo $IdUnicoop; ?>" />
      <input name="Data" id="Data" type="hidden" value="<?php echo $Retorno->Data; ?>" />
    </table>

Answer 1

Since the data are not unique change the ids to 'classes'.

I had a similar case and I took it this way.

In the onclick of the button, I put a function passing the same button. In your case it would be. Ex.:

<button class="btn btn-primary btn-sm" onclick="suaFuncao($('this'))">Lido</button>

in function js:

function suaFuncao(botao) {

var idOrdem = botao.closest("table")
                           .find(".IdOrdem") 
                           .val(); //lembrando de mudar o id para class IdOrdem

var idUnicoop= botao.closest("table")
                           .find(".IdUnicoop") 
                           .val(); //lembrando de mudar o id para class 

var data = botao.closest("table")
                           .find(".data") 
                           .val(); //lembrando de mudar o id para class 

$.ajax({
        type: 'POST',
        url: 'pUpOrdemPagamento.php',
        data:{ idOrdem = idOrdem
             , idUnicoop = idUnicoop
             , data = data },
        dataType: 'json',
        beforeSend: 
            //seu código
        ,success: 
            //seu código
        ,error: 
            //seu código
    });
}

In php, normal...

$_POST['idOrdem']
$_POST['idUnicoop']
$_POST['data']

Answer 2

You cannot use the same id for more than one element, as the table is inside a loop do something like for example:

for ($i = 0; $i < 10; $i++) {
    echo "<div id='elemento".$i."'></div>";
    echo "<button onclick=funcao($i)></button>";
}

This does not answer your question directly but may help.