CODEWITHSUNDEEP
phpjquerymysql
Andy
Andy

Reputation: 138

Updating table rows using Jquery using select dropdown

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.

Upvotes: 0

Views: 1435

Answers (1)

JYoThI
JYoThI

Reputation: 12085

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>

Upvotes: 1

Related Questions