使用选择下拉列表使用Jquery更新表行

Question

I am trying to update some table rows (there can be 40-50 rows) generated from a MYSQL query with a Approve/Rejected column at the end of each row, I would like to use jQuery to update the row using a select dropdown, the problem I am having is that it only updates the first row.

I have tried to look at other Stackoverflow threads, there seems to be quite a few with similar issues, but I am still trying to get my head around jQuery so I couldn't work out how to do it.

I am guessing it's because of the same class names?

My HTML table/forms

<table>
    <tr>
        <td>1</td>
        <td>Ren</td>
        <td>
        <form method="post" action="" class="dangermouse">
            <div class="form-group">
                <select name="approval" class="approval">
                    <option value="0">Approved</option>
                    <option value="1">Reject</option>
                </select>
            </div>
            <input type="hidden" name="id" value="1">
            <input type="button" name="updaterow" class="save_button" value="Update">
        </form>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Stimpy</td>
        <td>
        <form method="post" action="" class="dangermouse">
            <div class="form-group">
                <select name="approval" class="approval">
                    <option value="0">Approved</option>
                    <option value="1">Reject</option>
                </select>
            </div>
            <input type="hidden" name="id" value="2">
            <input type="button" name="updaterow" class="save_button" value="Update">
        </form>
        </td>
    </tr>
</table>

jQuery:

$('.save_button').click(function() {
    var approval = $('.approval').val();
    var id = $('.id').val();

    $('.save_status').text('loading...');

    $.post('updateRow.php',{
            approval: approval,
            id: id
        }, function(data) {
            $('.save_status').text(data);
        }
    );
});

PHP File:

if(isset($_POST['approval'],$_POST['id'])) {
$approval = $_POST['approval'];
$id = $_POST['id'];
if($approval !="" && $id !="") {
    $pdo->ApproveOrDeny($approval, $id);
    } else {
        echo "The same thing we do every night, Pinky - try to take over the world!";
    }
}

Thanks in advance.

Answer 1

You need to access the clicked form values .instead of just using class name

1) Setup unique name for each form

2) Access the value using form name like this $('form[name="form1"]>.id').val()

$('.save_button').click(function() {

   var form = $(this).parents('form:first').attr('name');   
   
   alert(form);

   var id = $('form[name="'+form+'"]>.id').val();
   var option =$('form[name="'+form+'"] .approval').val();

   alert(id);
   alert(option);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>1</td>
        <td>Ren</td>
        <td>
        <form method="post" name="form1" action="" class="dangermouse">
            <div class="form-group">
                <select name="approval" class="approval">
                    <option value="0">Approved</option>
                    <option value="1">Reject</option>
                </select>
            </div>
            <input type="hidden" class="id" value="1">
            <input type="button" name="updaterow" class="save_button" value="Update">
        </form>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Stimpy</td>
        <td>
        <form method="post" name="form2" class="dangermouse">
            <div class="form-group">
                <select name="approval" class="approval">
                    <option value="0">Approved</option>
                    <option value="1">Reject</option>
                </select>
            </div>
            <input type="hidden" class="id" value="2">
            <input type="button" name="updaterow" class="save_button" value="Update">
        </form>
        </td>
    </tr>
</table>

</div>