0

Eu fiz uma tabela onde cada linha tem um select e um botão atualizar. O problema é que quando eu clico no atualizar de determinada linha eu quero atualizar apenas aquela linha e, portanto, preciso receber pelo jQuery apenas o número que está no select daquela linha. Da forma que eu fiz eu recebo os números que estão no select de todas as linhas.

HTML:

<table border="0">

    <tr>

        <td class="td">
            Número
        </td>

    </tr>

    <?
    for($i = 0; $i < 10; $i++){
    ?>

        <tr class="tr">

            <td class="td">
                <select id="num">
                    <?php 
                    for($k = 1; $k < 5; $k++){
                        echo "<option> $k </option>";
                    }
                    ?>
                </select>

            </td>


            <td class="td">
                <form id="formulario" action="javascript:func()" method="post">
                    <input type="submit" value="Atualizar" />
                </form>
            </td>
        </tr>
    <?
    }
    ?>

</table>

jQuery:

<script type="text/javascript" language="javascript">

    $(document).ready(function(){
        $("form").submit(function(){
            var num = $("#num option:selected").text();
            alert(num);
        });
    });


</script>

Resultado: result

Gostaria que aparecesse apenas 1 ou 4 ou 3... dependendo da linha que estiver o "Atualizar".

1
  • Se voce deixar o id="formulario" no loop vai ter id duplicados em seu HTML o que não é recomendado.
    – Ivan Nack
    13/01/2016 às 17:23

1 Resposta 1

2

Seu problema se encontra no seletor como você esta gerando vários <select> no for e todos eles possuem o id, que é único, ele consegue identificar como apenas um,se você usar classe ou ate a tag para selecionar dará certo.

Exemplo:

$(document).ready(function() {
  $("form").submit(function() {
    num = $(this).find('.num option:selected').text();
    alert(num);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
  <select class="num">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <input type="submit" value="Atualizar">
</form>

<form>
  <select class="num">
    <option>4</option>
    <option>5</option>
    <option>6</option>
  </select>
  <input type="submit" value="Atualizar">
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .