Q&A
Header.inc があなた以外しらないので、だれも再現コードはわかりません。（現状閲覧者・回答者では、何度クリックしてもログインできないでしょう）
既存のコードを元にログインページを作成しながら、jQueryの勉強をしています。
もともとログインボタンをクリックすると、新規ウィンドウでメインページが開かれるようになっているのですが、
jQueryでCtrlキーとShiftキーを判別し、展開方法を分岐しようと思っています。
分岐自体は思うようにできたのですが、ログインボタンを押したとき、
1度目のクリックでは何も起きず、2度目のクリックで動作するようになってしまいました。(クリックが2回必要になっている)
自分なりに調べたところ、PHPとJavaScriptの実行順序が関係しているのではないかと考えました。
以下予想です。
・"loginFlg"が1度目のクリックでtrueになる
・"loginFlg"がtrueの状態で、2度目のクリックで分岐が行われる
目的としては、「"loginFlg"をtrueにして分岐して展開」という動作を1回のクリックで済ませたいと思っています。
よろしくお願いします。
※以下、もともとのコード
※こちらは1回のクリックで新規ウィンドウで展開します。
php
1<?php 2 include 'Config.inc'; 3 include 'Logic.inc'; 4 session_start(); 5 $title = 'ログイン'; 6 7 $loginId = ""; 8 $loginFlg = false; 9 10 // ログインボタンが押されたかを判定 11 // 初めてのアクセスでは認証は行わずエラーメッセージは表示しないように 12 if (isset($_POST["submit_type"]) && $_POST["submit_type"] == "login") { 13 unset($_POST["submit_type"]); 14 15 $loginId = $_POST['login_id']; 16 $passWord = $_POST['password']; 17 18 //----------------以下省略---------------- 19 //データベース接続 20 //IDとPWを検索 21 //見つかったらセッションに登録 22 //----------------以上省略---------------- 23 24 $loginFlg = true; 25 } 26?> 27<!DOCTYPE html> 28<html> 29 <head> 30 <?php 31 include('Head.inc'); 32 ?> 33 <script type="text/javascript"> 34 $(document).ready(function() { 35 $('#btnLogin').click(function() { 36 $("#submit_type").val("login"); 37 document.forms["frm"].submit(); 38 }); 39 <?php 40 if($loginFlg == true){ 41 echo("var already = (window.name == 'hoge') ? true : false;"); 42 echo("if (already) {"); 43 echo(" window.location='./Main.php';"); 44 echo("} else {"); 45 echo(" var iScreenWidth = screen.width;"); 46 echo(" var iScreenHeight = screen.height - 40;"); 47 echo(" var iLeft;"); 48 echo(" var iTop;"); 49 echo(" var iWidth = screen.availWidth;"); 50 echo(" var iHeight = screen.availHeight;"); 51 echo(" var sOption = 'scrollbars=yes,toolbar=no,location=no,menubar=no,status=no,resizable=yes';"); 52 echo(" if(iScreenWidth < screen.availWidth + 20) iWidth = iScreenWidth - 20;"); 53 echo(" if(iScreenHeight < screen.availHeight + 40) iHeight = iScreenHeight - 40;"); 54 echo(" iLeft = Math.floor((iScreenWidth - (iWidth + 20)) / 2);"); 55 echo(" iTop = Math.floor((iScreenHeight - (iHeight + 40)) / 2);"); 56 echo(" if(iLeft < 0) iLeft = 0;"); 57 echo(" if(iTop < 0) iTop = 0;"); 58 echo(" sOption += ',width=' + iWidth + ',height=' + iHeight + ',left=' + iLeft + ',top=' + iTop;"); 59 echo(" window.open('./Main.php', 'hoge', sOption);"); 60 echo("}"); 61 } 62 ?> 63 }); 64 </script> 65 </head> 66 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 67 <form id="frm" name="frm" method="POST" action="Login.php"> 68 <?php 69 include('Header.inc'); 70 ?> 71 <table align="left" style="padding-top:20px;padding-bottom:20px;"> 72 <tr> 73 <td width="120px"></td> 74 <th width="120px" align="left" >ログインＩＤ</th> 75 <td><input type="text" name="login_id" id="login_id" maxlength="4" style="width: 120px;" value="<?php if($loginId!="") { print $loginId; } ?>"></td> 76 </tr> 77 <tr> 78 <td></td> 79 <th width="120px" align="left">パスワード</th> 80 <td><input type="password" name="password" id="password" maxlength="6" style="width: 120px;"></td> 81 </tr> 82 <tr> 83 <td colspan="2"></td> 84 <td> 85 <input type="button" name="btnLogin" id="btnLogin" style="width: 100px" value="ログイン"> 86 </td> 87 </tr> 88 </table> 89 </form> 90 </body> 91</html> 92
※以下問題のコード
※1回のクリックで分岐して展開したい
php
1<?php 2 include 'Config.inc'; 3 include 'Logic.inc'; 4 session_start(); 5 $title = 'ログイン'; 6 7 $loginId = ""; 8 $loginFlg = false; 9 10 // ログインボタンが押されたかを判定 11 // 初めてのアクセスでは認証は行わずエラーメッセージは表示しないように 12 if (isset($_POST["submit_type"]) && $_POST["submit_type"] == "login") { 13 unset($_POST["submit_type"]); 14 15 $loginId = $_POST['login_id']; 16 $passWord = $_POST['password']; 17 18 //----------------以下省略---------------- 19 //データベース接続 20 //IDとPWを検索 21 //見つかったらセッションに登録 22 //----------------以上省略---------------- 23 24 $loginFlg = true; 25 } 26?> 27<!DOCTYPE html> 28<html> 29 <head> 30 <?php 31 include('Head.inc'); 32 ?> 33 <script type="text/javascript"> 34 $(document).ready(function() { 35 $('#btnLogin').click(function(e) { 36 $("#submit_type").val("login"); 37 document.forms["frm"].submit(); 38 39 <?php if($loginFlg == true){ ?> 40 if(e.ctrlKey){ 41 if(e.shiftKey){ 42 //新しいタブで開いて移動 43 window.open('./Main.php', '_blank'); 44 }else{ 45 //新しいタブで開く 46 window.open('./Main.php'); 47 } 48 }else if(e.shiftKey){ 49 //新しいウィンドウで開く 50 var already = (window.name == 'hoge') ? true : false; 51 if(already){ 52 window.location='./Main.php'; 53 }else{ 54 var iScreenWidth = screen.width; 55 var iScreenHeight = screen.height - 40; 56 var iLeft; 57 var iTop; 58 var iWidth = screen.availWidth; 59 var iHeight = screen.availHeight; 60 var sOption = 'scrollbars=yes,toolbar=no,location=no,menubar=no,status=no,resizable=yes'; 61 if(iScreenWidth < screen.availWidth + 20) iWidth = iScreenWidth - 20; 62 if(iScreenHeight < screen.availHeight + 40) iHeight = iScreenHeight - 40; 63 iLeft = Math.floor((iScreenWidth - (iWidth + 20)) / 2); 64 iTop = Math.floor((iScreenHeight - (iHeight + 40)) / 2); 65 if(iLeft < 0) iLeft = 0; 66 if(iTop < 0) iTop = 0; 67 sOption += ',width=' + iWidth + ',height=' + iHeight + ',left=' + iLeft + ',top=' + iTop; 68 window.open('./Main.php', 'hoge', sOption); 69 } 70 }else{ 71 //現在のタブで開く 72 window.location.href='./Main.php'; 73 } 74 <?php } ?> 75 }); 76 }); 77 </script> 78 </head> 79 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 80 <form id="frm" name="frm" method="POST" action="Login.php"> 81 <?php 82 include('Header.inc'); 83 ?> 84 <table align="left" style="padding-top:20px;padding-bottom:20px;"> 85 <tr> 86 <td width="120px"></td> 87 <th width="120px" align="left" >ログインＩＤ</th> 88 <td><input type="text" name="login_id" id="login_id" maxlength="4" style="width: 120px;" value="<?php if($loginId!="") { print $loginId; } ?>"></td> 89 </tr> 90 <tr> 91 <td></td> 92 <th width="120px" align="left">パスワード</th> 93 <td><input type="password" name="password" id="password" maxlength="6" style="width: 120px;"></td> 94 </tr> 95 <tr> 96 <td colspan="2"></td> 97 <td> 98 <input type="button" name="btnLogin" id="btnLogin" style="width: 100px" value="ログイン"> 99 </td> 100 </tr> 101 </table> 102 </form> 103 </body> 104</html> 105
回答3件
5
具体的なコードの方は見ていませんが、「PHPとJavaScriptの実行順序」について。
PHPとJavaScriptは同じファイル内にコードが書けますが、完全に別物です。
大まかに書けば、処理として以下のような感じになります。
- ブラウザから http リクエストが Webサーバに届く
- Webサーバはリクエストに応じたファイルを読み込む
- そのファイルが PHP ファイルなら PHP を実行し、その出力結果をファイルを読み込んだ結果とする
- ファイルを読み込んだ結果をブラウザへ返す
- ブラウザは返された結果の中に JavaScript があれば実行する
投稿2018/10/04 03:21
総合スコア1167
3
ブラウザで「ソースを表示」して<?php ?> で囲まれていてechoやprintなど出力系の指示以外のところがどうなっているか確認すると見えてくることはあると思います。
あとは割と最近の質問に私が回答した中にそれザッと書いてあるので、そちらも読んでみてください。
※回答への直リンク。質問内容は読まなくてもある程度わかる内容かなと
で、理解した内容と今の自身のコードの状態、回答の冒頭で確認するようにお願いした部分を合わせるとなぜ想定通り動かないのかは見えてくるかと。
「じゃあどうすれば想定通りに動くようになるか」は考えてみてください。おそらくしっかり考えれば見えてくることだとは思いますし、ここを乗り越えないと段々この先厳しくなってきます（私も最初の頃は相当苦労しました）
投稿2018/10/03 20:06
総合スコア80701
回答へのコメント
なんでこの時期にと思うよなぁ・・・この手の質問
4月入学組： 遅すぎる
10月入学組：あっても来週以降だろう
っと件の最悪のコードに匹敵はしないでもその次くらいか
サーバーの方はひとまず最低限でクライアントの方メインでそっちばかりとかあるかもしれませんね。
私は基本部分は全部独学であとはOJTだったので通常とは違うルート通ってるかもしれませんが。
0
phpがさきじゃないですかね？
普通上から実行なので
投稿2022/01/05 11:57
総合スコア28
回答へのコメント
ソースコードの上下は無関係です。
ssasakiさんの回答をご参照ください。
あなたの回答
tips
プレビュー
