jquery onchange當日期值更改

Question

我正在使用日期選擇器js。
我想設置驗證時，結束日期改變，驗證集..

---

HTML : 

> <table width="52%" height="216" border="0"align="center"> <tr 
> class="font_style"> 
>  <td height="30" valign="top">Academic Start Date</td> 
>  <td width="51%" valign="top"><input name="txt_ACStart" type="text" id="txt_ACStart" readonly="readonly" /></td> </tr> <tr 
> class="font_style"> 
>  <td height="30" valign="top">Academic End Date</td> 
>  <td valign="top"><p> 
>  <input name="txt_ACEnd" type="text" id="txt_ACEnd" readonly="readonly" /> 
>  </p> 
>  <div id="validate_AC" style="display:none">End date must be higher than Start date</div></td> </tr> <tr class="font_style"> 
>  <td height="30" valign="top">Attendance Start Date</td> 
>  <td valign="top"><span class="style_table_elm"> 
>  <input name="txt_ATStart" type="text" id="txt_ATStart" readonly="readonly" /> 
>  </span></td> </tr> <tr class="font_style"> 
>  <td height="30" valign="top">Attendance End Date</td> 
>  <td valign="top"><p class="style_table_elm"> 
>  <input name="txt_ATEnd" type="text" id="txt_ATEnd" readonly="readonly" /> 
>  </p> 
>  <div id="validate_AS" style="display:none">End date must be higher than Start date</div></td> </tr> <tr class="font_style"> 
>  <td height="30"><span class="style_table_elm"> 
>  <input type="checkbox" name="chk_weekendvar" id="chk_weekendvar" /> 
>  <strong>Attendance on Mon - Sat</strong> 
>  </span></td> 
>  <td>&nbsp;</td> </tr> <tr class="font_style"> 
>  <td height="30" colspan="2"><blockquote> 
>  <blockquote> 
>   <blockquote> 
>   <blockquote> 
>    <p> 
>    <input type="submit" name="btn_save" id="btn_save" value="Save" action="toggle()" /> 
>    </p> 
>   </blockquote> 
>   </blockquote> 
>  </blockquote> 
>  </blockquote></td> </tr> </table> 

的JavaScript：

<script type="text/javascript"> 
    var valid1 = document.getElementById("validate_AC"); 
    var valid2 = document.getElementById("validate_AT"); 
    var ACdate1 =""; 
    var ACdate2 =""; 
    var ATdate3 =""; 
    var ATdate4 = ""; 

    $(document).ready(function(){ 
     $("txt_ACEnd").bind("change",toggle1); 
     $("txt_ATEnd").bind("change",toggle2); 
    }); 

    function toggle1(){ 
     ACdate1 = document.getElementById("txt_ACStart").value(); 
     ACdate2 = document.getElementById("txt_ACEnd").value(); 


     if(ACdate1 > ACdate2) 
     { 
      valid1.style.display = "block"; 
     } 
     else 
     { 
      valid1.style.display = "none"; 
     } 

    } 

    function toggle2() { 
     ATdate3 = document.getElementById("txt_ATStart").value(); 
     ATdate4 = document.getElementById("txt_ATEnd").value(); 

     if(ATdate3 > ATdate4) 
      { 
       valid2.style.display = "block"; 
      } 
      else 
      { 
       valid2.style.display = "none"; 
      } 

    } 

如何使當txt_ACEnd改變時，它會運行toggle1功能
並且當txt_ATEnd更改時，它將運行toggle2功能？

並且我的toggle1和toggle2功能是正確的還是不會運行？

Answer 1

檢查：

$(document).ready(function(){ 
    $("txt_ACEnd").bind("change",toggle1); 
    $("txt_ATEnd").bind("change",toggle2); 
    //^------------You have to use jQuery way to select the selectors------- 
}); 

，它應該是這樣的：

$(document).ready(function(){ 
    $("#txt_ACEnd").bind("change",toggle1); 
    $("#txt_ATEnd").bind("change",toggle2); 
}); 

use '#' for id capture 
use '.' for class capture 

Answer 2

你可以試試這個例子。它解釋了我們如何在元素值發生變化時調用函數。
即實現輸入更改偵聽器。

http://jsbin.com/afudor/1/edit