jQuery的電子郵件註冊表單提交後試圖隱藏表格

Question

我想使用一個簡單的jQuery/PHP通訊腳本。該腳本正常工作。當我輸入姓名和電子郵件並點擊提交按鈕時，它會將數據保存到.txt文件中，並隨窗體一起顯示成功消息。現在，我想修改腳本。我不希望在我提交時看到表單，而應該只顯示成功消息「謝謝。」作爲javascript的新手，我目前已經知道我需要在點擊提交按鈕後「淡出」表單。

我認爲代碼可能看起來像

 $("#submit").on("click", function(e) { 
     e.stopImmediatePropagation(); 
     $("#signup").fadeOut(280, function() { 
      // callback method to display new text 
      // setup other codes here to store the e-mail address 
      $(this).after('<p id="success">Thank you</p>'); 
     }); 
    }); 

我試圖整合這些代碼，但由於我有限的經驗，JS我不能這樣做成功。

這是我原來的jQuery腳本

var error_1 = "Please enter your valid email address"; 
var error_2 = "Please enter your name"; 
var thankyou = "Thank you"; 

function trim(str) { 
    str = str.replace(/^\s*$/, ''); 
    return str; 
} 

function $Npro(field) { 
    var element = document.getElementById(field); 
    return element; 
    return false; 
} 

function emailvalidation(field, errorMessage) { 
    var goodEmail = field.value.match(/[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/); 
    apos = field.value.indexOf("@"); 
    dotpos = field.value.lastIndexOf("."); 
    lastpos = field.value.length - 1; 
    tldLen = lastpos - dotpos; 
    dmLen = dotpos - apos - 1; 
    var badEmail = (tldLen < 2 || dmLen < 2 || apos < 1); 
    if (!goodEmail || badEmail) { 
     $Npro("Error").innerHTML = errorMessage; 
     $Npro("Error").style.display = "inline"; 
     field.focus(); 
     field.select(); 
     return false; 
    } else { 
     return true; 
    } 
} 

function emptyvalidation(entered, errorMessage) { 
    $Npro("Error").innerHTML = ""; 
    with(entered) { 
     if (trim(value) == null || trim(value) == "") { /*alert(errorMessage);*/ 
     $Npro("Error").innerHTML = errorMessage; 
      $Npro("Error").style.display = "inline"; 
      return false; 
     } else { 
      return true; 
     } 
    } //with 
} //emptyvalidation 

function signup(thisform) { 
    with(thisform) { 
     if (emailvalidation(email, error_1) == false) { 
      email.focus(); 
      return false; 
     }; 
     if (emptyvalidation(name, error_2) == false) { 
      name.focus(); 
      return false; 
     }; 
    } 
    $("#submit, #myResponse").hide(); // Hide the buttom and the message 
    $("#loading").show(); // show the loading image. 
    params = $("#subform").serialize(); 
    $.post("optIn.php", params, function(response) { 
     //alert(response); //may need to activate this line for debugging. 
     $("#loading").hide(); 
     $("#myResponse").html(thankyou); //Writes the "Thank you" message that comes from optIn.php and styles it. 
     $('#myResponse').css({ 
      display: 'inline', 
      color: 'green' 
     }) 
     $("#submit").show(); 
    }) 
    return false; 
} 

下面是HTML標記

<form onSubmit="return signup(this);return false;" method="post" name="subform" id="subform" action=" 

    <?php echo optIn.php ?>"> 
    <div> 
     <span style="FONT-FAMILY: Arial; FONT-SIZE: 12pt; font-weight:bold;">Subscribe to our newsletter</span> 
    </div> 
    <div style="margin-top:20px"> 
     <div> 
      <label style="display: inline-block;width:135px">Email:</label> 
      <input type="text" id="email" name="email" value=""> 
     </div> 
     <div> 
      <label style="display: inline-block;width:135px">Name:</label> 
      <input type="text" name="name" id="name" value=""> 
     </div> 
    <div> 
    <div style="display:inline-block;width:135px;">&nbsp;</div> 
     <input type="submit" id="submit" name="submit" value="Sign up"> 
    </div> 
    <div style="width:100%"> 
     <span id="Error" style="color:red;display:none;"></span> 
    </div> 
    <div id="myResponse" style="DISPLAY:none;"></div> 
     <div id="loading" style="display:none;"> 
     <img src="wait.gif" alt=""> 
     </div> 
    </div> 
</form> 

這裏是我的PHP代碼：

<?php 
//ini_set('display_errors', 0); 
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Pragma: no-cache"); 

$email = trim(htmlspecialchars($_REQUEST["email"])); 
$name = trim(htmlspecialchars($_REQUEST["name"])); 

$pfileName = "mails.txt"; 
$MyFile  = fopen($pfileName, "a"); 
$nline="\"".$email."\"" ."," ."\"".$name."\"" ."\r\n"; 
fwrite($MyFile, $nline); 
fclose($MyFile); 
die; 
?> 

Answer 1

嘗試提供.delay()從而使​​功能在嘗試顯示成功之前已經完成s消息：

$("#submit").on("click", function(e) { 
    e.stopImmediatePropagation(); 
    $("#signup").delay(500).fadeOut(280, function() { 
     $(this).after('<p id="success">Thank you</p>'); 
    }); 

}）;

Answer 2

如果我的理解正確，您希望用戶通過您的html表單提交信息。然後你想讓表單在你點擊提交按鈕後消失。

從閱讀JQuery方法你試過我發現一個錯誤，防止你的窗體淡出。你在你的JQuery代碼中使用了錯誤的id（它應該根據你的html進行子表單）。請注意，我刪除了您的PHP代碼，以便我可以爲您在jsfiddle中創建一個示例。我的示例帖子爲google.com，以防止您在結果部分顯示錯誤頁面。

的jsfiddle：fade out form on submission

$("#submit").on("click", function(e) { 

     //changed from e.stopImmediatePropogation() 
     e.preventDefault(); 

     //#subform is the actual id of your form, you were using signup 
     $("#subform").fadeOut(280, function() { 
      // callback method to display new text 
      // setup other codes here to store the e-mail address 
      $(this).after('<p id="success">Thank you</p>'); 
     }); 
    });