To run query from Bootstrap Modal

Question

In my project, I have a snooze button in the table and table is populating the values from database. I have giving a href to that button which will open a bootstrap modal dialog.

In modal, I have called the amount of the specific id.

Code for modal is below :

<?php
    require_once '../invoice/config.php';
    $reserver = $_GET["id"]; 
    echo $reserver;
    $result = mysqli_query($con,"SELECT * FROM table_name where id = '$reserver'");
    $row = mysqli_fetch_array($result);
?>
<form id="modal-form" data-remote="true" method="post" action="saveSnoozeReminder.php?id='<?php echo $reserver ?>'" >
    <div class="modal-body">
        <p>SELECT DATE FOR REMINDER </p>
        <label>date</label>
        <input type="date" name="snoozeReminderDate" />
        <label>amount</label>
        <input type="text" name="amt"  value="<?php echo $row['amount']; ?> " disabled >
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-default" data-dismiss="modal" value="">Snooze</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" onClick="window.location.reload()">Close</button>
    </div>
</form>

Now further as the user will select the date, and press on snooze button, I have written another PHP file which will be called on form submit and update the reminder for that specific id in the table.

Another file is named as saveSnoozeReminder.php and code for it is :

<?php
    require_once '../invoice/config.php';
    $recordid = $_GET["id"];
    echo $recordid;
    $snoozedate = $_POST['snoozeReminderDate'];
    echo $snoozedate;
    $snoozeQuery = "UPDATE paymentremainder SET reminderdate='$snoozedate' WHERE id = $recordid";           
    if (mysqli_query($con, $snoozeQuery)) {
        $message = 'Reminder Snoozed Successfully';
        echo "<SCRIPT type='text/javascript'> 
        alert('$message');
        window.location.replace('index.php');
        </SCRIPT>";
    } else {
        return "";
    }
?>

After running this code also, update query isn't getting fired. Is there any way that I can use Ajax or something. Can someone help with it.

Answer 1

With your current approach, there are few mistakes in <form>

1. Don't post id along with form action URL action="saveSnoozeReminder.php?id='<?php echo $reserver ?>'", create hidden input and add id value to it , post it along with form
2. Don't disable the input use readonly

Form HTML

<form id="modal-form" data-remote="true" method="post" action="saveSnoozeReminder.php" >
<input type="hidden" name="id" value="<?php echo $reserver ?>">
    <div class="modal-body">
        <p>SELECT DATE FOR REMINDER </p>
        <label>date</label>
        <input type="date" name="snoozeReminderDate" />
        <label>amount</label>
        <input type="text" name="amt" value="<?php echo $row['amount']; ?> " readonly >
    </div>
    //You don't need to close the modal `data-dismiss="modal"` when submitting the form, it will be auto closed
    <div class="modal-footer">
        <button type="submit" class="btn btn-default" value="submit">Snooze</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" onClick="window.location.reload()">Close</button>
    </div>
</form>

and in PHP, replace $_GET with $_POST and use isset function

<?php
    require_once '../invoice/config.php';
    if(isset($_POST['id'])) { //isset function
        $recordid = $_POST["id"]; //replace $_GET with $POST
        echo $recordid;
        $snoozedate = $_POST['snoozeReminderDate'];
        echo $snoozedate;
        $snoozeQuery = "UPDATE paymentremainder SET reminderdate='$snoozedate' WHERE id = '$recordid'";
        if (mysqli_query($con, $snoozeQuery)) {
            $message = 'Reminder Snoozed Successfully';
                echo "<SCRIPT type='text/javascript'> 
                alert('$message');
                window.location.replace('index.php');
                </SCRIPT>";
        } else {
            return "";
        }
    }
?>

This will fix the issues where update query isn't get fired.

Solution with Ajax

You asked for alternate Ajax solution.

1. change type of Snooze button from submit to button so form will not submit bydefault and no need to use e.preventdefault or return false in Ajax Method
2. remove action="saveSnoozeReminder.php" from <form>
3. give ids to input you want to pass values via Ajax and Snooze button to bind it with jQuery click function

Form HTML

<form id="modal-form" data-remote="true" method="post">
<input type="hidden" name="id" id="reserverid" value="<?php echo $reserver ?>">
    <div class="modal-body">
        <p>SELECT DATE FOR REMINDER </p>
        <label>date</label>
        <input type="date" id="snoozeReminderDate" name="snoozeReminderDate" />
        <label>amount</label>
        <input type="text" name="amt" id="amt" value="<?php echo $row['amount']; ?> " readonly >
    </div>
    //You don't need to close the modal `data-dismiss="modal"` Snooze button, otherwise it will close the modal
    <div class="modal-footer">
        <button type="button" class="btn btn-default" value="submit" id="Snooze">Snooze</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" onClick="window.location.reload()">Close</button>
    </div>
//Ajax message here
<div id="message"></div>
</form>

Now The Ajax Method Call

$(document).ready(function () {
    $("#Snooze").click(function () {
        var snoozeid = $('#reserverid').val(); //id of row
        var snoozeReminder = $('#snoozeReminderDate').val(); //date value
        var dataString = 'snoozeid=' + snoozeid + '&snoozeReminder=' + snoozeReminder;
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "saveSnoozeReminder.php",
            data: dataString,
            cache: false,
            success: function (data) {
                $("#message").html(data);
            }
        });
    });
});

$("#message").show(data); inside form HTML which will show on Ajax response from PHP saveSnoozeReminder.php

and the PHP saveSnoozeReminder.php will be

<?php
    require_once '../invoice/config.php';
    if(isset($_POST['snoozeid'])) {
        $recordid = $_POST["snoozeid"];
        $snoozedate = $_POST['snoozeReminder'];
        $snoozeQuery = "UPDATE paymentremainder SET reminderdate='$snoozedate' WHERE id = '$recordid'";
        if (mysqli_query($con, $snoozeQuery)) {
               echo "<strong>Success!</strong> Everything Is Good.";
        } else {
               echo "<strong>Error!</strong> Something Went Wrong.";
        }
    }
?>