帮我制作一个简单的时事通讯订阅表格吗？

Question

我正在处理的时事通讯订阅表格可以在此链接的页脚中找到。

目前，提交表单时，错误/成功消息会显示在新页面上。

相反，我希望错误/成功消息直接显示在页脚中的表单下方。

IE。如果用户输入电子邮件地址 [email protected]，则文本“成功” " 应显示在输入字段下方，而不是显示在新页面上。

帮助将不胜感激！

这是我现在得到的：

在标题中

<script>
function submitEmail() {

    var email = $('#emailText').val();

    jQuery.post('/common/php/send_news.php', {
        email: email
    },function(data){
        $('#submissionResponse').html(data);
    },html);

}
</script>

FORM

<form method="post">
        <fieldset>
        <h3></h3>
        <input type="text" name="email" maxlength="80" class="input" value="enter your email address..." onfocus="this.className=('input_active')" onblur="this.className=('input')" onclick="this.value='';" />
        <input type="button" name="submit"  value="" class="subscribe_btn" onmouseover="this.className=('subscribe_btn_over')" onmouseout="this.className=('subscribe_btn')" onclick="submitEmail();" />
        <small>*we will not share your email address</small><span class="clear"></span>
        </fieldset>
      </form>
      <div id="submissionResponse"></div>

send_news.php

<?php
if(isset($_POST['email'])) {

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "[email protected]";
    $email_subject = "Newsletter Subscription";


    function died($error) {
        // your error code can go here
        echo "There was an error with your submission";
        echo $error."<br /><br />";
        die();
    }

    // validation expected data exists
    if(
        !isset($_POST['email'])) {
        died('There was an error with your submission');       
    }

    $email_from = $_POST['email']; // required


    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }

  if(strlen($error_message) > 0) {
    died($error_message);
  }
    $email_message = "Form details below.\n\n";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Email: ".clean_string($email_from)."\n";


// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>

<!-- include your own success html here -->

Thanks for signup up for the Newsletter!

<?php
}
?>

Answer 1

我要做的是设置一个简单的页面来回显成功或失败，然后使用 Ajax 调用将信息从表单传递到该页面 - 您可以使用 jQuery 来实现此目标。

将其添加到 javascript 文件或脚本标记中的标题中：

function submitEmail() {

    var email = $('#emailText').val();

    jQuery.post('/submission.php', {
        email: email
    },function(data){
        $('#submissionResponse').html(data);
    },html);

}

然后更改表单，使提交按钮如下所示：

<input type="button" name="submit" value="Submit" onclick="submitEmail();" />

然后在表单下方添加一个 ID 为“submissionResponse”的 div，如下所示：

<div id="submissionResponse"></div>

这样您就可以能够像更改页面一样处理帖子，但您将自动提交数据并获取响应。

---

另一个编辑：

当我这样做时，我不妨提供另一种方法来做类似的事情。您可以不使用 Ajax，而是按照现在的方式进行操作，但指示表单重新加载当前页面 (action="")，然后在此页面顶部添加

if(isset($_POST['email'])){
    include('submission.php');
}

并在表单下方添加：

<div id="formStatus"><?php echo isset($formStatusResponse) ? $formStatusResponse : null; ?></div>

实现同一目标的两种方法。使用 Ajax 速度更快，因为它只需要最终用户加载一行文本，而第二种方法需要完全重新加载整个页面。

Answer 2

如果您希望执行此操作，则需要使用 AJAX POST 提交之类的内容，而不是普通的表单 POST 提交。然后，您可以将响应文本放置在您希望指示错误或成功条件的任何位置。