2016-11-08 10 views
1

これで数時間の回答を探していましたが、私は完全に積み重なって脳が凍りついています。投稿フォームの後に空白のPHPページを取り除くことはできません

投稿が成功した場合、ブートストラップモードでphpフォームを購読してください。すべてが機能し、電子メールが通過し、1秒後またはそれ以下の空白ページが表示されます。

form.phpファイルが別のファイルになる前に読み込まれていると思いますが、空白ページの読み込みを停止する方法はありますか?

ここでは、HTMLコード

<form action="form.php" method="post"> 
 
    <div class="form-group label-floating"> 
 
    <input name="email" class="control-label form-control text-center" type="text" placeholder="Enter your email address ..."> 
 
    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Send</button> 
 
    </div> 
 
</form> \t 
 

 

 
<!-- Sart Modal --> 
 
\t <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
\t \t <div class="modal-dialog"> 
 
\t \t \t <div class="modal-content"> 
 
\t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
 
\t \t \t \t \t \t <i class="material-icons">clear</i> 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <h4 class="modal-title">Thank you</h4> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t <p>Thank you for registering, we have added you to the waiting list! 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="modal-footer"> 
 
\t \t \t \t \t <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
<!-- End Modal -->

そしてここでのPHPコードである

<?php 
 
$to = "[email protected]"; 
 
$from = "[email protected]"; 
 

 
$headers = "From: " . $from . "\r\n"; 
 

 
$subject = "New Beta Subscription"; 
 
$body = "New user interested in beta program: " . $_POST['email']; 
 

 

 
if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) 
 
{ 
 
    if (mail($to, $subject, $body, $headers, "-f " . $from)) 
 
    { 
 
     echo "<script type='text/javascript'> 
 
       $(document).ready(function(){ 
 
       $('#myModal').modal('show'); 
 
       window.stop(); 
 
       }); 
 
       </script>"; 
 
    } 
 
    else 
 
    { 
 
     echo 'There was a problem with your e-mail (' . $_POST['email'] . ')'; 
 
    } 
 
} 
 
else 
 
{ 
 
    echo 'There was a problem with your e-mail (' . $_POST['email'] . ')'; 
 
}

はまた、SHにエラーメッセージを変更したいれます同じ索引ファイルから2つのモーダルを呼び出すことができるかどうかは分かりません。

非常に歓迎されます。 ありがとう、K>

+1

php 'json_encode'を使い、フロントエンドで' Ajax'を使う方が良いと思います。 – claudios

答えて

1

あなたが達成しようとしていることは、実際にコード化したものとは異なるようです。

あなたのHTMLフォームを見てみましょう。送信ボタンにBootstrapのdata-toggle属性とdata-target属性を添付しました。つまり、そのボタンをクリックするとモーダルが開き、フォームが送信されます。したがって、ユーザーは簡単にモーダルを見て、ページがあなたのPHPファイルにリダイレクトされるのを見ます。 (これがモーダルを簡単に表示する理由です)

次に、PHPファイルを見てみましょう。まず、あるページから別のページにフォームを送信すると、後者のページには元のページのHTML要素がないということがあります。これは、元のページのHTML要素を探しているときに、echo323のタグ内にあるコードが実際には機能していないことを意味します。

ここで、空白のページが表示される理由について質問します。まあ...すべてが正常に動作しているので、コードには<script>というタグがあります。これは視覚的なインジケータがありません。しかし、私がちょうど言ったように、<script>の中にあるものは機能しません - 何も現れず何も起こりません。

ボタンをクリックしたときのイベントの順番をまとめると、モーダルが表示され、フォームが送信され、フォームが別のページにリダイレクトされ、他のページはエコーされません。

  1. は、PHPファイルにHTMLファイルを変更し

    :以下

    は、私はあなたが達成しようとしていると思うものに貧しい/迅速なソリューションです。

  2. data-toggle削除し、あなたがあなたのPHPの提出ページからecho'd scriptタグを移動し

    ボタン

    <form action="form.php" method="post"> 
        <div class="form-group label-floating"> 
         <input name="email" class="control-label form-control text-center" type="text" placeholder="Enter your email address ..."> 
         <button type="submit" class="btn btn-primary">Send</button> 
        </div> 
    </form> 
    
  3. をクリックしたとき、それはモーダル権利を開けないようにdata-targetは、あなたのボタンをオフに属性PHPのフォームページと、以下に示すような状態でそれをラップ:

    <?php if (!empty($_GET['success'])) : ?> 
        <script> 
         $(document).ready(function(){ 
          $("#myModal").modal(); 
         }); 
        </script> 
    <?php endif ?> 
    
  4. PHPのsubmのコードのごecho'd scriptタグラインを削除します発行ページ。代わりに、PHPフォームページにリダイレクトされるようにコードを追加してください。重要な点は、URLの末尾に?success=trueを追加することです。

    $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); // valid email or null|false 
    
    if ($email) { 
        $to = "[email protected]"; 
        $from = "[email protected]"; 
        $headers = "From: " . $from . "\r\n"; 
        $subject = "New Beta Subscription"; 
        $body = "New user interested in beta program: " . $email; 
    
        if (mail($to, $subject, $body, $headers, "-f " . $from)) { 
         header('Location: subscribe.php?success=true'); // replace `subscribe.php` with PHP form page 
         exit; 
        } 
        echo 'There was a problem with your e-mail (' . $email . ')'; 
    } else { 
        echo 'There was a problem with your e-mail'; // no point in printing $email if it is null 
    } 
    

基本的には、?success=trueを渡すと、すべてがモーダル(3)を開くためにうまくいったことをPHPフォームページを伝えるためのものです。

それはそれであるはずです。

より良いアプローチは、AJAXを学び、使用することです。

+0

詳細な説明とステップガイダンスをお寄せいただきありがとうございます。何らかの理由でそれを動作させることができませんでした...その空白のページの代わりに内部サーバーのエラーが発生しましたが、まだ送信された電子メールがまだ届いています... –

+0

これは忘れてしまった 'Location:'文字列'header()'関数で呼び出すことができます。 – Mikey

+0

[OK]をクリックすると、空白のページが表示されなくなります。モーダルだけも表示されません。提出後にページがリフレッシュされたようですが、電子メールはまだ通過しています。 –

関連する問題