• 締切済み

入力チェックの外部スクリプトについて

どなたか、お分かりになる方がおりましたらご指導お願いいたします。 フォームの入力チェックのjavascriptを外部ファイルにしたいのですが外部ファイルにすると動かなく なります。htmlファイル内部に記入すると動きます。以下のようにしています。 jabascriptは フォルダjsに入っています。 function formcheck(){ if(document.otoiawase.kenmei.value==""){ alert ("お問い合わせ件名を入力してください。"); return false; } if(document.otoiawase.email.value==""){ alert ("emailを入力してください。"); return false; } if(document.otoiawase.honbun.value==""){ alert ("本文を入力してください。"); return false; } } html文は以下の用になっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="content-language" content="ja" /> <meta http-equiv="robots" content="index" /> <meta name="kywords" contents="" /> <script type="text/javascript" src="../js/check_otoiawase.js"> </script> <title></title> </head> <body> <form action="****.php" method="post" name="otoiawase" onsubmit="return formcheck()"> <table> <tr> <td> <label>件名:</label> </td> <td> <input type="text" size="40" name="kenmei" /> </td> </tr> <tr> <td> <label>Email:</label> </td> <td> <input type="text" size="40" name="email" /> </td> </tr> <tr> <td colspan="2"> <textarea cols="40" rows="10" name="honbun"></textarea> </td> </tr> <tr> <td colspan="2"> <input type="submit" name="sousin" value="送信" /> </td> </tr> </table> </form> </body> </html> htmlファイルから見ますと、javascript文は一つ上の階層にある別のフォルダに入っていますので ../js/check_otoiawase.jsとしています。 よろしくご指導お願いいたします。

みんなの回答

  • ralf124c
  • ベストアンサー率52% (232/446)
回答No.3

ブラウザからそのJSファイルにアクセスできるかどうかを確認してください。 そのパスが、HTML内に記述されているパスと一致するかどうかをチェックしてください。 異常なら、パス名、ファイル名(とくに全角とか半角とかピリオドとコンマ、そしてスペースとかの特殊文字)などを再確認。 正常なら、GoogleChromeなどのブラウザから、「ツール」の「JavaScriptコンソール」を動作させながら、くだんのHTMLにアクセスしてエラーメッセージを確認してください。

  • yamada_g
  • ベストアンサー率68% (258/374)
回答No.2

まずは、jsファイルが確実に読み込めているのかを確認してはいかがでしょうか。 jsファイルの1行目に alert('load'); とでも書いて、ページ表示時に実行されるか試してみては。

  • ralf124c
  • ベストアンサー率52% (232/446)
回答No.1

おかしな点は無いようですが、その「js」っていうのはちゃんと「DocumentRoot」以下(Webから閲覧可能な場所)に入っているんでしょうね?

arerenandaro
質問者

お礼

ありがとうございます。 jsファイルはhtmlファイルが入っているフォルダと同じ階層にjsというフォルダを作り その中にjsファイルが入っております。

関連するQ&A

  • 【緊急】リアルタイムでエラーチェック

    下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。 このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>exValidationサンプル 2</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="skin/selectable/style.css" /> <link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.js"></script> <script type="text/javascript" src="js/exvalidation.js"></script> <script type="text/javascript" src="js/exchecker-ja.js"></script> <script type="text/javascript"> $(function(){ $("form") .exValidation({ rules: { name: "required", kana: "required katakana", email: "required email hankaku group", pass: "required min6 max12", repass: "required retype-pass", radio: "radio", checkbox: "checkbox" }, errInsertPos: 'after', errPosition: 'fixed' }); }); </script> </head> <body> <div class="pagebody"> <h1>exValidation</h1> <form> <fieldset> <p class="attention">*は必須項目です</p> <table> <tbody> <tr> <th>Name<span>*</span></th> <td><input type="text" id="name" name="name" value="" /></td> </tr> <tr> <th>Kana<span>*</span></th> <td><input type="text" id="kana" name="kana" value="" /></td> </tr> <tr> <th>Mail<span>*</span></th> <td><span id="email"><input type="text" id="email" name="email" value="" /> @ <input type="text" name="email2" value="" /></span></td> </tr> <tr> <th>Password<span>*</span></th> <td><input type="password" id="pass" name="pass" value="" /></td> </tr> <tr> <th>Retype-Password<span>*</span></th> <td><input type="password" id="repass" name="repass" value="" /></td> </tr> <tr> <th>Sex<span>*</span></th> <td> <span id="radio"> <label for="male"><input type="radio" id="male" name="sex" value="male" />male</label> <label for="female"><input type="radio" id="female" name="sex" value="female" />female</label> </span> </td> </tr> <tr> <th>Prefecture<span>*</span><br /> this is selectable</th> <td> <select id="pref" name="pref" class="selectable"> <optgroup label="---"> <option value="">---</option> </optgroup> <optgroup label="北海道"> <option value="01">北海道</option> </optgroup> <optgroup label="東北"> </optgroup> </select> </td> </tr> <tr> <th>City</th> <td><input type="text" name="city" value="" /></td> </tr> <tr> <th>Street</th> <td><input type="text" name="street" value="" /></td> </tr> <tr> <th>Favorite<span>*</span></th> <td> <span id="checkbox"> <label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label> <label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label> <label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label> <label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label> <label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label> </span> </td> </tr> </tbody> </table> </fieldset> <p class="submit"><input type="submit" value="Submit" class="button" /></p> </form> </div> </body> </html>

  • if の入れ子で期待した結果が得られません

    初心者です教えて下さい。 if の中の if が null なのに not null になってしまいます なぜでしょうか? よろしくお願いします。 http://psychesine.my-sv.net/phpTest.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> </head> <body> <form method="post" action="phpTest.php"> <p> Email<input type="radio" name="type" value="email"> UserName<input type="radio" name="type" value="userName"> </p> <table> <table> <tr><td>Email</td><td><input type="text" name="email" value="<?php print(htmlspecialchars($_POST['email'])); ?>" /></td></tr> <tr><td>UserName</td><td><input type="text" name="userName" value="<?php print(htmlspecialchars($_POST['userName'])); ?>" /></td></tr> </table> <input type="submit" value="検索" /> </form> <?php if ( 0 == strcmp( $_POST['type'], 'email' ) ) { if ( is_null($_POST['email']) ) { echo 'email is null'; } else { echo 'email is not null'; } } if ( 0 == strcmp( $_POST['type'], 'userName' ) ) { if ( is_null($_POST['userName']) ) { echo 'userName is null'; } else { echo 'userName is not null'; } } ?> </body> </html>

    • ベストアンサー
    • PHP
  • phpのフォーム入力で

    phpの勉強初日なのですが、さっそくつまづいてしまいました。 買った本に沿って、簡単なフォーム入力のhtmlファイルと、 その処理のphpファイルを下記のように作ってみたのですが、上手く行きません。 htmlのフォームからのpostは出来ているようなのですが、 phpファイルがコールされると、phpファイルのソースがそのまま表示されてしまって、 postした文字列がechoされません。。。 初日でつまづいてしまっていきなり挫折しそうです。。。 どなたかお詳しい方、お教えいただけると幸いです。 ■input.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>input</title> </head> <body> <form action="inputphp.php" method="post"> <label for="my_name">お名前:</label> <input id="my_name" type="text" name="my_name" size="15" maxlengh="255" value=""/> <input type="submit" value="送信"/> </form> </body> </html> ■inputphp.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>inputphp.php</title> </head> <body> <?php print($_REQUEST['my_name']); ?> </body> </html>

    • ベストアンサー
    • PHP
  • phpの入力値の渡し方

    ループでテキストボックス、セレクトボックスを作成しそれぞれのコントロールに入力した値を別phpファイルに渡すことを考えています。 ループではなく一個一個テキストボックスを作れば個々のname属性をpostすればいいと思うのですがループの場合、それぞれの入力値をどのように渡せばいいかわかりません。 <test.php> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <meta name="viewport" content="width=device-width"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>勤怠データ入力</title> </head> <script type="text/javascript"> function myEnter(){ myRet = confirm("入力画面を閉じてよろしいですか?"); } </script> <body> <div id="name"> <table> <tr style="text-align:center; background-color:#DDEBF7;"> </tr> <form name = "Data" action="foo.php" method="POST"> <tr style="text-align:center;"> </tr> </table> </div> <div id="button"> <input type="submit" name ="touroku" value="登録更新" style="margin-right:30px;" /> <input type="submit" value="戻る" onclick="myEnter()" /> </div> <div id="calendar"> <table style="text-align:center;"> <tr style="text-align:center; background-color:#DDEBF7;"> <td style="width:20px;">日</td> <td>開始時間</td> <td>終了時間</td> <td>入力1</td> <td>入力2</td> <td>入力3</td> </tr> <tr><!--1日--> <?php $day = 1; while ($day < 32){ ?> <td><input type="text" readonly value="<?php echo $day ?>" style="width:20px;"</td> <td><select name="start_time" > <option value="0" > 0</option> <option value="1" > 1</option> </select> : <select name="start_minute"> <option value="00" >00</option> <option value="30" >30</option> </select> </td> <td><select name="end_time" > <option value="0" >0</option> <option value="1" >1</option> </select> :<select name="end_minute"> <option value="00" >00</option> <option value="30" >30</option> </select> </td> <td><input type="text" name = "nyuryoku1" value="" style=width:150px></td> <td><input type="text" name = "nyuryoku2" value="" style=width:150px></td> <td><input type="text" name = "nyuryoku3" value="" style=width:150px></td> </td> </tr> <?php $day++; } ?> </form> </body> </html> <foo.php> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php $s_hour = ($_POST['start_time']); $s_minutes = ($_POST['start_minute']); $e_hour = ($_POST['end_time']); $e_minutes = ($_POST['end_minute']); $data1 = ($_POST['nyuryoku1']); $data2 = ($_POST['nyuryoku2']); $data3 = ($_POST['nyuryoku3']); $s_time = ($s_hour.$s_minutes); $e_time = ($e_hour.$e_minutes); echo '開始時間'; echo $s_time; echo '終了時間'; echo $e_time; echo '入力1'; echo $data1; echo '入力2'; echo $data2; echo '入力3'; echo $data3; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> テスト実行 </body> </html>

    • ベストアンサー
    • PHP
  • フォームのチェックボックスの入力チェック JavaScriptの添削依

    フォームのチェックボックスの入力チェック JavaScriptの添削依頼 フォーム制作しています。 複数選択可能なチェックボックスの入力チェックを行いたいのですが、 動かず困っています。 JavaScriptの添削をお願いします。 他のチェック項目との兼ね合いもあり、 JavaScriptはform.jsに記載したいこと、 チェックボックスが未選択の場合は、flag に 1 を入れること、 チェックボックスの数が多いため、それぞれ違う name を振る方法は避けたいこと、 が制作の条件になっています。 ■index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <html> <head> <!-- *** javascript *** --> <script src="form.js" type="text/javascript" charset="utf-8"></script> </head> <body bgcolor="#ffffff"> フォームの入力で未入力のチェックを行います。 <form method="post" onSubmit="return chkform()" name="form1"> <input type="checkbox" name="chk[]" value="OK">OK <input type="checkbox" name="chk[]" value="NG">NG <input type="checkbox" name="chk[]" value="GOOD">GOOD <br> <br> <input type=submit value=" 送信 "> <input type=reset value=" 取消 "> </form> </body> </html> ■form.js function chkform() { var flag = 1; var list=document.getElementsByName(chk); for(var i=0;i<list.length;i++){ if(list[i].checked){ flag = 0; break; } } if(flag == 1){ window.alert('チェックボックスが未選択です'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else { return true ; } }

  • 記入内容のチェックについて

    javascriptの初心者です。どうぞよろしくお願いいたします。 下記のような内容で「商号」が空欄の場合「確認」ボタンを押すとアラートがかえってきて欲しいのですがうまくいきません。原因が分かる方いらっしゃいますか? <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <Script Language="JavaScript" src="common.js"></Script> <Script Language="JavaScript"> <!-- function kakunin_click(){ //入力チェック if(document.OnForm.syogo.value == ""){ //必須入力 alert("商号に入力がありません。"); document.OnForm.syogo.focus(); return false; } document.OnForm.submit(); return true; } //--> </Script> <title>契約</title></head> <body>  <form name="OnForm" method=post action="***.cgi"> <center> <TABLE border="0" cellspacing="1"> <tr> <TD>商号</TD> <TD><INPUT type="text" size="42" name="syogo"></TD> </tr> </TABLE> </center> <div align="center"> <center> <table border="0"> <tr> <td width="100%"> <input onclick="kakunin_click()" type="submit" value="確認"><input type="reset" value="やり直し"></td> </tr> </table> </center> </div> </form> </body> </html>

  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • 下記のタグの中で必要ないのはありますか?

    (1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • ラジオボタンとテキストボックスで、ボタン選択時のテキストボックスの入力チェックするにはどうしたらよいでしょうか?

    ラジオボタンとテキストボックスの組合わせで使用し、ラジオボタン選択時のテキストボックスの入力チェックをするにはどうしたらよいのでしょうか? 以下はそのhtmlソースになります。 <table border="0" cellspacing="2" cellpadding="0"> <tr> <td><input type="radio" name="addsearch" value="検索エンジン" id="p1"></td> <td colspan="2"><label for="p1"><span class="stress2">検索エンジン</span></label></td> </tr> <tr> <td></td> <td>検索エンジン名</td> <td><INPUT TYPE=text NAME="addsearch1" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="ご紹介で" id="p2"></td> <td colspan="2"><label for="p2"><span class="stress2">ご紹介で</span></label></td> </tr> <tr> <td></td> <td>ご紹介者のお名前をおしえてください。</td> <td><INPUT TYPE=text NAME="addsearch2" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="広告を見て" id="p3"></td> <td colspan="2"><label for="p3"><span class="stress2">広告を見て</span></label></td> </tr> <tr> <td></td> <td>どこの広告ですか?</td> <td><INPUT TYPE=text NAME="addsearch3" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="その他" id="p4"></td> <td colspan="2"><label for="p4"><span class="stress2">その他</span></label></td> </tr> <tr> <td></td> <td>具体的にお願いします。</td> <td><INPUT TYPE=text NAME="addsearch4" VALUE="" SIZE=40></td> </tr> </table> よろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • 外部ファイルを読み込めない

    初めまして。いつも質問やその回答を読ませていただいて、参考にさせていただいてます。 javascriptで作った超簡単なプログラムが動かないんです。 どなたか、助けてください。(>_<) 以下、test.htmlとtest.jsを作って、試して見ているのですが、動かない理由が分からず苦しんでいます。 =============test.html============= <html> <head> <script type="text/javascript" language="javascript" src="./test.js" ></script> </head> <body> <table> <form name="form2" method="post" onSubmit="return check()"> <tr><td><input type="text" name="names" size="50"></td></tr> <tr><td><input type="submit" name="submit" value="予約"></td></tr> </form> </table> </body> </html> =============test.html============= =============test.js============= function check(){ names=document.form2.names; if(names.value == ""){ alert("お名前を入力してください。"); names.focus(); return false; } else return true; } =============test.js============= どちらも、同じディレクトリに入れています。safari、ieでも×です。 どなたか、教えていただけませんでしょうか。