2016-07-27 96 views
2

我在一個大型彈出窗口中有一個窗體。我想這樣做:PHP - 使用Magnific Popup在表單提交後顯示消息

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> 

回答

0

這裏是我的意見:

1)後用戶已經提交了表格,一個新的大型彈出窗口將會打開並顯示它已經提交的消息。

Http是您目前使用的協議。 Http過程是無狀態的,這意味着每個請求都是唯一的。所以當你提交表單時,DOM(文檔對象結構)在服務器中重新構建。 爲了完成這種限制,AJAX已經發​​明出來。 我沒有看到你的代碼的驗證方法。這可能會使用AJAX,但它不是你應該改變。

2.)例如,如果用戶已經提交了表單,則該大型彈出窗口將顯示消息而不是表單,以防止提交多個報表。

這也是HTTP協議的限制。由於其無狀態性質,您必須使用Cookie向客戶端發送一些信息,表明用戶之前已經提交過該信息。 javascript和PHP都可能發送cookie。