PHP-使用放大弹出菜单显示表单提交后的消息

PHP - Showing message after form submission using Magnific Popup

本文关键字：表单提交 显示 消息 菜单 放大 PHP-      更新时间：2023-09-26

我有一个放大弹出窗口中的窗体。我想要这样一种方式：

1.）用户提交表单后，将打开一个新的放大镜弹出窗口，并显示已提交的消息。

2.）例如，如果用户已经提交了表单，则放大弹出窗口将显示消息而不是表单，以防止提交多个报告。

到目前为止，我有下面的代码，但它没有显示消息。

PHP

if(isset($_POST["btnSubmit"]))
{
    $issue = $_POST['issue'];
    $sql = "SELECT id, FROM report WHERE id='$id'";
    $result = mysqli_query($db, $sql);
    $row = mysqli_fetch_array($result, MYSQLI_ASSOC);
    if(mysqli_num_rows($result) >= 1)
    {
        //Show message here
    }
    else
    {
        $sql = mysqli_query($db, "INSERT INTO report (id, issue) VALUES ('$id', '$issue')");
    }
}

Javascript/Jquery

<script>
function cancel(){
    $.magnificPopup.close();    
}
$(document).ready(function(){
    $('.report').magnificPopup({
        type: 'inline',
        fixedContentPos: true,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: false,
        preloader: false,
        midClick: true,
        mainClass: 'my-mfp-zoom-in',
    });
    $('#reportSubmittedContainer').magnificPopup({
        type: 'inline',
        fixedContentPos: true,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: false,
        preloader: false,
        midClick: true,
        mainClass: 'my-mfp-zoom-in',
    });
});
</script>

HTML

<a href="#reportContainer" class="btnReport report" role="button">
    <i class="fa fa-exclamation-triangle"></i> Report
</a>
<div id="reportContainer" class="mfp-hide">
    <form class="form-horizontal submitReportForm" role="form" method="POST">
        <div class="form-group">
            <label class="control-label col-sm-2">Issue:</label>
            <div class="col-sm-9">
                <textarea id="issue" name="issue" type="text" class="form-control" rows="5"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" name="btnSubmit" value="Submit" onclick="return validate();" class="btn btn-default" />
                <input type="button" name="btnCancel" value="Cancel" onclick="return cancel();"class="btn btn-default" />
            </div>
        </div>
    </form>
</div> 
<div id="reportSubmittedContainer" class="mfp-hide">
    We have received your report.
</div>

以下是我的评论：

1.）用户提交表单后，将打开一个新的放大镜弹出窗口，并显示已提交的消息。

Http是您当前使用的协议。Http过程是无状态的，这意味着每个请求都是唯一的。因此，当您提交表单时，DOM（文档对象结构）将在服务器中重新构建。为了实现这种限制，AJAX被发明了。我没有在你的代码中看到validate方法。这可能使用AJAX，但它不是你应该改变的。

2.）例如，如果用户已经提交了表单，则放大弹出窗口将显示消息而不是表单，以防止提交多个报告。

这也是HTTP协议的限制。由于其无状态性质，您必须使用Cookie向客户端发送一些信息，表明用户以前已经提交过表单。javascript和PHP都可以发送cookie。

相关文章：