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

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

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

受付中

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

coh46
coh46

総合スコア9

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

3回答

0リアクション

1クリップ

10343閲覧

投稿2018/10/03 15:35

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

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

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

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

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

php

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

<?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ページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

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

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

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

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

適切な質問に修正を依頼しましょう。

asahina1979

2018/10/04 03:39

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。