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>'); 
     }); 
    });