如何从foreach表中使用ajax获取另一个值

Question

I have table from foreach, in this table i create submit with ajax (id="detail"), but why when i submit i just get first row, when i click second row value, i get first row value not second row value ?

<form action="<?php echo base_url() ?>index.php/stock_opname/proses_detail" method="post">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>No</th>
                <th>SO No</th>
                <th>Opname Date</th>
                <th>Warehouse</th>
                <th>Type</th>
                <th>Approve</th>
                <th>Close period</th>
                <th>Detail</th>
            </tr>
            </thead>
            <tbody>
            <?php $no=1; foreach ($show as $key) { ?>
            <tr>
                    <td><?php echo $no ?></td>
                    <td><input type="text" id="sono" value="<?php echo $key->sono ?>"></td>
                    <td><input type="text" id="opnamedate" value="<?php echo $key->opnamedate ?>"></td>
                    <td><input type="text" id="warehousecode" value="<?php echo $key->warehousecode ?>"></td>
                    <td><input type="text" id="stocktypeid" value="<?php echo $key->stocktypeid ?>"></td>
                    <td></td>
                    <td></td>
                    <td><a href="#" id="detail" class="btn btn-info">Detail</a></td>
            </tr>
            <?php $no++;} ?>
            </tbody>
        </table>
    </form>


<script type="text/javascript">
    //Ajax Load data from ajax
    $(document).on('click', '#detail', function(){

            var sono = $('#sono').val();
            var opnamedate = $('#opnamedate').val();
            var wh = $('#warehousecode').val();
            var stocktypeid = $('#stocktypeid').val();

            alert(sono);

        });

Answer 1

you have to make the id also dynamic and also the script sholud be dynamic.Hope you get it

id="detail1"

.on('click', '#detail1', function() ----for first .on('click', '#detail2', function() ----for second and so on

Answer 2

Can you try this ?

$('#detail').click(function(){
    var sono = $(this).siblings('#sono').val();
    var opnamedate = $(this).siblings('#opnamedate ').val();
    var wh = $(this).siblings('#wh').val();
    var stocktypeid = $(this).siblings('#stocktypeid ').val();

    alert(sono);
});

Answer 3

<form action="<?php echo base_url() ?>index.php/stock_opname/proses_detail" method="post">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>No</th>
            <th>SO No</th>
            <th>Opname Date</th>
            <th>Warehouse</th>
            <th>Type</th>
            <th>Approve</th>
            <th>Close period</th>
            <th>Detail</th>
        </tr>
        </thead>
        <tbody>
        <?php $no=1; foreach ($show as $key) { ?>
        <tr>
                <td><?php echo $no ?></td>
                <td><input type="text" id="sono<?php echo $no; ?>" value="<?php echo $key->sono ?>"></td>
                <td><input type="text" id="opnamedate<?php echo $no; ?>" value="<?php echo $key->opnamedate ?>"></td>
                <td><input type="text" id="warehousecode<?php echo $no; ?>" value="<?php echo $key->warehousecode ?>"></td>
                <td><input type="text" id="stocktypeid<?php echo $no; ?>" value="<?php echo $key->stocktypeid ?>"></td>
                <td></td>
                <td></td>
                <td><a href="#" id="detail" onclick="getDetails(<?php echo $no; ?>)" class="btn btn-info">Detail</a></td>
        </tr>
        <?php $no++;} ?>
        </tbody>
    </table>
</form>


<script type="text/javascript"> //Ajax Load data from ajax
function getDetails(no){
    var sono = $('#sono'+no).val();
        var opnamedate = $('#opnamedate'+no).val();
        var wh = $('#warehousecode'+no).val();
        var stocktypeid = $('#stocktypeid'+no).val();
        alert(sono);}

hope this will help