web-dev-qa-db-ja.com

フォーム送信後にモーダルをロードする

関連ページはこちら： http://marcmurray.net/test_sites/cans/news.php

ユーザーが電子メールを送信した後、しばらくの間、メッセージ確認モーダルをロードしようとしましたが、まったく機能しません。

これまで、スクリプト全体をエコー出力し、スクリプトをトリガーし、URLのハッシュを変更して、サイトの他の領域で機能していたかどうかを確認してみました。

アラートなどの機能の追加やページへのテキストのエコーは正常に機能しますが、showメソッドを使用すると機能しません。それは私が文字を間違って逃げているか、またはモーダルが少し動作する方法を誤解していると信じるようになります。誰が私が混乱している場所を見ることができますか？

PHP：

<?php
if(isset($_POST["submit"])) {
        // Checking For Blank Fields..
    if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
       echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
    else
        {
        // Check if the "Sender's Email" input field is filled out
        $email=$_POST['vemail'];
                // Sanitize E-mail Address
        $email =filter_var($email, FILTER_SANITIZE_EMAIL);
                // Validate E-mail Address
        $email= filter_var($email, FILTER_VALIDATE_EMAIL);
        $emailConfirmed=$_POST['vemail'];
        if (!$email){
          echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
                }
                else
                {
                    $subject = $_POST['sub'];
                    $message = $_POST['msg'];
                    $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender's Email
                    $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                    // Message lines should not exceed 70 characters (PHP rule), so wrap it
                    $message = wordwrap($message, 70);
                    // Send Mail By PHP Mail Function
                    mail("[email protected]", $subject, $message, $headers);
                    echo "<script>$('#thankyouModal').modal('show')</script>";
                };
    }
 }
?>

モーダル用のHTML

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Thank you for pre-registering!</h4>
      </div>
      <div class="modal-body">
          <p>Thanks for getting in touch!</p>                     
      </div>    
    </div>
  </div>
</div>

編集：最初の質問よりも簡単になるようにコードを更新しました。

javascriptphpjquerytwitter-bootstrap
14
ladanta

modal showメソッドを事前に呼び出す代わりに、すべてのアセットを最初にロードしてからmodal showメソッドを呼び出します。

echo "<script>
         $(window).load(function(){
             $('#thankyouModal').modal('show');
         });
    </script>";
11
Swarnendu Paul

スクリプトをエコーする代わりに、javascriptを使用してフォーム送信を検出し、モーダルを表示しないのはなぜですか？

何かのようなもの

$("form").on('submit', function(){
   $('.modal').show();
})

（JQueryを使用している場合）

7
Tyler Pope

あなたのサンプルコードで私が見る最初の問題は、次のコードに不必要な\があることです。echo "<script> \。それを除く

2番目：boostrap modalに必要なすべてのjsファイルとcssファイルを含めていますか？そうでない場合は、次のコード行でコードを更新してください

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

最終的に、boostraprapモーダルを開くためにトリガーされるイベントはありません。次のコードを追加して、モーダルをトリガーします。

$(window).load(function(){
     $('#myModal').modal('show');
});

最終コード：

echo "<script>
            var newHTML = document.createElement ('div');
            newHTML.innerHTML =
            newHTML = document.createElement ('div');
            newHTML.innerHTML = ' <div id=\"myModal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\"> <div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"></div>';
            document.body.appendChild (newHTML);
            $(window).load(function(){
                 $('#myModal').modal('show');
            });
        </script>";

お役に立てれば。

2
mhrilwan
$('#thankyouModal').submit(function(e) {
    e.preventDefault(); // don't submit multiple times
    this.submit(); // use the native submit method of the form element
     $('#thankyouModal').modal('show'); //Open the model
});

またはフォーム送信後に手動でボタンを作成し、そのボタンをクリックしてモーダルを開くことができます

$('#thankyouModal').click(function(e) {
        e.preventDefault(); // don't submit multiple times
        $("form").submit(); // use the native submit method of the form element
 $('<button type="button" id="btnThankYou" class="hidden" data-toggle="modal" data-target="#thankyouModal">ThankYouButton</button>').appendTo('body');

//This will click the button and open the modal
    $("#btnThankYou" ).trigger("click");
    });
1
Anil Panwar

Bootstrapで設定する必要があると思われる.in（不透明度を1に設定）クラスが、フォームの送信後に表示されないことを発見しました。

$('.modal').show().addClass('in');

ところでコンソールにエラーがあります

$(...).parsley(...).on is not a function
1
Covik
$modal =   "<script>$(document).ready(function(){
         $('#thankyouModal').modal('show')
      });</script>";


if(isset($_GET["submit"]) && ($_GET["submit"]) ){
 // after running other script
 echo $modal; 
}
1
Satyam S

として試すことができます

$('#thankyouModal').submit(function(e) {
e.preventDefault(); // don't submit multiple times
this.submit(); // use the native submit method of the form element
 $('#thankyouModal').modal('show'); //Open the model
});
1
NewUser

このリンクをHEADタグに配置：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

そして、これを変更します：

<script>$('#thankyouModal').modal('show')</script>

に：

$(document).ready(function(){
<script>$('#thankyouModal').modal('show')</script>
});
1
Robinson Legaspi

たぶんこれが問題です。

 echo "<script>$('#thankyouModal').modal('show')</script>";

私はこれをするでしょう....

$var =   "<script>$(document).ready(function(){
             $('#thankyouModal').modal('show')
          });</script>";

後で、HTMLテンプレートの頭の内側の適切な部分に印刷します。

オプションを使用して、エコーするスクリプト内に$（document）.readyを追加すると、うまくいかないと思います...最後のオプションの問題は、スクリプトをエコーし​​ますが、jqueryはまだ完全にロードされておらず、認識されないことです。

したがって、パラメータとして送信してから印刷することをお勧めします。

フレームワークを使用しておらず、パラメーターを渡すのが難しい場合は、URLを使用してそれを実行し、私のproject.com/result.php?submit=true

フロントエンドでその変数を読み取ります

いいね

if(isset($_GET["submit"]) && ($_GET["submit"]) ){
//echo your modal script 
}
1
jpganz18

Xkcd149が言うように、リロードせずに同じページにモーダルをロードする場合は、AJAXリクエストを使用する必要があります。

  1. フォームのonsubmit属性を、リクエストデータを送信する関数に置き換えます

    window.onload = function() {
  var forms = document.getElementsByTagName("form");
  for(var f in forms) {
    frm[f].onsubmit = xhr; // xhr is the function that sends the XHR
  }
}

  2. 上記で使用した送信機能で、成功およびエラーコールバックを追加します。

    function xhr(){
  var client = new XMLHttpRequest();
  ...
  client.onerror = xhrerr;
  client.onreadystatechange = handler;
  client.send(...);
  ...
}

  3. 返されたHTTPコードが200（または必要なもの）の場合、成功関数はモーダルを表示する必要があります

    function handler(){
  if (this.readyState == 4 && this.status == 200) {
    var widget = document.getElementById("modal-body");
    // add content to the body of the modal
  } else {
  // manage error
  }
}
1
secenv

答えるには少し遅すぎることを知っています。しかし、うまくいけば他の人にも役立つかもしれません。

以下のコードは、Post-Redirect-Getパターンを使用している場合に役立ちました。フォーム送信後にモーダルを開きます。

window.onpageshow = function() {
    if (typeof window.performance != "undefined"
        && window.performance.navigation.type === 0) {
         $('#myModal').modal('show');
    }
}
0
PragmaticFire

フォームをajax経由で送信する必要があるかもしれません。そのため、イベントを送信した後、ページを更新する必要はありません。

ページを更新しない限り、モーダルは正常にロードされます。

0
LetsSeo
<?php
   if(isset($_POST["submit"])) {
    // Checking For Blank Fields..
   $checkpost = false;
if($_POST["vname"]==""||$_POST["vemail"]==""||$_POST["sub"]==""||$_POST["msg"]==""){
   echo "Please fill out everything! We need to know who you are, and why you want to get in touch with us!";}
else
    {
    // Check if the "Sender's Email" input field is filled out
    $email=$_POST['vemail'];
            // Sanitize E-mail Address
    $email =filter_var($email, FILTER_SANITIZE_EMAIL);
            // Validate E-mail Address
    $email= filter_var($email, FILTER_VALIDATE_EMAIL);
    $emailConfirmed=$_POST['vemail'];
    if (!$email){
      echo "Don't forget to include your email adress! Otherwise we can't get back to you.";
            }
            else
            {
 $checkpost = true;
                $subject = $_POST['sub'];
                $message = $_POST['msg'];
                $headers =  'From:' . $emailConfirmed . "\r\n"; // Sender's Email
                $headers .= 'Cc:' . $emailConfirmed . "\r\n"; // Carbon copy to Sender
                // Message lines should not exceed 70 characters (PHP rule), so wrap it
                $message = wordwrap($message, 70);
                // Send Mail By PHP Mail Function
                mail("[email protected]", $subject, $message, $headers);
                echo "<script>$('#thankyouModal').modal('show')</script>";
            };
}

}？>

hTMLで

<?php if($checkpost){ ?>
<script>
$('.modal').show();
</script>
<?php } ?>
0
Muhammad Junaid Aslam