1

我正在使用日期选择器 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 功能正确还是无法运行？

4

2 回答 2

0

检查这个：

$(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
于 2012-11-06T05:53:30.863 回答
-1

你可以试试这个样本。它解释了如果元素值发生变化，我们如何调用函数。
那就是实现一个输入更改侦听器。

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

于 2012-11-06T05:52:22.893 回答