PHPとJavaScriptの実行順序がわからない
受付中
回答 2
投稿
- 評価
- クリップ 1
- VIEW 2,836
既存のコードを元にログインページを作成しながら、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" >ログインＩＤ</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" >ログインＩＤ</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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+4
具体的なコードの方は見ていませんが、「PHPとJavaScriptの実行順序」について。
PHPとJavaScriptは同じファイル内にコードが書けますが、完全に別物です。
大まかに書けば、処理として以下のような感じになります。
- ブラウザから http リクエストが Webサーバに届く
- Webサーバはリクエストに応じたファイルを読み込む
- そのファイルが PHP ファイルなら PHP を実行し、その出力結果をファイルを読み込んだ結果とする
- ファイルを読み込んだ結果をブラウザへ返す
- ブラウザは返された結果の中に JavaScript があれば実行する
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
ブラウザで「ソースを表示」して<?php ?> で囲まれていてechoやprintなど出力系の指示以外のところがどうなっているか確認すると見えてくることはあると思います。
あとは割と最近の質問に私が回答した中にそれザッと書いてあるので、そちらも読んでみてください。
- https://teratail.com/questions/149920#reply-225651
※回答への直リンク。質問内容は読まなくてもある程度わかる内容かなと
で、理解した内容と今の自身のコードの状態、回答の冒頭で確認するようにお願いした部分を合わせるとなぜ想定通り動かないのかは見えてくるかと。
「じゃあどうすれば想定通りに動くようになるか」は考えてみてください。おそらくしっかり考えれば見えてくることだとは思いますし、ここを乗り越えないと段々この先厳しくなってきます（私も最初の頃は相当苦労しました）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 89.96%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
asahina1979
2018/10/04 12:39
Header.inc があなた以外しらないので、だれも再現コードはわかりません。（現状閲覧者・回答者では、何度クリックしてもログインできないでしょう）