プロが教えるわが家の防犯対策術!

下のような3つに分かれたセレクトメニューを入力したあとに、
<input type="text" name="date" value="2007-1-1">と入力した場合と同じように
ひとつのクエリー(&date=2007-1-1)にしたいのですがどう書けばいいのでしょうか…

<!--ここから-->

配送日:

<SELECT NAME="date_year">
<OPTION value="2007">2007
<OPTION value="2008">2008
<OPTION value="2009">2009
</SELECT>年

<SELECT NAME="date_month">
<OPTION value="1">1
 ~省略~
<OPTION value="12">12
</SELECT>月

<SELECT NAME="date_day">
<OPTION value="1">1
 ~省略~
<OPTION value="31">31
</SELECT>日

<!--ここまで-->

また、selectメニューの初期値を
ページを表示した日の翌日にしたいのです。
どうぞよろしくお願いします。

A 回答 (3件)

こんにちは



CGIを使ってやるならこんな感じ・・・(test.cgiの中身になります)

print "<body>\n";

$year=$in{'nen'};
$month=$in{'gatu'};
$day=$in{'niti'};

print <<"EOM";
<script language=javascript><!--
window.onload=function(){
days = new Array("","31","28","31","30","31","30","31","31","30","31","30","31");

now = new Date();
yea = now.getFullYear();
mon = now.getMonth()+1;
day = now.getDate()+1;
day0 = days[mon];
if((yea%4) == 0 && (yea%100) != 0 || (yea%400) == 0) {if(mon ==2){ day0=29;}}

obj1 = document.today.nen;
obj2 = document.today.gatu;
obj3 = document.today.niti;

if(day > day0){
if(mon==12){ yea=yea+1; }
mon=mon+1;
day=1;
day0 = days[mon];
}

year="$year";
for(i=0; i<3; i++) {
m = yea+i;
obj1.options[i] = new Option(m,m);
if(m == yea && year==""){ obj1.options[i].selected =true; }
else{
if(obj1.options[i].value==year){ obj1.options[i].selected =true; }
}
}

month="$month";
for(i=0; i<12; i++) {
n = i+1;
if(n<10){n="0"+n;}
obj2.options[i] = new Option(n,n);
if(n == mon && month==""){ obj2.options[i].selected =true; }
else{
if(obj2.options[i].value==month){ obj2.options[i].selected =true; }
}
}

date="$day";
for(i=0; i<day0; i++) {
l = i+1;
if(l<10){l="0"+l;}
obj3.options[i] = new Option(l,l);
if(l == day && date==""){ obj3.options[i].selected =true; }
else{
if(obj3.options[i].value==date){ obj3.options[i].selected =true; }
}
}

document.getElementById('date').value=obj1.value + "-" + obj2.value + "-" +obj3.value;
}

function change(){
obj1 = document.today.nen;
obj2 = document.today.gatu;
obj3 = document.today.niti;
document.getElementById('date').value=obj1.value + "-" + obj2.value + "-" + obj3.value;
}

function change0(){
obj1 = document.today.nen;
obj2 = document.today.gatu;
obj3 = document.today.niti;
document.getElementById('date').value=obj1.value + "-" + obj2.value + "-" + obj3.value;
for(i=0; i<31; i++) {
l = i+1;
if(l<10){l="0"+l;}
obj3.options[i] = new Option(l,l);
}
}

//-->
</script>

<form name="today" action="test.cgi" method="post">
<select name="nen" onChange="change()"></select>年
<select name="gatu" onChange="change0()"></select>月
<select name="niti" onChange="change()"></select>日
<input type="text" name="date" size="12">
<input type="submit" value="送信">
</form>
</body>
EOM
    • good
    • 0
この回答へのお礼

ありがとうございます!
早速試してみたいと思います!

お礼日時:2007/05/13 10:14

とりあえず月・日を2桁にそろえるようにしました(下記)。



次の画面で送信内容を初期選択にする場合には、Perlで<select>タグの部分を動的に作成し、ユーザーが選択した項目を<option selected></option>にするようにしてもいいです。
それか次のページに下記のJavaScriptを挿入し、選択した年は変数$nyearに、月は$nmonに、日は$ndayに代入すればJavaScriptが、送信した値を選択します。
前者の方法を使う場合は「Perl部分」間を削除してください。参考までに。

<script language="javascript"><!--
d=document;
myDate= new Date();
we= new Array(31,28,31,30,31,30,31,31,30,31,30,31);
year=myDate.getYear();
mon=myDate.getMonth()+1;
day=myDate.getDate();
year=(year<2000)?(1900+year):(year);
if (((year%4)==0 && (year%100)!=0) || (year%400)==0);
we[1] = 29;
if(mon==12 && day==we[mon-1]){//大晦日
year++;
mon=1;
day=1;
} else if(day==we[mon-1]){//12月を除く、月の最後の日
mon++;
day=1;
} else {//月の最後の日以外
day++;
}
function xFirstRun(){
//Perl部分
year=$nyear;
mon=$nmon;
day=$nday;
//Perl部分
for(i=0;i<d.f.date_year.length;i++){
if(d.f.date_year.options[i].value==year){
d.f.date_year.options[i].selected=true;
}
}
for(i=0;i<d.f.date_month.length;i++){
if(d.f.date_month.options[i].value==mon){
d.f.date_month.options[i].selected=true;
}
}
for(i=0;i<d.f.date_day.length;i++){
if(d.f.date_day.options[i].value==day){
d.f.date_day.options[i].selected=true;
}
}
d.f.date.value=year+"-"+x2Place(mon)+"-"+x2Place(day);
}
function xChange(){
ye=d.f.date_year.options[d.f.date_year.selectedIndex].value;
mo=d.f.date_month.options[d.f.date_month.selectedIndex].value;
da=d.f.date_day.options[d.f.date_day.selectedIndex].value;
d.f.date.value=ye+"-"+x2Place(mo)+"-"+x2Place(da);
}
function x2Place(nm){
return ((nm<10)?("0"+nm):nm);
}
onload=xFirstRun;
-->
</script>
    • good
    • 0

JavaScriptで再現できます。



<script language="javascript"><!--
d=document;
myDate= new Date();
we= new Array(31,28,31,30,31,30,31,31,30,31,30,31);
year=myDate.getYear();
mon=myDate.getMonth()+1;
day=myDate.getDate();
year=(year<2000)?(1900+year):(year);
if (((year%4)==0 && (year%100)!=0) || (year%400)==0)
we[1] = 29;
if(mon==12 && day==we[mon-1]){//大晦日
year++;
mon=1;
day=1;
} else if(day==we[mon-1]){//12月を除く、月の最後の日
mon++;
day=1;
} else {//月の最後の日以外
day++;
}
function xFirstRun(){
for(i=0;i<d.f.date_year.length;i++){
if(d.f.date_year.options[i].value==year){
d.f.date_year.options[i].selected=true;
}
}
for(i=0;i<d.f.date_month.length;i++){
if(d.f.date_month.options[i].value==mon){
d.f.date_month.options[i].selected=true;
}
}
for(i=0;i<d.f.date_day.length;i++){
if(d.f.date_day.options[i].value==day){
d.f.date_day.options[i].selected=true;
}
}
d.f.date.value=year+"-"+mon+"-"+day;
}
function xChange(){
ye=d.f.date_year.options[d.f.date_year.selectedIndex].value;
mo=d.f.date_month.options[d.f.date_month.selectedIndex].value;
da=d.f.date_day.options[d.f.date_day.selectedIndex].value;
d.f.date.value=ye+"-"+mo+"-"+da;
}
onload=xFirstRun;
-->
</script>
<form name="f"><select name="date_year" onchange="xChange()">
<option value="2006">2006 </option>
<option value="2007">2007 </option>
<option value="2008">2008 </option>
<option value="2009">2009 </option>
</select>年 <select name="date_month" onchange="xChange()">
<option value="1">1</option>
<option value="2">2</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>
</select>月<select name="date_day" onchange="xChange()">
<option value="1">1</option>
<option value="2">2</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>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>日<br>
<br>
<input type="text" name="date"></form>
    • good
    • 0
この回答へのお礼

早速のお返事ありがとうございます。

あと月と日付が一桁のとき2007-5-9ではなく
2007-05-09にする方法と、

selectメニューの初期値(翌日の日付)は、
はじめに表示したときだけで、
次に表示したときはクエリーで送信した内容を反映したいのですが、
この辺はクエリーをPerl内で分解しないと難しいでしょうか。

ちょっと自分でも訳がわからなくなってきました…

こちらのjavaScriptは大変助かりました。
ありがとうございました。

お礼日時:2007/05/12 19:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!