春羽閣

2009-04-06

JavaScript-點選TextBox上方顯示Calendar；清除所有輸入的資料

JavaScript-點選TextBox上方顯示Calendar；清除所有輸入的資料

1.點選TextBox上方顯示Calendar

 於XXX.aspx的原始碼頁面，TextBox的tag內，輸入onClick="方法名稱( )"

<asp:TextBox ID="startDate" runat="server" Width="115px" onClick="switchCalendars(1)"></asp:TextBox>
<asp:TextBox ID="endDate" runat="server" Width="118px" onClick="switchCalendars(2)"></asp:TextBox>

並於</html>後輸入JavaScript程式碼:

<script type="text/javascript">
   function switchCalendars(index){
        switch(index){
            case 1: 
                document.getElementById("calendar1").style.display="block";
                document.getElementById("calendar2").style.display="none";
                break;
            case 2:
                document.getElementById("calendar1").style.display="none";
                document.getElementById("calendar2").style.display="block";
                break;
            default:
                document.getElementById("calendar1").style.display="none";
                document.getElementById("calendar2").style.display="none";
                break;    
        }
   }
</script>

 *將Calendar一開始的visible屬性設為False

2.清除所有輸入的資料

拉一個html的Button到XXX.aspx設計介面，於原始碼加入onClick="方法名稱( )"顯示如下：

<button onclick="doClear()">清除</button>

並於</html>後輸入JavaScript程式碼:

<script type="text/javascript">
     function doClear(){
        switchCalendars(0);
        document.getElementById("companyID").value="";
        document.getElementById("cellPhone").value="";
        document.getElementById("startDate").value="";
        document.getElementById("endDate").value="";
   } 
</script>