- ベストアンサー
外部JavaScriptがうまく呼び出せません
お世話になっております。 お分かりになります方いらっしゃいましたら、 ご教授願えますでしょうか？ 人材を募集する応募フォームを作っています。 応募フォームの項目にはいくつか必須項目があり、 送信ボタンを押した際、必須チェックをJavaScriptで 行いたいと思っています。 チェックする項目が多数あるので、直接htmlファイルには書き込まず、 外部jsに書き出して、htmlファイル上で呼び出す方法をとる事にしました。 htmlに直接書き込んだ際にはうまく動いたので、 JavaScriptの内容が悪いのではないと思うのですが、 送信ボタンを押しても、必須項目がチェックされず、 そのまま項目が空のメールが届いてしまいます。 以下に該当のコードを記入いたしますので、 原因がお分かりになります方、ご教授頂いてもよろしいでしょうか？ ・外部js：oncheck.js ・cgi：send.cgi 【oncheck.js】 <!-- function check(){ ・ (必須項目のチェックを行っています) ・ } //--> 【htmlファイル】 <html> <head> <title>採用情報</title> <script language=JavaScript src="oncheck.js" type=text/javascript> </script> </head> <body> <h3>応募フォーム</h3> <form method="POST" action="send.cgi" name="応募フォーム" onSubmit="return check()"> ・ ・ ・ <input type="submit" value=" 送信 "> <input type="reset" value=" 取消 "> </form> </body> </html> 呼び出し方に問題があるのでしょうか？ 宜しくお願い致します。
- nekoB
- お礼率76% (58/76)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＃２です。 まず、送信処理は全部コメントアウトしてみましょう。 不要な部分はがあっては、原因の切り分けになりません。 oncheck.js の中を alert だけにしたり、 check() の中を alert だけにしたりすれば、 ちゃんと切り分けできますよね。 それ以降も、check() から send.cgi にちゃんと値が渡っているのか、 GET にしてhttpサーバのログを見てみるとか、 send.cgi では送信せずに、まずファイルに保存してみるとか、 順を追って１段階ずつ確認して行くのが良いと思いますよ。
その他の回答 (3)
- think49
- ベストアンサー率59% (285/482)
> という事は、jsがうまく読み込まれていないのでしょうか？ 外しているかもしれませんが、 HTMLとjsファイルの文字コードが一致しないと上手く読み込んでくれないことがあります。 明示的に <script src="oncheck.js" type="text/javascript" charset="utf-8"> と文字コードを指定することも出来ます。
お礼
返信が遅くなりました。すみません。 think49さんのおっしゃっていた >HTMLとjsファイルの文字コードが一致しないと上手く読み込んでくれないことがあります。 と、z_liang_00さんがおっしゃっていた >まず、送信処理は全部コメントアウトしてみましょう。 を試してみました。 もともとShift-JISを使っていたので指定し、 全部コメントアウトをした後、アラートのみをつけてみたところ、 アラートが発生しました。 その後、jsを細かくコメントアウトをしていったところ、 IF文で区切られているうち、数字か文字かをチェックする項目が あるのですが、そこでうまくチェックがされておらず、 そのままメールが送信されている事が判明しました。 ちなみにこのように記述していました。 function check(){ if(document.応募フォーム.氏名.value == ""){ //「氏名」の入力をチェック window.alert('必須項目[氏名]が未入力です'); // 必須項目未入力ダイアログ return false; // 送信を中止 } else if(document.応募フォーム.電話番号.value.match(/[^0-9]+/){ // 「電話番号」の入力をチェック window.alert('必須項目[電話番号]には数字以外が入力されています。'); // 必須項目未入力ダイアログ return false; // 送信を中止 } } 電話番号の数字チェックで落ちているようなので、 原因を自分なりに探ってみようと思います。 分からないようでしたら、また別のスレッドをたてて質問したいと思います。 みなさんのおかげで原因がわかりました！大変助かりました！ ありがとうございました。
補足
数字チェックの原因を探ったところ、 ()の")"が不足していました。 うっかりつけ忘れミスでした・・・。 大変お騒がせ致しました。 ご協力ありがとうございました！
- z_liang_00
- ベストアンサー率42% (45/107)
不具合の可能性は３点あると思います。 (1) oncheck.js が読み込まれていない (2) check() がおかしい (3) HTML または cgi がおかしい まず、この２つを切り分けることが必要と思います。 (1)の確認には、 oncheck.js の最後に alert("読み込み完了"); などを入れて実行してみては如何でしょうか。 これで alert が出れば読み込みは成功しているので、 原因は (1) ではないとわかります。 次に、(2) の中に alert を入れて実行し、表示されれば、 (3) が原因とわかります。 一気に実行せず、どこまでができているのか、 少しずつ確認しながら進めるのが良いのではないでしょうか。
お礼
ご回答ありがとうございます。 ご指摘頂いたとおり順番に試してみました。 すると、(1)の時点で alert("読み込み完了"); は読み込まれず、そのまま送信されていました。 念のため(2)もやってみましたが、やはりそのまま送信されてしまいました。 という事は、jsがうまく読み込まれていないのでしょうか？ 読み込まれていないとすれば <script language=JavaScript src="oncheck.js" type=text/javascript> に原因があるのでしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
とりあえず、ありそうなところを2点。 1）まず、oncheck.jsとhtmlファイルの位置関係が正しいかどうかチェックして ください。（ご提示のソースだと、同じディレクトリにあるはず） 2）oncheck.js内のコメントタグ（最初の「<!--」と最後の「//-->」）は不要 です。 はずした上で再度試してみてください。
お礼
ご回答ありがとうございます！ 1)についてですが、jsとhtmlは同じディレクトリにあります。 2)についてですが、jsファイルのコメントタグをはずして、 再度試してみたのですが、やはりチェックされずに送信されてしまいました。 うーむ・・・何が原因なのでしょうか・・・。
お礼
返信が遅くなりました。すみません。 think49さんのおっしゃっていた >HTMLとjsファイルの文字コードが一致しないと上手く読み込んでくれないことがあります。 と、z_liang_00さんがおっしゃっていた >まず、送信処理は全部コメントアウトしてみましょう。 を試してみました。 もともとShift-JISを使っていたので指定し、 全部コメントアウトをした後、アラートのみをつけてみたところ、 アラートが発生しました。 その後、jsを細かくコメントアウトをしていったところ、 IF文で区切られているうち、数字か文字かをチェックする項目が あるのですが、そこでうまくチェックがされておらず、 そのままメールが送信されている事が判明しました。 ちなみにこのように記述していました。 function check(){ if(document.応募フォーム.氏名.value == ""){ //「氏名」の入力をチェック window.alert('必須項目[氏名]が未入力です'); // 必須項目未入力ダイアログ return false; // 送信を中止 } else if(document.応募フォーム.電話番号.value.match(/[^0-9]+/){ // 「電話番号」の入力をチェック window.alert('必須項目[電話番号]には数字以外が入力されています。'); // 必須項目未入力ダイアログ return false; // 送信を中止 } } 電話番号の数字チェックで落ちているようなので、 原因を自分なりに探ってみようと思います。 分からないようでしたら、また別のスレッドをたてて質問したいと思います。 みなさんのおかげで原因がわかりました！大変助かりました！ ありがとうございました。
補足
数字チェックの原因を探ったところ、 ()の")"が不足していました。 うっかりつけ忘れミスでした・・・。 大変お騒がせ致しました。 ご協力ありがとうございました！