重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

Javascriptでlocation.hrefが妙な動き

解決済

  • 質問者：hatsuzo
  • 質問日時：
  • 回答数：4件

phpを使うプログラムだとどうしてもJavascriptの助けを借りることが多くなるのですが、動きが判りづらくエラーの判別もしにくいので躓くことが多々あり、アドバイスを頂けたらと思います。

aaa.php というスクリプトで、条件を与えた時に、その値からデータベースの値を抽出した結果を再帰呼び出しをして表示する処理を動かしていました。
これに対して、チェックボックスを入れた時は別スクリプトを呼び出すよう追加を加えました。

<script type="text/javascript">
<!--
window.onunload = function(){};
history.forward();
-->
</script>
<script type="text/javascript">
<!--
function set_Param() {
　　（エラーチェック部分は略）
excel = document.f1.ex.checked;
call_pgm = "./aaa.php";
// 追加　EXCEL出力の指定をした場合
if(excel == true){
call_pgm = "./bbb.php";
}
//
buf = call_pgm +
"?tkcd=" + document.f1.tkcd.value +
"&tksc=" + document.f1.tksc.value +
"&ex=" + document.f1.ex.checked;
location.href = buf;
return true;
}

呼出部分はこうです。
<body>
<form method="get" name="f1" action="#" accept-charset="UTF-8 Shift_JIS">
得意先コード：<input type='text' name='tkcd'>　－　<input type='text' name='tksc'><br>
<!-- 追加　<input type="checkbox" id="ex" value="1">EXCELに出力</br>　-->
<input type="submit" value="この条件で伝票を検索" onclick="javascript:set_Param();"/>
</form></body>

exというチェックボックスに値を入れた状態で、Chromeのデバッガ機能で、ブレークポイントを入れてみると、call_pgmという変数には "./bbb.php"が確かに入っていますが、処理結果としては、"./aaa.php"が実行されます。
bbb.phpの内容に問題があるかと思い、./bbb.phpの部分をフルパスに替え、デバッガで止めた状態のURL(変数bufの値)をコピペしてブラウザに貼りつけたところ、bbb.phpの内容が表示されますので、問題は無さそうです。

動きをトレースしてみますと、スクリプトを通った後に、
window.onunload = function(){};
を通っていますが、これを外しても同じでした。

しかし、条件を変えた後のaaa.phpの処理結果が出てくるので不思議なのです。
他の呼び出し方とか調べ方でも結構ですので、ヒントを頂けると幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

どう思う？

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

なんかいろいろ微妙ですが、location.hrefを書き換えるのだから


サブミットをキャンセルしないとまずくない？

<script>
function set_Param(f) {
var excel = f.elements["ex"].checked;
var call_pgm = excel?"./bbb.php":"./aaa.php";
var buf = "";
buf +=call_pgm;
buf +="?tkcd=" + f.elements["tkcd"].value;
buf +="&tksc=" + f.elements["tksc"].value;
buf +="&ex=" + (excel?1:0);
location.href = buf;
return false;
}
</script>
<form onsubmit="return set_Param(this)">
得意先コード：<input type='text' name='tkcd'>　－　<input type='text' name='tksc'><br>
<input type="checkbox" id="ex" value="1">EXCELに出力</br>
<input type="submit" value="この条件で伝票を検索">
</form>

ただし、テキストボックスで入力した値を直接urlに埋め込むのは
ちょっといただけないですけどね・・・
この流れならformのactionを書き換えるほうがよいかも
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejpさん　コメント有難うございました。
おかげさまで解決しました。
summitをキャンセルというのは、return falseで返さないといけないということですね？
基本的なことを理解していないまま、サンプルを見よう見まねで作っているのでこういうことになるんでしょうね。
ifやSwitchを使わずに、
buf +="&ex=" + (excel?1:0);
というような書き方もあるということも初めて知りました。
Javascriptは取っ付きやすそうですが難しい言語ですね。

通報する
お礼日時：2015/05/15 13:45

No.4

  • 回答者： fujillin
  • 回答日時：

ANo2です。




ご質問とは直接関係がないことなので、いらぬおせっかいというものですが・・・

＞という意味なのですね。そんなことも知らずに使って
＞いたのがお恥ずかしいです。
サブミットのキャンセルを忘れていたのでなくご存じなかったとすると、ご質問文中では省略されていますが、「（エラーチェック部分は略）」となっている処理でエラーが発生した時にもサブミットをキャンセルする必要があります。
（キャンセルしないと、そのままサブミットされてしまいます。）

さらに蛇足ですが、javascriptでの入力データチェックは完全ではありませんので、受信側（この場合はphp側）でもデータの整合性をチェックしておいた方が安全と言えます。
　http://q.hatena.ne.jp/1165754185
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難うございました。
エラーチェックではfalseを返しています。

>さらに蛇足ですが、javascriptでの入力データチェックは完全ではありませんので、

そうでしたか。ちょっとずつ実装していきます。Webプログラミングの知識が無く見よう見まねでやっているので、知らないことばかりです。

通報する
お礼日時：2015/05/15 17:50

参考程度に

No.3

  • 回答者： yambejp
  • 回答日時：

ちなみにactionを書き換えるならこう



<script>
function change_action(f) {
var excel = f.elements["ex"].checked;
f.action = excel?"./bbb.php":"./aaa.php";
}
</script>
<form method="get" action="#" onsubmit="change_action(this)">
得意先コード：<input type='text' name='tkcd'>　－　<input type='text' name='tksc'><br>
<input type="checkbox" id="ex" value="1">EXCELに出力</br>
<input type="submit" value="この条件で伝票を検索">
</form>

ただactionを書き換えるとユーザー環境によってはあまりよい結果にならない可能性もあるので
javascriptで分岐するのではなく、飛び先は一意（aaa.phpのみ）にして、パラメータをみて
挙動をかえるのが賢明だとおもいますよ
    • good
    • 0
    • 件
通報する
この回答へのお礼

有難うございました。
phpにパラメタを与えようと思ったのですが、画面に表示する内容をCSVに抽出するものであるため、ヘッダを替えたり、出力内容が変わったりしてソースが見にくくなってしまうので、別々のソースにしました。

通報する
お礼日時：2015/05/15 17:42

No.2

  • 回答者： fujillin
  • 回答日時：

ブラウザの挙動をちゃんと確認してはいませんが…




formのsubmitイベントとして処理をなさっていますよね？
その場合、スクリプトのイベント処理が終わったら、通常、ブラウザはサブミットの処理を続けます。

想像するところ、入力時の画面はaaa.phpから出力されているのではないでしょうか？
ご提示のformのactionは#となっていますが、その場合はサブミットされると現在のURLへGETで送信します。
この結果、ご質問のような事象になっているものと推測します。


なさりたいことは、exのチェックの有無によって送信先をaaa.phpとbbb.phpに変えたいのだと思いますが、対処方法としては以下の方法が考えられます。
1）送信先は常に同じにしておいて、php側でexのチェックを判定し処理を分ける
　 (phpの内容を修正することになります)
2）スクリプトではformのaction属性を書き換えるのみにし、ブラウザにサブミットさせる。
3）スクリプトでクエリ部も作成しlocation.hrefで遷移させる。
　 この場合には、ブラウザのサブミットをキャンセルする必要があります。
　 （エラーチェックでエラーがあった時にキャンセルしていると想像しますが…）

質問者様が期待なさっている動作は上記の3）だと想像しますが、ブラウザ側のサブミット処理をキャンセルしないと期待通りには動作しないと思います。


一方で、上記の方法で明快なのは1）かなぁ。
送信先を変えるにしても、2）の方が素直で簡単ではないでしょうか。
ご提示の処理内容だけであれば、わざわざ3）にする必要はないのでは。
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん　コメント有難うございました。

＞formのactionは#となっていますが、その場合はサブミットされると現在のURLへGETで送信

という意味なのですね。そんなことも知らずに使っていたのがお恥ずかしいです。
分岐させる処理がCSVの出力処理なので、php側で兼用するとソースが見づらくなってしまうこと、ボタンをもう一つ設けて2)でするのが本当はスマートなのでしょうが、やり方がよく判りませんので、結局、3)の方法を選択しました。
丁寧なご説明を頂きましてありがとうございました。

通報する
お礼日時：2015/05/15 13:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報