質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.96%

PHPとJavaScriptの実行順序がわからない

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 2,836

coh46

score 5

既存のコードを元にログインページを作成しながら、jQueryの勉強をしています。
もともとログインボタンをクリックすると、新規ウィンドウでメインページが開かれるようになっているのですが、
jQueryでCtrlキーとShiftキーを判別し、展開方法を分岐しようと思っています。

分岐自体は思うようにできたのですが、ログインボタンを押したとき、
1度目のクリックでは何も起きず、2度目のクリックで動作するようになってしまいました。(クリックが2回必要になっている)

自分なりに調べたところ、PHPとJavaScriptの実行順序が関係しているのではないかと考えました。
以下予想です。
・"loginFlg"が1度目のクリックでtrueになる
・"loginFlg"がtrueの状態で、2度目のクリックで分岐が行われる

目的としては、「"loginFlg"をtrueにして分岐して展開」という動作を1回のクリックで済ませたいと思っています。
よろしくお願いします。

※以下、もともとのコード
※こちらは1回のクリックで新規ウィンドウで展開します。

<?php
    include 'Config.inc';
    include 'Logic.inc';
    session_start();
    $title = 'ログイン';

    $loginId = "";
    $loginFlg = false;

    // ログインボタンが押されたかを判定
    // 初めてのアクセスでは認証は行わずエラーメッセージは表示しないように
    if (isset($_POST["submit_type"]) && $_POST["submit_type"] == "login") {
        unset($_POST["submit_type"]);

        $loginId = $_POST['login_id'];
        $passWord = $_POST['password'];

        //----------------以下省略----------------
        //データベース接続
        //IDとPWを検索
        //見つかったらセッションに登録
        //----------------以上省略----------------

        $loginFlg = true;
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <?php
            include('Head.inc');
        ?>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#btnLogin').click(function() {
                    $("#submit_type").val("login");
                    document.forms["frm"].submit();
                });
                <?php
                    if($loginFlg == true){
                        echo("var already = (window.name == 'hoge') ? true : false;");
                        echo("if (already) {");
                        echo("  window.location='./Main.php';");
                        echo("} else {");
                        echo("  var iScreenWidth = screen.width;");
                        echo("  var iScreenHeight = screen.height - 40;");
                        echo("  var iLeft;");
                        echo("  var iTop;");
                        echo("  var iWidth = screen.availWidth;");
                        echo("  var iHeight = screen.availHeight;");
                        echo("  var sOption = 'scrollbars=yes,toolbar=no,location=no,menubar=no,status=no,resizable=yes';");
                        echo("  if(iScreenWidth < screen.availWidth + 20) iWidth = iScreenWidth - 20;");
                        echo("  if(iScreenHeight < screen.availHeight + 40) iHeight = iScreenHeight - 40;");
                        echo("  iLeft = Math.floor((iScreenWidth - (iWidth + 20)) / 2);");
                        echo("  iTop = Math.floor((iScreenHeight - (iHeight + 40)) / 2);");
                        echo("  if(iLeft < 0) iLeft = 0;");
                        echo("  if(iTop < 0) iTop = 0;");
                        echo("  sOption += ',width=' + iWidth + ',height=' + iHeight + ',left=' + iLeft + ',top=' + iTop;");
                        echo("  window.open('./Main.php', 'hoge', sOption);");
                        echo("}");
                    }
                ?>
            });
        </script>
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <form id="frm" name="frm" method="POST" action="Login.php">
            <?php
                include('Header.inc');
            ?>
            <table align="left" style="padding-top:20px;padding-bottom:20px;">
                <tr>
                    <td width="120px"></td>
                    <th width="120px" align="left" >ログインID</th>
                    <td><input type="text" name="login_id" id="login_id" maxlength="4" style="width: 120px;" value="<?php if($loginId!="") { print $loginId; } ?>"></td>
                </tr>
                <tr>
                    <td></td>
                    <th width="120px" align="left">パスワード</th>
                    <td><input type="password" name="password" id="password" maxlength="6" style="width: 120px;"></td>
                </tr>
                <tr>
                    <td colspan="2"></td>
                    <td>
                        <input type="button" name="btnLogin" id="btnLogin" style="width: 100px" value="ログイン">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

※以下問題のコード
※1回のクリックで分岐して展開したい

<?php
    include 'Config.inc';
    include 'Logic.inc';
    session_start();
    $title = 'ログイン';

    $loginId = "";
    $loginFlg = false;

    // ログインボタンが押されたかを判定
    // 初めてのアクセスでは認証は行わずエラーメッセージは表示しないように
    if (isset($_POST["submit_type"]) && $_POST["submit_type"] == "login") {
        unset($_POST["submit_type"]);

        $loginId = $_POST['login_id'];
        $passWord = $_POST['password'];

        //----------------以下省略----------------
        //データベース接続
        //IDとPWを検索
        //見つかったらセッションに登録
        //----------------以上省略----------------

        $loginFlg = true;
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <?php
            include('Head.inc');
        ?>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#btnLogin').click(function(e) {
                    $("#submit_type").val("login");
                    document.forms["frm"].submit();

                    <?php if($loginFlg == true){ ?>
                        if(e.ctrlKey){
                            if(e.shiftKey){
                                //新しいタブで開いて移動
                                window.open('./Main.php', '_blank');
                            }else{
                                //新しいタブで開く
                                window.open('./Main.php');
                            }
                        }else if(e.shiftKey){
                            //新しいウィンドウで開く
                            var already = (window.name == 'hoge') ? true : false;
                            if(already){
                                window.location='./Main.php';
                            }else{
                                var iScreenWidth = screen.width;
                                var iScreenHeight = screen.height - 40;
                                var iLeft;
                                var iTop;
                                var iWidth = screen.availWidth;
                                var iHeight = screen.availHeight;
                                var sOption = 'scrollbars=yes,toolbar=no,location=no,menubar=no,status=no,resizable=yes';
                                if(iScreenWidth < screen.availWidth + 20) iWidth = iScreenWidth - 20;
                                if(iScreenHeight < screen.availHeight + 40) iHeight = iScreenHeight - 40;
                                iLeft = Math.floor((iScreenWidth - (iWidth + 20)) / 2);
                                iTop = Math.floor((iScreenHeight - (iHeight + 40)) / 2);
                                if(iLeft < 0) iLeft = 0;
                                if(iTop < 0) iTop = 0;
                                sOption += ',width=' + iWidth + ',height=' + iHeight + ',left=' + iLeft + ',top=' + iTop;
                                window.open('./Main.php', 'hoge', sOption);
                            }
                        }else{
                            //現在のタブで開く
                            window.location.href='./Main.php';
                        }
                    <?php } ?>
                });
            });
        </script>
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
        <form id="frm" name="frm" method="POST" action="Login.php">
            <?php
                include('Header.inc');
            ?>
            <table align="left" style="padding-top:20px;padding-bottom:20px;">
                <tr>
                    <td width="120px"></td>
                    <th width="120px" align="left" >ログインID</th>
                    <td><input type="text" name="login_id" id="login_id" maxlength="4" style="width: 120px;" value="<?php if($loginId!="") { print $loginId; } ?>"></td>
                </tr>
                <tr>
                    <td></td>
                    <th width="120px" align="left">パスワード</th>
                    <td><input type="password" name="password" id="password" maxlength="6" style="width: 120px;"></td>
                </tr>
                <tr>
                    <td colspan="2"></td>
                    <td>
                        <input type="button" name="btnLogin" id="btnLogin" style="width: 100px" value="ログイン">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2018/10/04 12:39

    Header.inc があなた以外しらないので、だれも再現コードはわかりません。(現状閲覧者・回答者では、何度クリックしてもログインできないでしょう)

    キャンセル

回答 2

+4

具体的なコードの方は見ていませんが、「PHPとJavaScriptの実行順序」について。
PHPとJavaScriptは同じファイル内にコードが書けますが、完全に別物です。

大まかに書けば、処理として以下のような感じになります。

  1. ブラウザから http リクエストが Webサーバに届く
  2. Webサーバはリクエストに応じたファイルを読み込む
  3. そのファイルが PHP ファイルなら PHP を実行し、その出力結果をファイルを読み込んだ結果とする
  4. ファイルを読み込んだ結果をブラウザへ返す
  5. ブラウザは返された結果の中に JavaScript があれば実行する

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+3

ブラウザで「ソースを表示」して<?php  ?> で囲まれていてechoやprintなど出力系の指示以外のところがどうなっているか確認すると見えてくることはあると思います。

あとは割と最近の質問に私が回答した中にそれザッと書いてあるので、そちらも読んでみてください。

で、理解した内容と今の自身のコードの状態、回答の冒頭で確認するようにお願いした部分を合わせるとなぜ想定通り動かないのかは見えてくるかと。
「じゃあどうすれば想定通りに動くようになるか」は考えてみてください。おそらくしっかり考えれば見えてくることだとは思いますし、ここを乗り越えないと段々この先厳しくなってきます(私も最初の頃は相当苦労しました)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/04 12:58

    なんでこの時期にと思うよなぁ・・・この手の質問

    4月入学組: 遅すぎる
    10月入学組:あっても来週以降だろう

    っと件の最悪のコードに匹敵はしないでもその次くらいか

    キャンセル

  • 2018/10/04 13:03

    サーバーの方はひとまず最低限でクライアントの方メインでそっちばかりとかあるかもしれませんね。
    私は基本部分は全部独学であとはOJTだったので通常とは違うルート通ってるかもしれませんが。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる