カレンダー付き日付入力プログラムの組み込みでエラーが発生する

前へ 次へ
このQ&Aのポイント
  • カレンダー付き日付入力プログラムをメールフォームに組み込む際にエラーが発生しています。
  • 提供されたプログラムを正しく配置し、スクリプトを追加しましたが、カレンダーが表示されずエラーが出ています。
  • 他のJavaScriptは正常に動作していますが、このプログラムだけがエラーとなっています。どなたか助けていただけないでしょうか。
回答を見る
  • ベストアンサー

設置したけどエラーがでます。

http://www.kanaya440.com/contents/js/calendar/index.html このカレンダー付き日付入力プログラムを メールフォームに組み込みたいのですが どうしてもエラーが出てしまいます。 入れたいページはこれ↓です。 http://innerrich.com/postmail/arukeru_yoyaku_tesco.htm ここの「希望日」のところです。 どうしてもできないので 今のところカレンダーをポップアップ表示させるのみに至っています。 1.calendar.txtをダウンロードし（というかクリックするとテキストファイルが開くので別名で保存し、.jsの拡張子をつけます。 shift-jisで保存しました。 2.そのファイルをこのarukeru_yoyaku_tesco.htmと同じ階層に置きました。 3.<head>と</head>の間に<script src="calendar.js" language="JavaScript"></script> と書ました。 ※今ははずしてあります。 4.希望日の横の欄の位置に <input type="text" name="p1" id="p1" size="30" maxlength="10"> <input name="Calendar" type="button" value=" " style="background-image: url(calendar.gif); background-color:#ffffff; width:20px; height:20px; border:0; cursor:pointer;" onClick="wrtCalendar(event,this.form.p1,'yyyy/m/d');"> と書き込みました。 しかしカレンダーの画像をぽちとしても カレンダーは出ず 左下に「エラーです」という表示がでます。 ファイル読み込みにせず 直接head内に書き込んでみてもだめです。 他のjavascriptは動くのに （ポップアップも、その先のカレンダー表示もJavaScript） どうしてもできなくて悔しいです。 あんまり詳しくないのでプログラムをいじるのも おっかなびっくりです。 どなたかどうか教えてください。 よろしくお願いいたします。 windowsでdreamweaverを使いながら タグも直接できるところはいじったりしています。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

プロなんですね＝＞ いいえ、昔のプログラミングの経験が少しある程度の 素人です。そんなに詳しくありません。基礎知識レベルです。 あなたのページで何故エラーが出るかはわかりません。残念ながら、ご指導するスキルもありません。 カレンダー表示でカレンダーが出て日付をクリックすると 左の空欄に年月日が入る・・・という風に。 ＝＞無理です。なぜならcalendar.jsは、選んだ日付を一箇所のタグ にしか返してくれないからです。しかも非同期で返ってくるので、 いつタグの値が返されたかハンドリングできません。そこで、カレンダーから 返された値を確認してOKボタンを押し、年、月、日の欄に分解して入れる 仕組みをJAVASCRIPTで追加すれば出来ます。 まる投げのお願い質問は管理人に怒られますが、今回は特別とゆうか うまくヒントを書けないので、以下を参考にソースを研究してください。 （手順） まず、calendar.txtをダウンロードしたら中身をいじらずそのまま calendar.jsに名前を代えて自分のサイトにアップしてください。 オリジナルには<html>や<body>等のタグは無いはずです。 そしたら、<head></head>の中に <script src="./jslib/calendar.js" type="text/javascript" charset="Shift_JIS"></script> と書きます。 その後ろに、新たなJAVASCRIPTを↓のように追記します。 <script type="text/javascript"> //<![CDATA[ function DateSet(){ var setdate = document.getElementById('result').value; document.getElementById('year').value = setdate.substring(0,4); document.getElementById('month').value = Number(setdate.substring(5,7)); document.getElementById('day').value = Number(setdate.substring(8,10)); document.getElementById('result').value =""; } //]]> </script> フォームタグに以下のように名前を付けます（任意の名前でよい） <form action="./postmail.cgi" method="post" name="sendform"> 日付セット部分を以下のようにします。（日の後ろに追記します） </select> 日 　　　　 <input name="calender" type="button" value="カレンダーから" onClick="wrtCalendar(event,this.form.result,'yyyy/mm/dd');" style="width:80px;height:20px;cursor:pointer;" > 　 <input type="text" name="result" id="result" value="" size="12"> <input type="button" value="ＯＫ" onClick="DateSet()" size="2"> ※年、月、日のoption valueを全部"XX"(文字)からXX(数値)にしちゃいました。 <option value="1">1</option>　＝＝＞　<option value=1>1</option> これは、01～09までの先行0を取り除く処理を作るのが面倒だったので、さぼった訳です。（正規表現で除けるのですが...） ところで、送信先のCGIもあなたが作っているのですか？ だとしたら、YYYY/MM/DDの形の日付を受け取る様に改造するだけ ですみますよ。

その他の回答 (2)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

＜1.calendar.txtをダウンロードし（というかクリックするとテキストファイルが開くので別名で保存し、.jsの拡張子をつけます。 shift-jisで保存しました。＞ ここの手順がまちがってませんか？あなたのサイトの http://innerrich.com/postmail/arukeru_yoyaku_tesco.htm をFireBugで見ると、calendar.jsの中身に余分な物(hrmlとかbodyとか) がついているようですが、これは根本的な原因では無いです。 あなたのサイトのソースをコピペして調べてみたところ、 calendar.jsを使うときは、formとbuttonタグにname属性が無いと 動かないみたいです。適当な名前aaa,bbbをつけたら出来ました。 FireFox3.0とIE6.0で動作確認しました。 ＜変更箇所＞ ＝＝＝＝＝＝＝ <form action="./postmail.cgi" method="post" name="aaa"> ＝＝＝＝＝＝＝ <option value="30">31</option> </select> 日 　　　　 <input name="bbb" type="button" value="カレンダー表示" onClick="wrtCalendar(event,this.form._日,'d')" style=" width:100px; height:20px; cursor:pointer;" > ＝＝＝＝＝＝＝ このやり方だと、カレンダーから日の欄のセットのみです。 年月日をカレンダーから別々の欄にセットするためには、 さらに工夫する必要がありますね。

yoshino0724
質問者

補足

すごい・・・ すごい人ですね。あっさりできてしまうのですね。 （何のお仕事なんでしょう。きっとプロなんですね） やってみるけどできません・・・またエラーが出ちゃいます。 あほな子ですみません。 calendar.jsの中身のhrmlとかbodyタグは消しても大丈夫なんですか？ こわくて触れませんでした。 一番最初のフォームにも名前をつけるんですね。 こういう形にしたいのです。 http://innerrich.com/postmail/arukeru_yoyaku_tesco.htm カレンダー表示でカレンダーが出て 日付をクリックすると 左の空欄に年月日が入る・・・という風に。 何度も甘えてばっかりですみません！ どうか教えてください。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

日の横の欄 <input type="button" name="Calendar" value="カレンダー表示" onClick="wrtCalendar(event,this.form._日,'d')" style="background-image: url(calendar.gif); background-color:#ffffff; width:20px; height:20px; border:0; cursor:pointer;" >

yoshino0724
質問者

補足

ありがとうございます。 教えていただいたとおりやってみたんですがやっぱり 「ページでエラーが表示されました」と 出てしまいます・・・。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptのエラー　（ 関数の未定義）

    htmlであるボタンを押すと、そこで実行するはずの関数が未定義になる、 という不具合が出ていたのですが、 JavaScript（<script>）の記述場所を変更する事により、対処することができました。 でもまだ、理解ができずにいます。 たとえば <head> <script ・・・・外部jsファイル> </head> <body> <input type="text" name="hizuke"　・・・> <input type="button" name="newdisp"　value="表示" onclick="hyouji();"> 　・ 　・ <input type="hidden" name="syori"　value=""> 　・ 　・ 　・ </body> 　・ 　・ ※外部jsファイルでhyouji()関数記述 のようなhtmlで、今回「表示」ボタンをクリックするとエラーになり、 エラーの詳細を見ると　 　　hyouji()が未定義です となり、 JavaScriptの関数がまだ読み込まれていないから 記述を後に移動したほうがいいというアドバイスを受け、 このhtmlを <head> </head> <body> <input type="text" name="HIZUKE"　・・・> <input type="button" name="newdisp"　value="表示" onclick="hyouji();"> 　・ 　・ 　・ <input type="hidden" name="syori"　value=""> 　・ <script ・・・・外部jsファイル> </body> 　・ 　・ のように変更して、エラーをなくすことができました。 外部jsファイルのhyouji()関数の処理は 「syori」のhiddenに「hyouji」というような処理識別をセットし、 submitしています。 hyouji()関数の前にもたくさんの関数が定義されていて その中には 　　　var aaa = document.form1.xxxx.value; などの記述もたくさんあります。 <script>の記述場所を移動したことで 　　　htmlを読み込んで、 　　　「表示」ボタンを表示し、 　　　jsファイルを読み込む・・・ という処理順序になると思うのですが 表示ボタンをクリックしたときには、 jsファイルの読込みは終了しているのでしょうか？？？ ボタンをクリックした時にはjsの読込みを終了していないといけないと 思うのですが、なぜjsの記述を<inputボタン>の記述より後のほうに移動させて、 未定義関数が解決されるのかがわかりません。 エラーの内容が 　　オブジェクトが見つかりません などだと、hidden項目が後に記述されているからか・・・と理解できるのですが。 うまく伝わるか不安ですが、 ボタンクリックの前にはJavaScriptの関数が読込みが 終了していなければならないのはわかるのですが、 なぜ、ボタンの表示より、後に記述することで解決できるのか 解説していただけると助かります。 よろしくお願いします。

  • jquery.bgSwitcherが設置できない

    私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!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> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { 　width: 640px; 　height: 415px; 　margin: 0; 　padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。

  • jqueryの組み込みが出来ません…

    jqueryのダウンロードサイトから最新番（current？）のjquery-1.8.2.min.jsをダウンロードして、head間に組み込みして、buttonをクリックしたら非表示範囲が表示されるという動作を練習しているのですが、機能してくれないです（涙 何がいけないのかさっぱりわかりません…。 jsファイルを外部かしてみたり、bodyとhtmlタグの間に記述してみたりしたのですが、それでも動作してくれません…。 何がいけないんでしょうか？？ 下記にソースを書いておきますので、わかる方いらっしゃったらご教授おねがいします<m(_ _)m> <!DOCTYPE HTML PUBLIC > <html> <head> <title>notitle</title> <meta charset="shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="cntent-script-type" content="text/javascript"> <meta name="keywords" content=""> <meta name="description" content=""> <script type="text/javascript" src="./jquery-1.8.2.min.js"></script> <script type="text/javascript"> $("button").click(function(){ $("p").show(slow); )}; </script> <style type="text/css"> <!-- *{ margin:0px; padding0px; outline:none; } p { width:200px; height:200px; background:red; display:none; } --> </style> <!--[if it IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <button>Show it</button> <p></p> </body> </html> あのなめらかな感じで動作させてみたいんです。

  • jqueryを２つ設置した事で片方が動かなくなる

    お世話になります かなり困っていますのでわかる方いらっしゃれば宜しくお願い致します 現在サイト内にjqueryを２つ設置しました ・一つは左グローバルメニューに伸縮するタイプのメニュー ・もう一つは画像をクリックするとポップアップの様になるスライドショー 少し自分で調べてみた所<script type=～></script> の書く順序によって片方が効いたり効かなかったりという所まではわかりました しかし、順序を変えても２つが共存する所まで行けません そもそも順序だけでは無いのでしょうか？ 以下を見てわかる方いらっしゃれば 是非お意見頂ければと思います 宜しくお願い致します 以下<head>内タグになります 今の状況だと左伸縮メニューは機能せず ポップアップスライドショーが機能しています <head> <!--左側伸縮メニュー--> <script type="text/javascript" src="./js/mootools-core.js"></script> <script type="text/javascript" src="./js/byslidemenu.js"></script> <script type="text/javascript"> window.onload = function(){ new BySlideMenu('verticalmenu', {vertical: true}); } </script> <!--//左側伸縮メニュー--> <!--ポップアップスライドショー--> <script type="text/javascript" src="./js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="./js/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(function() { $('a.large').fancybox(); }); </script> <!--//ポップアップスライドショー--> </head> かなり困っています 是非お力添えの程よろしくお願い致します

  • Ajaxを実装しても、どれもうまく作動しない

    下記の内容のhtmlファイルと、以下のコードで読み込んだjsファイルをサーバにアップしたところ、各ブラウザともAjaxが作動しませんでした。 jsファイルは正しく読み込まれており、スクリプトエラーも発生していません。 原因がお分かりになる方、ご回答願います。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>サンプル</title> <style type="text/css"><!-- .mainText { background-color:#ffd; color:red; border:1px solid black; visibility:hidden; } .showText { visibility:visible; } --></style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"><!-- $(document).ready(function(){ $("#btn").click(function(){ $("p").addClass("showText").fadeIn("slow"); }); }); // --></script> </head> <body> <h1>jQuery : サンプル</h1> <form> <input type="button" value="Click" id="btn"> </form> <p class="mainText">ここの段落がエフェクトにより表示されます。</p> </body> </html>

  • お願いします教えてください

    書き方がわからず困っております 初心者で申し訳ありませんが、 ご教授ください javascriptの練習で 下方の「ここにスクリプトを記入」とかいてあるところに下の条件のスクリプトを組み込みたいのです ・titleタグからタイトルを取得してdiv内に出力する（id=titleにのみ） ・input name=titleにタイトル文字列を表示させる（name=dummyには反映させない） ・ぼたんの文字をボタンに変更する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JS研修1</title> <style> div, textarea{ margin: 10px; padding: 10px; width: 400px; height: 60px; border: solid 1px #555; } </style> <script type="text/javascript" src="./jquery-1.11.1.min.js"></script> </head> <!-- ・titleタグからタイトルを取得してdiv内に出力する（id=titleにのみ） ・input name=titleにタイトル文字列を表示させる（name=dummyには反映させない） ・ぼたんの文字をボタンに変更する --> <body> <div id="title"></div> <div id="dummy"></div> <form id="sample" name="sample" method="get" action=""> <input type="text" name="title"><br> <input type="text" name="dummy"><br> <input type="button" value="ぼたん"> </form> <script type="text/javascript"> // ここにスクリプトを書いてください </script> </body> </html>

  • （jQuery)どこがエラーなのか分からない

    ●質問の主旨 下記のコードはどこが間違いでしょうか？ Javascriptコンソールでも特にエラー表示がされません。 ご存知のかたご教示願います ●コードの意図 1．ボタン要素（button）をクリック 2．非表示(none)にされていたdiv要素（赤い正方形）が出現する ●コード （click.html) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptの勉強</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>JavaScriptの勉強</h1> <script> $(function() { $("button").click(function() { $("target").show('slow'); }); }); </script> <p><button id='button'>クリック</button></p> <div id="target" style="display"; none; width: 150px; height:150px; background-color: red;></div> </body> </html>

  • 外部ファイルで窓を閉じたい

    外部ファイルで窓を閉じたくて次のように作ってみたんですが 窓が閉じません。どなたかアドバイスお願いします。 -- a.html -- <html> <head> <script language="JavaScript" src="sub.js"></script> </head> <body> <input type="button" value="閉じる" onclick="wc(window.name);"> </body> </html> -- sub.js -- function wc(mado){ mado.close(); }

  • 外部ファイルを指定するとページ上部に空白が

    bodyやcssでマージンは全てにしているのですが、javascript外部ファイルを読み込ませようとして記述を追加すると上部に空白ができてしまいます。 何が原因なのでしょうか？ ↓ページのソース（都合によりファイル名は全て仮名ですすいません） <head> <title>サンプルページ</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <script type="text/javascript" src="http://test.com/****1.js"></script> <script type="text/javascript" src="http://test.com/****2.js"></script> <link rel="stylesheet" type="text/css" href="http://test.com/****.css"> <style type="text/css"> <!-- body { background-position: 0px 0px} --> </style> </head> <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF" text="#333333"> スクリプトの場所は全て絶対パスで指定しています。 また、charsetがeucなのはこのファイルがphpで記述されているためです。 ****1.jsはページで使うスクリプト全て（ポップアップやロールオーバー等）を記述、****2.jsはアクセス解析用のスクリプトを入れています。後者を追加してから空白が出てきたような気がします。 スクリプトの種類によってこういうことが起きるのでしょうか？ ご回答お願い致します。

  • 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか？

    お世話になります。 フォーム内に配置した、１から５までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.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> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する