从Bootstrap Modal运行查询


To run query from Bootstrap Modal

在我的项目中,我在表中有一个打盹按钮,表正在填充数据库中的值。我给了那个按钮一个href,它将打开一个引导模式对话框。

在模态中,我已经调用了特定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之类的东西。有人能帮忙吗?

根据您当前的方法,<form> 中几乎没有错误

  1. 不要将id与表单操作URL action="saveSnoozeReminder.php?id='<?php echo $reserver ?>'"一起发布,创建hidden输入并向其添加id值,将其与表单一起发布
  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,这样默认情况下表单就不会提交,也不需要在Ajax方法中使用e.preventdefaultreturn false
  2. <form>中删除action="saveSnoozeReminder.php"
  3. ids输入您想要通过Ajax和Snooze按钮传递值以将其与jQuery点击函数绑定

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

表单HTML中的$("#message").show(data);将显示在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.";
        }
    }
?>