Question

I am using a date picker js.
I want to set a validation when the end date changed, the validation sets in..

---

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";
          }

    }

How to make when the txt_ACEnd is changed, it will run the toggle1 function
and when the txt_ATEnd is changed, it will run the toggle2 function?

and is my toggle1 and toggle2 function correct or will it not run?

Answer 1

check this:

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

and it should be like this:

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

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