外部ファイルを読み込んで表示
- 外部ファイルを読み込んで表示する方法について解説します。
- JavaScriptを使用して外部ファイル（CheckUtil.js）を読み込み、特定の要素に表示させる方法を紹介します。
- フォームの入力データの必須入力チェックを行い、エラーメッセージを表示する関数を提供します。
- ベストアンサー
外部ファイルを読み込んで表示
これが外部ファイル（CheckUtil.js）です。 //入力データ(テキストデータやテキストエリア)の必須チェック function requiredCheck(strVal,strErr) { if(strVal=="" || strVal==undefined){ return strErr + "は必須入力です \r"; }else{ return ""; } } これを読み込んで表示させたいです。 <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=sjis"> <TITLE>ファイル操作</TITLE> <!-- {literal} --> <script language="JavaScript" src="CheckUtil.js"></script> <script language="JavaScript"> </HEAD> <BODY> <!-- function chk(part){ strErr = ""; strErr+ = requiredCheck(part.value,"なまえ"); if(strErr == ""){ return true; }else{ window.alert(strErr); return false; } } //--> </script> <!-- {/literal} --> <BR> <FORM ACTION="<?php echo $PHP_SELF; ?>" METHOD="POST" name="fm" onsubmit="return chk()> <INPUT TYPE="text" NAME="name" SIZE="40"><BR> <INPUT TYPE="text" NAME="comment" SIZE="40"><BR><BR> <INPUT TYPE="submit" NAME="submit" VALUE="ボタン" onsubmit="return chk()"><BR> </FORM> <BR><BR> </CENTER> </BODY> </HTML>
- melon3q
- お礼率35% (10/28)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <meta http-equiv="Content-type" content="text/html; charset=sjis"> <title>ファイル操作</title> <!-- {literal} --> <script language="JavaScript" src="CheckUtil.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> <!-- function chk(part){ strErr = ""; strErr += requiredCheck(part.name.value,"なまえ"); strErr += requiredCheck(part.comment.value,"コメント"); if(strErr == ""){ return true; }else{ window.alert(strErr); return false; } } //--> </script> </head> <body> <!-- {/literal} --> <br> <form action="<?php echo $PHP_SELF; ?>" method="POST" name="fm" onsubmit="return chk(this)"> <input type="text" name="name" size="40"> <br> <input type="text" name="comment" size="40"> <br> <br> <input type="submit" name="submit" value="ボタン"> <br> </form> <br> <br> <center></center> </body> </html>
関連するQ&A
- 外部テファイルを使って未入力に対しての背景色を変える
これが外部ファイル（CheckUtil.js）です。 //入力データ(テキストデータやテキストエリア)の必須チェック function requiredCheck(strVal,strErr) { var total = strVal.length; var flag = true; for (var i=0; i<total; i++) { if((strVal.type == 'text')||(strVal.type == 'password')){ strVal.style.backgroundColor = ''; if (strVal.value == "") { strVal.className = 'error_field'; flag = false; } if (strVal.value) { strVal.className = ''; } } } if (! flag)return strErr + "は必須入力です \r"; }else{ return ""; } } このファイルはPHPファイルです。外部ファイルで分けないでやったときは動いたのでそのままにしています。 <script language="JavaScript" src="CheckUtil.js" type="text/javascript" charset="EUC-JP"></script> <style //背景色は#FF8080に設定 type="text/css"><!--.error_field{background-color:#FF8080;}--></style> <script type="text/javascript"> <!-- function chk(part){ strErr = ""; strErr += requiredCheck(part.name.value,"なまえ"); strErr += requiredCheck(part.pass.value,"パス"); if(strErr == ""){ return true; }else{ window.alert(strErr); return false; } } //--> </script> </head> <body> <!-- {/literal} --> <br> <form action="<?php echo $PHP_SELF; ?>" method="POST" name="fm" onsubmit="return chk(this)"> <input type="text" name="name" size="40"> <br> <input type="password" name="pass" size="40"> <br> <br> <input type="submit" name="submit" value="ボタン"> <br> </form> <br> <br> <center></center>
- ベストアンサー
- JavaScript
- 外部ファイルを読み込めない
初めまして。いつも質問やその回答を読ませていただいて、参考にさせていただいてます。 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でも×です。 どなたか、教えていただけませんでしょうか。
- ベストアンサー
- JavaScript
- functionの値を別のfunction へ
set_hidukeで取得した「true」を hiduke_chkにもっていく方法を教えていただけないでしょうか。 <SCRIPT language=JavaScript> function set_hiduke(){ var hiduke_input = true } function hiduke_chk(){ if(hiduke_input==true) alert("日付をいじった？") } </SCRIPT> <FORM NAME=main ACTION="★" METHOD="POST" onSubmit="return hiduke_chk()"> <INPUT TYPE="TEXT" NAME="年月日" SIZE="12" onBlur="set_hiduke();"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="送信"></form>
- ベストアンサー
- JavaScript
- javascript フォームについて
javascriptでフォームを作ったのですが、複数フォームの空白をチェックするにはどのようなプログラムにすればよろしいでしょうか？ onsubmit="return chk1(this)でフォーム送信が押されたときにチェックを行おうと考えているのですが そのときのchk()の中身やif文の条件がわからないのです。 どのようにすれば上手くいくでしょうか？ 回答よろしくお願いします。 ソースは以下のとおりです。 <script language="javascript"> function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } function chk1(frm){ if(frm.elements["txt1"].value==""){ alert("解答欄に空白があります"); /* FALSEを返してフォームは送信しない */ return false; }else{ /* TRUEを返してフォーム送信 */ return true; } } </script> <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()" onsubmit="return chk1(this)">
- ベストアンサー
- JavaScript
- ＪＡＶＡＳＣＲＩＰＴでＩＮＰＵＴ
ＨＴＭＬとＪＡＶＡＳＣＲＩＰＴとＪＳＰを使ってシステム構築をしております。 --------------- <html> <head> <SCRIPT Language="JavaScript"> <!-- function send() { alert("<input type=text name=name2>"); } // --> </SCRIPT> </head> <body> <form onSubmit="send(); return false;"> <input type=text name=name1> <input type=submit> </form> </body> </html> --------------- 上記のコードでやりたいことは、 submitボタンが押されたときにJAVASCRIPTを呼び出し JAVASCRIPT上で文字を入力し次画面へ送信するような機能を作りたいと思っているのですが、本を見てもなかなか載っていません。 もしかしたらJAVASCRIPTだけではできないかもしれません。 ＪＳＰまたはＰＨＰで出来る機能でも良いので教えてください。
- ベストアンサー
- JavaScript
- 入力チェックの外部スクリプトについて
どなたか、お分かりになる方がおりましたらご指導お願いいたします。 フォームの入力チェックの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としています。 よろしくご指導お願いいたします。
- 締切済み
- JavaScript
- フォームのチェックボックスの入力チェック 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
- 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか？
お世話になります。 フォーム内に配置した、１から５までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.jsファイルを選択することは出来ないでしょうか？ 外部ファイルには、UsualSet.js、EmergencySet.js、PauseSet.jsなどがあって、そのスクリプトファイルの中身は document.write("<input name=\"youbi\" type=\"hidden\" value=\"土曜\"><input name=\"codenumber\" type=\"hidden\" value=\"732\"><input name=\"busho\" type=\"hidden\" value=\"経理\">"); とかいった感じになっています。 つまり、セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの３つ全ていっぺんに変更出来るようにしたい訳です。 しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 まさか、 <FORM ACTION="pro.cgi" METHOD="POST"> <select name="kazu"> <option value="<script language="javascript" src="UsualSet.js>" selected>1</option> <option value="<script language="javascript" src="EmergencySet.js>" >2</option> <option value="<script language="javascript" src="PauseSet.js>" >3</option> <option value="<script language="javascript" src="MorningSet.js>" >4</option> <option value="<script language="javascript" src="FulleSet.js>" >5</option> </select> <input type="hidden" name="kaijou" value="22890"> <input type="hidden" name="boxnumber" value="62"> <input type="submit" name="Submit" value="送信"> </FORM> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。
- ベストアンサー
- JavaScript
- Ajaxで文字化けしてしまいます
IE6を使用しています。 UTF-8のBOMありで以下のコードを保存しています。 sample.txtに入っている「あああ」を出力すると 文字化けしてしまいます。 <script src="prototype.js" type="text/javascript"></script> を <script src="prototype.js" type="text/javascript" charset="utf-8"></script> で試しても同じ結果でした。 何が原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>prototype.jsサンプル</title> <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function readText() { var sURL = "sample.txt?cache="+(new Date()).getTime(); new Ajax.Updater("result",sURL, { method: "get" }); } // --></script> </head> <body> <h1>prototype.jsサンプル</h1> <form method="get" name="ajaxForm" onsubmit="readText();return false;"> <input type="submit" value="sample.txtを読み込み"><br> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスの値を取り出したい
こんにちは JavaScript初心者です。 過去ログを見ながらここまでやったのですが、何も表示されません。 ？マークの所で引っかかっていると思うのですがどなたかご教授願います。 やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが．．． ３つチェックされていてＯＫをクリックした時に、ABC と出てくるのが理想です。 <html> <SCRIPT LANGUAGE="JavaScript"> <!-- function chkform() { for(i=1; i<=3; i++) { chkdata(i) = document.form0.chk(i).Value ？ var aa = chkdata(i) document.write(aa) } } //--></SCRIPT> <FORM onSubmit="return chkform(this)" name = "form0"> <INPUT type="checkbox" name="chk" value="A" > <INPUT type="checkbox" name="chk" value="B" > <INPUT type="checkbox" name="chk" value="C" > <INPUT type="submit" value="ＯＫ" > </form> </html>
- ベストアンサー
- JavaScript
お礼
有難うございます。 明日、やってみます
補足
スクリプトできました。 でも、文字化けしています。 「なまえハツノイクイオウア」という感じでjsファイルのほうが文字化けしています。 ファイルはPHPファイルでやっています。