- ベストアンサー
WEBショップの配送希望日のプルダウン
こんばんは。 タイトルの通り、ショップのカートにある配送希望日のプルダウン 例えば・・・ 「3日後から14日後の間で指定」としていたら プルダウンに今日（3月25日（水））から14日後までの日付が入ったプルダウンが表示されるようなselectボックスを作るにはどうすればよいでしょうか？ javascriptのカレンダーを取り入れようとしてみたのですが、どうにも上手く行かないので教えてください。
- bao-bab
- お礼率58% (28/48)
- JavaScript
- 回答数17
- ありがとう数11
- みんなの回答 （17）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
自分が書いたものは、読み込む順番に多分関係ない。 それと、顧客の使うパソコンの日付が狂ってるとおかしくなるよ！ <input type="hidden" id="today_from_server" name="配送日" value="2000/01/01"> の日付をサーバー側で書き込まないと・・・。 htmlで「たいへんよくできました」が表示されるようにね！^^;
その他の回答 (16)
解決しましたか？ ここは、質問者の方が後から何度も質問できないので、 ちょっと不便ですね。なので結果を書きやすいように ゴミを書き込んでおきます 正直なところ、自分にはわかりません。 文字コード？キャッシュ？ 一旦閉じて、別の方（専門家）に再質問してみては？
補足
Q&A方式なので、いたしかたないことです。 お気遣いの書き込みまでしていただき、有難うございます。 _pipi_様にはお付き合いいただきまして何とお礼を言ってよいやら。 配布元に問い合わせてみます。 フリーですけれど、対応はとても良いところですので。 その上で、出来る限り_pipi_様のスクリプトを使いたいと思っていますが、もしどうしてもだめな場合はここまでしていただいたのですが、今回は見送ることとさせていただきます。 いずれ何かの形で使えればと、取っておきます。 今回のスクリプトを組んでいただいた「答え」を見させていただいたおかげで、「答え」から記述方法を学べました。 今後、必ず勉強していきます。 この度は誠に有難うございました。 これで閉めさせていただきます。
select からなんでnameを消すの？ 参照 http://www.tagindex.com/html_tag/form/select.html htmlもここでチェックして http://openlab.ring.gr.jp/k16/htmllint/htmllint.html その間に考えてます 自分の環境では、○日後なんて出ないんだけどなぁ～
お礼
郵便番号→住所変換用のスクリプトも入れてます。 スクリプトを読み込む際には順番が大切とどこかのサイトで読んだ気がしますが、関係ありますか？
補足
>select からなんでnameを消すの？ ここにnameを入れるとスクリプトを入れたときにフォームに○日後と表示されたので。 今、チェック中です。
<input type="hidden" id="today_from_server" name="配送日" value=""> を <input type="hidden" id="today_from_server" name="配送日" value="2000/01/01"> にして試す hiddenをtextにして試すとか
補足
<select>の方のnameは消しました。 value="2000/01/01"にしてみると、 フォームは配送日のセレクトボックスをクリックすると １日後 ２日後 ・ ・ ・ と出まして、確認画面には 配送日 ｜ ○（数字） と表示されます。 hiddenをtextにしてみるとselectボックスの左側にtextボックスが現れまして2000/01/01と表示されます。
それぞれのnameを、配送日と何日後って書いてみて！ それがダブってないの？
補足
それが_pipi_さんの書いて下さったソースを一部コピペしたので、それぞれのnameは配送日と何日後となっているんです。 さっきの話ですが、どちらも配送日とnameをつけたらきちんと配送日という項目が２つ表示されました。 だからこのCGIはそのまま受け取ってそのまま表示するという形なのだと思います。
たとえば、スクリプトなしで <html> <body> <form method="post" action="./formmailer.cgi"> <p> <input type="text" name="お名前" size="30"><br> <input type="text" name="フリガナ" size="30"><br> <input type="hidden" id="today_from_server" name="配送日" value=""> <select id="after_day" name="何日後"> <option value="">配送日</option> <option value="3">3日後</option> <option value="4">4日後</option> <option value="5">5日後</option> <option value="6">6日後</option> <option value="7">7日後</option> <option value="8">8日後</option> <option value="9">9日後</option> <option value="10">10日後</option> <option value="11">11日後</option> <option value="12">12日後</option> <option value="13">13日後</option> <option value="14">14日後</option> </select><br> <input type="checkbox" name="formmailer_check"> <input type="submit" value="送信"> </p> </form></body></html> こんなふうにミニマムなコードで動かしてみる
補足
実行しました。 配送日 ｜ （空白） 何日後 ｜ ○日後の○（数字） が表示されます。
<select id="after_day"> にnameがない。 CGI側では、それ以外ちゃんと受け取れていますか？
補足
>CGI側では、それ以外ちゃんと受け取れていますか？ はい。 他はきちんとすべて表示されています。 ><select id="after_day"> にnameがない。 コチラにもnameをつけましたら、以前同様○日後の○（数時）が値として表示されます。 ちなみに確認画面は お名前 ｜○○ ○○ フリガナ｜○○ ○○ 配送日 ｜○ ←ここに数字が表示されます と言った感じに表示されます。
じゃ～あなたが作ったHTMLをみせておくれ！
補足
すみません。字数オーバーで消すのに時間がかかってしまいました。 <html> <head> <title>ご注文フォーム</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> //@cc_on //全角空白はタブまたは半角空白に置き換えのこと (function (init) { /*@if(@_jscript) document.attachEvent && attachEvent('onload', init); @else@*/ document.addEventListener && addEventListener('load', init, false); /*@end@*/ })(function () { var today = new Date; var d, o, w; var date_val = []; var date_str = document.getElementById('today_from_server').value; var count = 1; var the_options = document.getElementById('after_day').options; if (date_str) { date_val = date_str.split(/[\/\- ]/g); --date_val[1]; } else { date_val = [today.getFullYear(), today.getMonth(), today.getDate() ]; document.getElementById('today_from_server').value = date_val.join('/'); } while (o = the_options[count++]) { d = new Date(date_val[0], date_val[1], parseInt(date_val[2]) + parseInt(o.value)); w = d.getDay(); o.text = (d.getMonth() + 1) + '月' + d.getDate() + '日(' + '日月火水木金土'.substr(w,1) + ')'; o.style.backgroundColor = '#'+['fdd','fff','ddf'][1-!w+(w==6)] } }); </script> </head> <body text="#696969"> <form method="post" action="./formmailer.cgi"> <table border="0" bgcolor="#ffffff" cellpadding="0" cellspacing="0" align="center"> <table border="0" cellspacing="1" cellpadding="3" align="center" style="font-size:11pt;"> <tr> <td nowrap valign="top" bgcolor="#FAFAD2">お名前<font color="#FF6600" size="-1">*</font></td> <td valign="top" bgcolor="#FFFFFF"> <input type="text" name="お名前" size="30"> <font size="-1"> （全角文字）</font></td></tr><tr><td nowrap valign="middle" bgcolor="#FAFAD2">フリガナ<font color="#FF6600" size="-1">*</font></td> <td valign="middle" bgcolor="#FFFFFF"> <input type="text" name="フリガナ" size="30"> <font size="-1"> （全角カタカナ）</font> </td></tr> <tr> <td nowrap valign="middle" bgcolor="#FAFAD2">ご希望配送日</td> <td> <input type="hidden" id="today_from_server" name="配送日" value=""> <select id="after_day"> <option value="">配送日</option> <option value="3">3日後</option> <option value="4">4日後</option> <option value="5">5日後</option> <option value="6">6日後</option> <option value="7">7日後</option> <option value="8">8日後</option> <option value="9">9日後</option> <option value="10">10日後</option> <option value="11">11日後</option> <option value="12">12日後</option> <option value="13">13日後</option> <option value="14">14日後</option> </select><br><br> 本日より3日以降14日以内でご選択ください。</font></td> </tr> </table> </td> </tr> </table> <font size="-1"> <br><br> </font><input type="checkbox" name="formmailer_check">確認画面を出さずに送信<br> <br><input type="submit" value="送信"> <input type="reset" value="リセット" name="reset"><br></form> </table> </body> </html>
大きく勘違いを、お互いにしているかもしれないけど・・・ さっきアップしたので正常に送れているはずがない。 もっと簡単にたずねよう。 受ける側、つまり送信を受け取るCGI側では、どんな name で指定されたデータを受け取るの？ 正常に送信できたときのformって、nameが指定されてないし CGIがわでうけとれるはずがない <input type="hidden" id="today_from_server" value="" name="これがない"> <select id="after_day" name="これもない"> もう一つ。 このサンプルの<select>部分は、あくまでも <input type="hidden" id="today_from_server" value="" name=""> のvalue、つまり日付文字列を基準に何日後という値しか 送信できていないよ！
補足
いえ。 cgiはnameがあるものが表示されるようになっていると以前申し上げました。 それで、<input>の中にnameを入れると2009/2/27となり、<select>にnameを入れると○日後とフォームに表示されるとも前の補足に入れましたが、読んでいただけましたか？ そのようなことで、今、頭から煙が出ている状態です;
まずは、正常に送信されていたころのHTML（フォーム）は どうなってるの？ ＞＞もしくは、スクリプトで、月と日に分ける？ っていうのは、選んで確定したら、その日付を切り分けるという意。
補足
当初のものですと、 <input type="hidden" id="today_from_server" value=""> <select id="after_day"> <option value="">配送日</option> <option value="3">3日後</option> <option value="4">4日後</option> <option value="5">5日後</option> <option value="6">6日後</option> <option value="7">7日後</option> <option value="8">8日後</option> <option value="9">9日後</option> <option value="10">10日後</option> <option value="11">11日後</option> <option value="12">12日後</option> <option value="13">13日後</option> <option value="14">14日後</option> </select> です。 これだとhiddenですので、確認画面に表示されません。 hiddenで受け取った値を確認画面に表示させるやり方がないかを（私でも分かる程度の^^;)探している途中です。 もしかして簡単なことなのでしょうか？ 試しにcgiにもともとの月と日をセレクトした値を結合する文を忍ばせてみたりしたのですが、結果が出ず、です。
<input type="hidden" id="そのままに" name="CGIに渡す名前"> idとnameはそれぞれ指定できる もしくは、スクリプトで、月と日に分ける？
補足
いいえ。 _pipi_さんのスクリプトが使えるのであれば分けません。 idをtoday_from_serverのまま、nameをつけると確認画面では2009/2/27となり、idもnameもつけるとフォームの方が○日後という表示になります。 <select>にnameをつけると、確認画面に○日後の○が表示されます。
- 1
- 2
お礼
今、スクリプトと<input>～</select>の部分だけ取り出して実行してみて、初めて_pipi_さんが仰っていることが分かりました。 回り道しました。 こんなやり方があることに今気づきました。 これだから・・・と思われることでしょうT_T これだけ見ると本当に、どちらにもnameを入れてもきちんと表示されますね！ ということは、CGI配布先に問い合わせた方が良いのでしょうか？ javascriptの結果が反映されないとか何とかで。
補足
サーバー側でしているんですよT_T チェック結果は309組のエラー！ びっくりしてよく見たら、色やテキストボックスのサイズなど実に細かくチェックしてくれていまして^^;