Passing form with multiple id and select to PHP with AJAX

Question

I'm trying to collect selected checkboxes, give it update or delete operation, and pass this form to php through ajax. I'm very new to whole this thing, and trying to figure out the way for couple of days.

Web research didn't give me any results, I tried to send ajax by couple different ways - no result. Although with PHP only I get the form with select and array of ids working.

How to make it work with AJAX?

My form. It placed inside the table. The body of table is in php file. Also there is other form inside modal window in this file, just mentioning that if it's possibly may conflicting.

<div class="inner">
                <div class="option">
                        <div class="e-table">
                            <div class="table-responsive table-lg mt-3">
                                <form method="post" id="menu_form">
                                <table class="table table-bordered">
                                        <select name="select" id="menu" >
                                            <option value="select">Please select</option>
                                            <option value="set-active">Set active</option>
                                            <option value="set-not-active">Set not active</option>
                                            <option value="delete">Delete</option>
                                        </select>
                                    <thead>
                                        <tr>
                                            <th class="text-nowrap align-middle"><input type="checkbox" id="select-all"></th>
                                            <th>Name</th>
                                            <th>Role</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                <tbody id="users_data">
                                <input type="submit" value="submit" name="submit_btn" />

                                </tbody>
                                </table>
                                </form>

                            </div>
                        </div>
                </div>
            </div>

Here's what I'm trying with AJAX.

<script type="text/javascript">
    $(document).ready(function() {
        $('#menu_form').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                type: 'post',
                url: "process.php",
                data: $('#menu_form').serialize(),
                success: function (response) {
                    console.log(response)
                }
            });
        });
    });

My PHP. The body of table and handling form submission. Showing handling of just one of options for to not making this question even longer, others are pretty the same.

<td class="text-nowrap align-middle"><input type="checkbox" name="update_id" value="<?= $row['id'] ?>"></td>
        <td class="text-nowrap align-middle"><?= $row['name']; ?></td>
        <td class="text-nowrap align-middle"><?= $row['role']; ?></td>
        <td class="text-center align-middle">
            <?php if ($row['status'] == 1): ?>
                <i class="fa fa-circle active-circle"></i>
            <?php else: ?>
                <i class="fa fa-circle not-active-circle" style="color:grey"></i>
            <?php endif; ?>
        </td>
        <td class="text-center align-middle"><button class="btn btn-sm btn-outline-secondary badge" type="button"
                    onclick="edit_record(<?= $row['id']; ?>)" >Edit</button>
            &nbsp;<button class="btn btn-sm btn-outline-secondary badge" type="button"
                    onclick="delete_record(<?= $row['id']; ?>)" ><i class="fa fa-trash"></i></button>
        </td>
    </tr>

if(isset($_POST['submit_btn'])) {
    $idArray = $_POST['update_id'];
    $idString = implode(',', $idArray);

    if (isset($_POST['select']) && $_POST['select'] == 'set-active') {
        $statement = $pdo->prepare("UPDATE user SET status = 1 WHERE id IN ($idString)");
        $result = $statement->execute();
        if ($result) {
            $response = array('status' => true, 'message' => 'Record edited successfully.');
        }else{
            $response = array('status' => true, 'message' => 'Error');
        }

        echo json_encode($response);    
    } 

Answer 1

It looks to me that the problem is here:

if(isset($_POST['submit_btn'])) {

The <input type="submit" value="submit" name="submit_btn" /> in your form is NOT part of the body/payload sent with the POST request (it's a button, after all, and it doesn't contain any useful info for the server).

Hence, the above if() check will always be false and all the block of code inside the if() block won't be executed.