
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の処理結果が出てくるので不思議なのです。
他の呼び出し方とか調べ方でも結構ですので、ヒントを頂けると幸いです。
No.1ベストアンサー
- 回答日時:
なんかいろいろ微妙ですが、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を書き換えるほうがよいかも
yambejpさん コメント有難うございました。
おかげさまで解決しました。
summitをキャンセルというのは、return falseで返さないといけないということですね?
基本的なことを理解していないまま、サンプルを見よう見まねで作っているのでこういうことになるんでしょうね。
ifやSwitchを使わずに、
buf +="&ex=" + (excel?1:0);
というような書き方もあるということも初めて知りました。
Javascriptは取っ付きやすそうですが難しい言語ですね。
No.4
- 回答日時:
ANo2です。
ご質問とは直接関係がないことなので、いらぬおせっかいというものですが・・・
>という意味なのですね。そんなことも知らずに使って
>いたのがお恥ずかしいです。
サブミットのキャンセルを忘れていたのでなくご存じなかったとすると、ご質問文中では省略されていますが、「(エラーチェック部分は略)」となっている処理でエラーが発生した時にもサブミットをキャンセルする必要があります。
(キャンセルしないと、そのままサブミットされてしまいます。)
さらに蛇足ですが、javascriptでの入力データチェックは完全ではありませんので、受信側(この場合はphp側)でもデータの整合性をチェックしておいた方が安全と言えます。
http://q.hatena.ne.jp/1165754185
有難うございました。
エラーチェックではfalseを返しています。
>さらに蛇足ですが、javascriptでの入力データチェックは完全ではありませんので、
そうでしたか。ちょっとずつ実装していきます。Webプログラミングの知識が無く見よう見まねでやっているので、知らないことばかりです。
No.3
- 回答日時:
ちなみに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のみ)にして、パラメータをみて
挙動をかえるのが賢明だとおもいますよ
有難うございました。
phpにパラメタを与えようと思ったのですが、画面に表示する内容をCSVに抽出するものであるため、ヘッダを替えたり、出力内容が変わったりしてソースが見にくくなってしまうので、別々のソースにしました。
No.2
- 回答日時:
ブラウザの挙動をちゃんと確認してはいませんが…
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)にする必要はないのでは。
fujillinさん コメント有難うございました。
>formのactionは#となっていますが、その場合はサブミットされると現在のURLへGETで送信
という意味なのですね。そんなことも知らずに使っていたのがお恥ずかしいです。
分岐させる処理がCSVの出力処理なので、php側で兼用するとソースが見づらくなってしまうこと、ボタンをもう一つ設けて2)でするのが本当はスマートなのでしょうが、やり方がよく判りませんので、結局、3)の方法を選択しました。
丁寧なご説明を頂きましてありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Java scriptのonchangeについて 続
-
Javascript IEで「識別子があり...
-
iframe内のformをサブミットす...
-
「戻る」ボタンを画像でするには?
-
JSでactionを指定すると、IEfor...
-
Cookieに保存されない
-
名無しformの操作
-
javascriptで取得した値をテキ...
-
一定間隔ごとに、フォームにデ...
-
同意チェックボックスはひとつ...
-
Javascriptでlocation.hrefが妙...
-
formのsubmitイベントの発生に...
-
radiobuttonとbuttonを組み合わ...
-
input type="image"の時、enter...
-
document.form.actionでの処理
-
フォームのvalueに配列を格納す...
-
FormのonsubmitでJavaスクリプ...
-
chromeでフォームの値が取得で...
-
Google reCAPTCHAについて
-
JavaScriptでパスワード設定し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitした値を返したい
-
iframe内のformをサブミットす...
-
ページを再読み込み後、再読み...
-
別ウィンドウへのsubmitの挙動...
-
javascriptでASPにデータを渡す
-
JavaScript:現在フォーカスの...
-
javascriptで .jpg , .jpeg , ....
-
formのsubmitイベントの発生に...
-
submitボタンを表示することな...
-
別窓ウィンドウから親ウィンド...
-
ENTERキーを無効にしたいのです...
-
POST時に要素を削除してからPOST
-
ファイル選択と同時にアップロ...
-
FormのonsubmitでJavaスクリプ...
-
迅速なご回答ありがとうござい...
-
focus()が上手くいかない
-
Chromeで複数submit
-
複数のフォームを一括で自動送...
-
Chromeの document.getElementB...
-
1つのページにformを2つ設置。2...
おすすめ情報