成功提交時隱藏DIV

Question

我有這種完美工作的表單。但是，我想在提交表單時隱藏表單。基本上，我想隱藏整個div，從<div class="HideSuccess">開始，當它成功提交或表單提交時有/無錯誤。

我該如何解決這個問題？

<?php 
if (isset($_POST['submit'])) { 
    $Fname = $_POST['fname']; 
    $Email = $_POST['email']; 
    $fp = fopen("data.txt","a"); 
    if (!$fp) { 
     echo 'Error!'; 
     exit; 
    } 
    if (@fwrite($fp, $Fname.'|'.$Email."\n")) { 
     echo '<p class="thanks">Success<p>'; 
    } else { 
     echo '<p>Error!</p>'; 
    } 
    fclose($fp); 
} 
?> 
<div class="HideSuccess"> 
    <form name="input" method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>"> 
     <input type="text" name="fname" id="fname" placeholder="Full Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Full Name'" required /> 
     <input type="email" name="email" id="email" placeholder="Your Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email'" required /> 
     <input class="button" type="submit" name="submit" value="Submit" /></p> 
    </form> 
</div> 

Answer 1

如果您提交相同的頁面上的形式，這可能工作爲你。 這將隱藏的div是否有在頁面加載一個POST數據

<?php 
if (isset($_POST['submit'])): 
    $Fname = $_POST['fname']; 
    $Email = $_POST['email']; 
    $fp = fopen("data.txt","a"); 
    if(!$fp) { 
     echo 'Error!'; 
     exit; 
    } 
    if(@fwrite($fp, $Fname.'|'.$Email."\n")){ 
     echo '<p class="thanks">Success<p>'; 
    }else{ 
     echo '<p>Error!</p>'; 
    } 
    fclose($fp); 
else: ?> 
<div class="HideSuccess"> 
    <form name="input" method="post" action="<?php echo $_SERVER['SCRIPT_NAME']?>"> 
     <input type="text" name="fname" id="fname" placeholder="Full Name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Full Name'" required /> 
     <input type="email" name="email" id="email" placeholder="Your Email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email'" required /> 
     <input class="button" type="submit" name="submit" value="Submit" /></p> 
    </form> 
</div> 
<?php endif; ?> 

編輯：添加完整的代碼的要求

Answer 2

您可以使用jQuery或純javascript來動態刪除/隱藏塊。

但是你必須瞭解真正的形式提交你的頁面重新加載後的原因。對於這種情況你可以使用ajax。

例如：

添加識別器爲您的表單：

<form id="my-form" ... 

而且寫類似：

var 
    myForm  = $('#my-form'), 
    myFormSuccess = myForm.closest('.HideSuccess'); 

myForm.on('submit', function() { 
    $.post(myForm.attr('action'), myForm.serialize(), function() { 
     myFormSuccess.slideUp(500); 
    }); 
    return false; 
});