Javascript jquery电子邮件注册表单试图在提交后隐藏表单

我正在尝试使用一个简单的jquery/php时事通讯脚本。剧本写得很好。当我输入姓名和电子邮件并点击提交按钮时，它会将数据保存到一个.txt文件中，并在表单中显示一条成功消息。现在，我想修改脚本。我不希望表单在我点击提交时被看到，相反，它应该只显示成功消息谢谢你。作为javascript的新手，到目前为止，我已经发现我需要在单击submit按钮后淡出表单

我想代码可能是这样的

      $("#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;
?>

尝试提供.delay，以便在尝试显示成功消息之前，淡出功能已完成：

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

---

})

如果我理解正确，您希望用户通过html表单提交信息。然后，您希望表单在点击提交按钮后消失

通过阅读您尝试过的JQuery方法，我发现了一个错误，它阻止了表单淡出。您在JQuery代码中使用了错误的表单id。根据您的html，它应该是子表单。请注意，我删除了您的PHP代码，以便可以在JSFIDLE中为您创建一个示例。我的示例发布到google.com，以防止您在结果部分显示错误页面

jsfiddle：

---

让我看看我是否明白了。表单会淡出，但不会显示成功消息，对吗？@Juan整个表单都会淡出。@嗨，Larray，它部分工作，因为我也在使用php脚本。我需要在这个函数中添加您的代码-signupthisform{}。你能提出一些建议吗？你能把php代码放回去吗？你需要一个测试吗？你想注册表单再次显示吗？如果是的话，在你的post方法的回调函数中放置一个淡入函数调用我刚刚添加了php代码。期待您的评论。@不，我不需要再次显示注册表，只需显示成功消息。谢谢，我将在今天晚些时候查看是否可以设置测试环境。很抱歉，我没有时间完全测试您的代码，但我更改了部分答案。请测试一下，看看它是否对你有效。@LarryLane我想你是想回应你自己的答案？

$("#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>');
      });
  });