How to sent value from select box using Ajax?

I have a select box with two options “Approved/Disapproved”. I want the selected option to be sent over to a page ‘action_user_2.php’. Currently, it is sending information when clicking on save (works as expected). It is sending ‘user_id, first_name, last_name, email’. I need to also send the approval status for the user being edited.

HTML Select Box:

<form method='POST'>
    <input type='hidden' name='user_id' value=" . $row["user_id"] . ">
    ";
    $user_row = $row["user_id"];
    $approved_sql = "SELECT admin_approved from users WHERE user_id = '" . $user_row . "'";
    $approved_or_not = mysqli_query($connect, $approved_sql);
    $row_approved = mysqli_fetch_assoc($approved_or_not);
    if ($row_approved['admin_approved'] == 'Approved') {
    echo "<select name='selectbox' onchange='this.form.submit()'>
        <option value='Approved' selected>Approved</option>
        <option value='Disapproved'>Disapproved</option>
    </select>";
    } else if ($row_approved['admin_approved'] == 'Disapproved') {
    echo "<select name='selectbox' onchange='this.form.submit()'>
        <option value='Approved'>Approved</option>
        <option value='Disapproved' selected>Disapproved</option>
    </select>";
    }
</form>

Table JS

<script>
    var approved_status = 'Approved'; // Value should be set from select box
    $(document).ready(function () {
        //ajax call
        $('#editable_table').Tabledit({
            // when click on save; action_user_2.php gets called
            url: 'action_user_2.php', // where data will be sent

            // $selectOption = $_POST['selectbox'];

            // sent value from php variable to action_user_2.php using AJAX
            data: {approved_status: approved_status},// data being sent
            columns: {
                identifier: [0, "user_id"],
                editable: [[1, 'first_name'],
                    [2, 'last_name'],
                    [3, 'email']]
            },
            // hide the column that has the identifier
            hideIdentifier: true,

            // activate focus on first input of a row when click in save button
            autoFocus: true,

            // activate save button when click on edit button
            saveButton: true,

            restoreButton: false,
            onSuccess: function (data, textStatus, jqXHR) {
                // custom action buttons
                if (data.action == 'delete') {
                    $('#' + data.id).remove();
                }
            }
        });
    });
    $('#editable_table').DataTable();
</script>

action_user_2.php

<?php
// Get approval status
$approved_status = $_GET["approved_status"];
_log("approved_status: " . $approved_status);

$input = filter_input_array(INPUT_POST);
?>

console->network->action_user_2.php

Notice: Undefined index: approved_status in /var/www/html/uas_tools/user_management/action_user_2.php on line 5
19.01.2021: approved_status: {"user_id":"4","first_name":"New","last_name":"User","email":"tes@gmail.com","action":"edit"}

Answer

I started by removing onchange='this.form.submit() from the select box.

HTML Select Box:

<select class='myselect' disabled name='selectbox''>
  <option value='Approved' selected>Approved</option>
  <option value='Disapproved'>Disapproved</option>
</select>";

I added an onclick event listening to “tabledit-save-button” and used .find to get the results from the user approval select box. Then, this result is sent to action_user_2.php using Ajax.

Table JS

    // when click on save, user approval gets sent to update
    $(document).on("click", ".tabledit-save-button", function () {
        // For user ID
        var userID = $(this).closest("tr").find("[name=user_id]").val();
        //console.log(userID);

        // For user approval
        var checkedapproval = $(this).closest("tr").find(".myselect").val();
        //console.log(checkedapproval);

        // For user roles
        var checkedRoles = $(this).closest("tr").find(".roles_checkbox").val();
        //console.log(checkedRoles);

        $(function () {
            $.ajax({
                type: 'POST',
                url: 'action_user_2.php',
                // dataString is variable being sent. checkedapproval is value sent
                data: {
                    dataString: checkedapproval,
                    userID: userID,
                    roles_assigned: checkedRoles
                }
            });
        });
    })

action_user_2.php

// Update User Approval
$selectOption = $_POST['dataString'];
_log("approved_status: " . $selectOption);

Output:

approved_status: Approved

Advertisement

Answer