php - 从 Bootstrap Modal 运行查询

Question

在我的项目中，表中有一个暂停按钮，表正在填充数据库中的值。我已经为该按钮提供了一个 href ，它将打开一个 Bootstrap 模式对话框。

在模态中，我已经调用了具体id的金额。

模态代码如下:

<?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>

现在，当用户选择日期并按下暂停按钮时，我编写了另一个 PHP 文件，该文件将在表单提交时调用并更新表中该特定 ID 的提醒。

另一个文件名为 saveSnoozeReminder.php ，其代码为:

<?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 "";
    }
?>

运行此代码后，更新查询不会被触发。有什么办法可以使用 Ajax 之类的吗？有人可以帮忙吗？

Answer 1

按照您当前的方法，<form> 中几乎没有错误。

1. 不要发帖 id以及表单操作 URL action="saveSnoozeReminder.php?id='<?php echo $reserver ?>'" ，创建hidden输入并添加id对其值(value)，将其与表格一起发布
2. 不要disable输入使用readonly

表单 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>

在 PHP 中，替换 $_GET与 $_POST并使用isset功能

<?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 "";
        }
    }
?>

这将解决更新查询未触发的问题。

Ajax 解决方案

您要求替代 Ajax 解决方案。

1. 更改 Snooze 的类型来自 submit 的按钮至button所以表单默认不会提交，不需要使用 e.preventdefault或return false在Ajax方法中
2. 删除 action="saveSnoozeReminder.php"来自<form>
3. 给ids输入您想要通过 Ajax 传递值和 Snooze按钮将其与jQuery点击功能绑定(bind)

表单 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>

现在是 Ajax 方法调用

$(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);表单 HTML 内，它将显示在 PHP saveSnoozeReminder.php 的 Ajax 响应上

和 PHP saveSnoozeReminder.php将是

<?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.";
        }
    }
?>