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);    
    }

Why `data: $('#menu_form').serialize()` when posting? I use `data: new FormData(document.querySelector('#menu_form'))`. Reading this might help: https://stackoverflow.com/questions/10398783/jquery-serialize-form-and-other-parameters — bloodyKnuckles, May 01 '22 at 17:03
@bloodyKnuckles With this selector it also doesn't work, and I checked that link. No result. But thanks for reply — Sportello, May 01 '22 at 18:01

score 0 · Answer 1 · answered May 01 '22 at 21:06

0

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.

answered May 01 '22 at 21:06

cheesyMan

1,494
1
4
13

The thing is, that is how I handled it with pure php, and iw was working. Talking about ajax, I tried to pass in function variables with form content, and that on php catch it like if(isset($_POST['ajax_var_name'])) And it also didn't work. Do you know the proper way for this kind of transition? Also knowing the fact, that I wanna do some operations from select box and always passing an array of IDs – Sportello May 01 '22 at 21:32

Passing form with multiple id and select to PHP with AJAX

1 Answers1