加載一個感謝您彈出表單提交div提交

我想提交一個div加載，以感謝用戶參加比賽。該div打開罰款，如果我添加像這樣的href：<a href="#dialog" name="modal">click here"</a>

但是，我似乎無法使此彈出一次提交。難道我做錯了什麼！？

這是我的形式PHP代碼：

<?php 
if($_POST['formSubmit'] == "Submit") 
{ 
    $errorMessage = ""; 

    if(empty($_POST['formName'])) 
    { 
    $errorMessage .= "<li>You forgot to enter your name</li>"; 
    } 
    if(empty($_POST['formTown'])) 
    { 
    $errorMessage .= "<li>You forgot to enter your town</li>"; 
    } 

    $varName = $_POST['formName']; 
    $varTown = $_POST['formTown']; 
    $varAge = $_POST['formAge']; 
    $varEmail = $_POST['formEmail']; 

    $varOne = $_POST['hidden-one']; 
    $varTwo = $_POST['hidden-two']; 
    $varThree = $_POST['hidden-three']; 
    $varFour = $_POST['hidden-four']; 
    $varFive = $_POST['hidden-five']; 

    if(empty($errorMessage)) 
    { 
     $fs = fopen("mydata.csv","a"); 
     fwrite($fs,$varName . ", " . $varTown . ", " . $varAge . ", " . $varEmail . ", " . $varOne . $varTwo . $varThree . $varFour . $varFive . "\n"); 
     fclose($fs); 

     header("Location: #dialog"); 
     exit; 
    } 
} 
?>

這是jQuery代碼：

<script> 

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = $(this).attr('href'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });   

}); 

</script>

這是我的html：

<form action="enter.php" method="post" target="_self">  
    <input class="submit" type="submit" name="formSubmit" value="Submit"> 
</form> 


<div id="boxes"> 

<div id="dialog" class="window"> 
    <p>Modal content here</p> 
</div> 
</div> 

</div> 
</div> 

<!-- Mask to cover the whole screen --> 
<div id="mask"></div> 
</div>

來源

2011-10-10 kala233

聽起來你可能會對你的網絡瀏覽器和你的網絡服務器之間發生的事情有些困惑。

您的網絡瀏覽器正在運行呈現HTML/CSS並執行JavaScript的客戶端。您的瀏覽器將向執行PHP的Web服務器提交請求以生成響應。

一旦您的表單被提交，就會向Web服務器發出請求，該服務器會生成響應 - 通常是另一個HTML頁面。這是你的感謝信息應該在的地方。

來源

2011-10-10 16:11:45

不，不，我明白這一點。我只是覺得一個彈出式的謝謝div是最好的方法。 – kala233

如果你有一個提交按鈕，不要調用preventdefault或類似的東西，你的表單被髮布並刷新頁面。所以你的js代碼不再被執行。你需要做的是使用一個普通的按鈕或鏈接，並綁定一個onclick事件，它首先顯示謝謝你彈出，而不是「手動」通過JavaScript提交表單。

來源

2011-10-10 16:09:01

加載一個感謝您彈出表單提交div提交

回答

相關問題