Question

我正在处理的简报订阅表单可以在this link.

的页脚中找到

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

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

IE。如果用户输入电子邮件地址name@website.com，则“成功”文本应显示在输入字段下方而不是新页面上。

非常感谢帮助！

这就是我现在所拥有的：

在标题中

<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 = "test@emailtest.com";
    $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 POST提交的内容，而不是正常的表单POST提交。然后，您可以将响应文本放在您希望指示错误或成功条件的任何位置。

Answer 2

我要做的是设置一个回显成功或失败的简单页面，然后使用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();" />

然后在表单下面添加一个div，其id为“submissionResponse”，如下所示：

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

通过这种方式，您可以像更改页面时那样处理帖子，但您将自动提交数据并获取响应。

另一个编辑：

虽然我很喜欢，但我还是可以采用另一种方式来做类似的事情。您可以，而不是使用Ajax，完成您现在所做的工作，但指示表单重新加载当前页面（action="<?php echo $_SERVER['PHP_SELF']; ?>"），然后在此页面顶部添加

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

并在表单下面有：

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

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

帮我一个简单的通讯订阅表格？

2 个答案: