Question

我有一个庞大的弹出窗体。我希望它能以这样的方式：

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>

Answer 1

以下是我的评论：

1。）在用户提交表单后，将打开一个新的大胆弹出窗口，其中显示已提交该消息。

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

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

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

PHP - 使用Magnific Popup在表单提交后显示消息

1 个答案: