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

日期值更改时jquery onchange

2 个答案: