2

私が取り組んでいるニュースレター購読フォームは、このリンクのフッターにあります。

現在、フォームが送信されると、エラー/成功のメッセージが新しいページに表示されます。

代わりに、エラー/成功メッセージをフッターのフォームのすぐ下に表示したいと思います。

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 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
}
?>
4

2 に答える 2

2

これを行う場合は、通常のフォームのPOST送信ではなく、AJAXPOST送信のようなものを使用する必要があります。次に、エラーまたは成功条件を示す任意の場所に応答テキストを配置できます。

于 2011-07-14T03:24:04.613 に答える
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();" />

次に、次のようにIDが「submissionResponse」のフォームの下にdivを追加します。

<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>

同じ目標を達成するための2つの方法。Ajaxを使用すると、エンドユーザーが1行のテキストをロードするだけで済み、2番目の方法ではページ全体を完全にリロードする必要があるため、より高速になります。

于 2011-07-14T03:26:15.410 に答える