2011-08-05 5 views
1

私は自分の誕生日にユーザを入れる登録フォームを作っています。 問題は、2月と31日で終わらない月になるときです。ユーザーは2月31日または4月31日のようなものを置くことができます。 2月が選択されたときにわずか28を表示する実用的な方法はありますか? (Ajaxを使用する以外)HTML/PHPを使用した誕生日フォーム

<html> 
<body> 
<form action="registration.php" method="post"> 

<p><u>Select table</u></p> 

<p>Select date:</p> 
<select name="day"> 
<?php 
for($i=1;$i<=31;$i++) 
{ 
    echo '<option value='.$i.'>'.$i.'</option>'; 
} 


<select name="month"> 
<option value="January">January</option> 
<option value="February">February</option> 
<option value="Mars">Mars</option> 
<option value="April">April</option> 
<option value="May">May</option> 
<option value="June">June</option> 
<option value="July">July</option> 
<option value="September">September</option> 
<option value="October">October</option> 
<option value="November">November</option> 
<option value="December">December</option> 
</select> 

<select name="year"> 
<?php 
for($i=2011;$i<=2015;$i++) 
{ 
    echo '<option value='.$i.'>'.$i.'</option>'; 
} 

?> 
</select> 
<br/><br/> 
<input type="submit" value="Submit" /> 
</form> 

</body> 
</html> 
+3

誰かがすでに書いたjavascript/jqueryコントロールを探してみることをおすすめします。車輪を改革するポイントはありません。 –

+0

日付コンポーネントのドロップダウンは非常に迷惑です。私は積極的にあなたが誕生日や何かを見つけるために愚かな2行の高いドロップダウンをスクロールするように強制するサイトが嫌いです。 –

+1

Marc B、私はあなたが何を意味するのか知っていますが、デスクトップコンピュータでは、キーボードで年を入力するだけで、入力した年にドロップダウンがジャンプします。 モバイルでは、実際にドロップダウンがtextinputより優れていると思うので、スワイプでスクロールするのが簡単です。 –

答えて

0

JavaScriptを使用して、その月に基づいてドロップダウンを28,30、または31日に制限することができます。これはAJAXを使用する必要はありません。

+0

htmlが静的な場合、どのようにしてドロップダウンリストの値を正確に変更できますか? – patokun

+0

JavaScriptでは、HTMLは静的ではありません。たとえば、JavaScriptとjQueryを使用すると、月が変わったときにイベントを呼び出すことができます: '$( 'select [name =" month "]')change(function(){... 。}); ' –

+0

問題はJavaScriptの経験があまりないことです。私はPHPの部分を削除してJavaScriptで書き直す必要がありますか? – patokun

1

しないでください。

ほとんどの人が誕生日を完全に入力するのが最も快適です。 <option>/<select>ビットはであり、実際にはは不要です。

あなたが良い日付推測者のサーバー側にアクセスできない場合(オッズはそうです)、それを3つの別々のフィールドに分割しますが、通常は必要でもありません。

10桁の数字にぴったり合うフィールドを1つだけ入力してください。受信時に日付があいまいな場合は、正しいかどうかを尋ねてください。

+0

これは私が今やっていることです。しかし、私はそれに慣れていません。 – patokun

+0

@patokun:なぜあなたはそれに慣れていないのですか? –

+0

現在の月が30/31かどうかを確認する必要があります。それは私が知っている小さな事ですが、それは数え切れないほどのものです:D 編集:この問題は、私がサイト上で持っている別の日付選択に関するものです。 1鳥2鳥: – patokun

1

http://jqueryui.com/demos/datepicker/

これを使用すると、すべてのあなたの日付の問題は永遠に解決されます。

+1

jQuery UIのdatepickerは素晴らしいですが、誕生日のピッカーにとっては貧弱な選択です。https://github.com/abecoffman/birthdaypicker が良い選択肢です。 –

1
<html> 
<head> 
<title>Test</title> 
</head> 
<body> 
Date Of Birth: 
<select name="month" onChange="changeDate(this.options[selectedIndex].value);"> 
<option value="na">Month</option> 
<option value="1">January</option> 
<option value="2">February</option> 
<option value="3">March</option> 
<option value="4">April</option> 
<option value="5">May</option> 
<option value="6">June</option> 
<option value="7">July</option> 
<option value="8">August</option> 
<option value="9">September</option> 
<option value="10">October</option> 
<option value="11">November</option> 
<option value="12">December</option> 
</select> 
<select name="day" id="day"> 
<option value="na">Day</option> 
</select> 
<select name="year" id="year"> 
<option value="na">Year</option> 
</select> 
<script language="JavaScript" type="text/javascript"> 
function changeDate(i){ 
var e = document.getElementById('day'); 
while(e.length>0) 
e.remove(e.length-1); 
var j=-1; 
if(i=="na") 
k=0; 
else if(i==2) 
k=28; 
else if(i==4||i==6||i==9||i==11) 
k=30; 
else 
k=31; 
while(j++<k){ 
var s=document.createElement('option'); 
var e=document.getElementById('day'); 
if(j==0){ 
s.text="Day"; 
s.value="na"; 
try{ 
e.add(s,null);} 
catch(ex){ 
e.add(s);}} 
else{ 
s.text=j; 
s.value=j; 
try{ 
e.add(s,null);} 
catch(ex){ 
e.add(s);}}}} 
y = 1993; 
while (y-->1940){ 
var s = document.createElement('option'); 
var e = document.getElementById('year'); 
s.text=y; 
s.value=y; 
try{ 
e.add(s,null);} 
catch(ex){ 
e.add(s);}} 
</script> 
</body> 
</html> 
関連する問題