Question

我正在尝试使用简单的jquery / php新闻稿脚本。该脚本工作正常。当我输入名称和电子邮件并点击提交按钮时，它会将数据保存到.txt文件中，并随表单一起显示成功消息。现在，我想修改脚本。我不希望看到表单，因为我点击提交，而不是它应该只显示成功消息＆＃34;谢谢。＆＃34;作为javascript的新手，我到目前为止已经发现我需要＆＃34; fadeOut＆＃34;单击提交按钮后的表单。

我认为代码可能看起来像

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

尝试提供class FooBase { public: enum Bar { SOME_VALUE }; protected: ~FooBase() = default; //so can't be used polymorphically }; //hash goes here class Foo : FooBase { public: using FooBase::Bar; using FooBase::SOME_VALUE; ...以便在尝试显示成功消息之前.delay()函数已完成：

fadeOut()

}）;

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

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

2 个答案: