A script to calculate age of a person if date of birth is mentioned

I have two textboxes in my form , one for mentioning date of birth and another for age, I want that as soon as i entered dob , age is automatically calculated and displayed in its respective textbox......
add_flat.aspx
Sukesh ShuklaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You can do it with some jquery and Moment.js (http://momentjs.com/)
HTML
      <input type="text" name="man_dob" class="manual" />
      <input type="text" id="age" />

Open in new window

jQuery
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="plugins/moment/moment.min.js"></script>
<script>
function setAge(d)
{
  var age = moment().diff(d, 'years');
  $('#age').val(age);
}

$(function() {
  $('.manual').change(function() {
    setAge(moment($(this).val()));
  });
});
</script>

Open in new window


A full working sample is available here - which shows both the manual entry method shown above as well as using a bootstrap layout with datetimepicker.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Sukesh ShuklaAuthor Commented:
Thanks Julian Hasen, for your help.....

I applied that script , but its not working.... Kindly let me know the error.I'm attatching my page below
add_pmember.aspx
Julian HansenCommented:
When you say it does not work - do you get any errors in the console?

Looking at your code
1. jQuery i spelled wrong [jqyery] in the library include however ...
2. You have included jquery at the end of your page as well - you should only include jquery once
3. Does the moment.min.js library exists in the scripts folder - did you download and install it?
4. Put the code below AFTER the jquery <script> include just before the closing <body> tag

So - remove the jqyery include, check moment.js exists and move code to before body tag.

Report any errors that appear in the console.

<script type="text/javascript" src="scripts/jqyery.js"></script>   
<script type="text/javascript" src="scripts/moment.min.js"></script>
    
<script>
    function setAge(d) {
        var age = moment().diff(d, 'years');
        $('#age').val(age);
    }

    $(function () {
        $('.manual').change(function () {
            setAge(moment($(this).val()));
        });
    });
</script>

Open in new window

Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Sukesh ShuklaAuthor Commented:
Yes , I did the following steps and the script did work properly......

Thanks a lot Julian Hansen for your help..... :)
Julian HansenCommented:
You are most welcome - good luck with your project.
Sukesh ShuklaAuthor Commented:
Julian Hansen,

Though the script is working properly, but the calculation is wrong, for example if suppose i enter date of birth as 18/05/1993 i should get age as 22 years but its giving 21years only....

Can you please help me over this
Julian HansenCommented:
The problem is your date format - when you use the form ##/##/#### it is interpreted as a US date format i.e MM/DD/YYYY

If you enter 05/18/1993 you will see it gives the correct date.

Likewise if you enter 1993-05-18 it will also give the correct date.

In the previous code I posted I noticed a deprecation warning on the use of the moment constuctor and JS date formats - I have made an amendment as follows
$(function() {
  $('.manual').change(function() {
    // PASS AN ISO DATE STRING TO THE moment CONSTRUCTOR
    var isoDate = new Date($(this).val()).toISOString();
    setAge(moment(isoDate));
  });

Open in new window

In conjunction with the above change you will need to validate the input to ensure it is in the correct format.
Sukesh ShuklaAuthor Commented:
Scince I'm a beginner could you help me with that too , as to how to ensure the correct date Format
Julian HansenCommented:
1. You need to tell your users what format you are expecting so in your date field do like this
<input type="text" placeholder="yyyy-mm-dd" />

2. You can then do this
function isValidDate(date)
{
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) {
      var matches = /^(\d{4})[-\/](\d{2})[-\/](\d{2})$/.exec(date);
      if (matches == null) {
        return false;
      }
    }
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];
    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

$(function() {
  $('.manual').change(function() {
    // PASS AN ISO DATE STRING TO THE moment CONSTRUCTOR
    var dob = $(this).val();
    if (isValidDate(dob)) {
      var isoDate = new Date(dob).toISOString();
      setAge(moment(isoDate));
    }
    else {
      alert('Invalid date format - expecting YYYY-MM-DD or DD-MM-YYYY');
    }
  });

Open in new window

Sukesh ShuklaAuthor Commented:
Hi Julian Hansen

The script provided by you to calculate age , was functioning very well but as i included the calender control to input the date of birth in my textbox , the script has stopped working ...Please help me out with this
add_pmember.aspx
add_pmember.aspx.cs
Julian HansenCommented:
Do you get any errors with your current script?

Do you not have a link I can look at - debugging from source is slow and painful?
Sukesh ShuklaAuthor Commented:
Hi  Julian

I have uploaded the project at nidhitripathi.in/sample...You will get the script in add_member.aspx...
Kindly check
Julian HansenCommented:
That link points to a directory with 1 item.

Do you have a link where I can see the code actually working.
Sukesh ShuklaAuthor Commented:
Actually i don't have a windows server , where i can upload it and make it live...
Presently i'm using localhost only....
You can download it and run on your localhost to check
Julian HansenCommented:
You can download it and run on your localhost to check
Unfortunately I don't have the time or resources to be able to do this. Your script uses database connectivity which would render it unusable on my network unless I setup the database etc.

Where in your ASPX file are you binding the calendar control to DOB
Sukesh ShuklaAuthor Commented:
Ok , thanks for your time Julian Hansen
Julian HansenCommented:
Where in your ASPX file are you binding the calendar control to DOB
I want to try and use the same process in my script and see if that yields any information.
Sukesh ShuklaAuthor Commented:
//You will find the coding in add_pmember.aspx.cs... It is as  follows//


  protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            if (Calendar1.Visible)
                    {
                       Calendar1.Visible = false;
                    }
                    else
                    {
                        Calendar1.Visible = true;
                    }
                        }

        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            TextBoxDOB.Text = Calendar1.SelectedDate.ToShortDateString();
            Calendar1.Visible = false;
        }
Julian HansenCommented:
How does that render out? Can you do a view source of your page and paste the HTML.
Sukesh ShuklaAuthor Commented:
My Html Page is as follows:-

<script type="text/javascript" src="scripts/jquery.js"></script>   
<script type="text/javascript" src="scripts/moment.min.js"></script>
    <script type="text/javascript" src="scripts/moment.js"></script>
    
<script>
    function setAge(d) {
        var age = moment().diff(d, 'years');
        $('#age').val(age);
    }

    $(function () {
        $('.manual').change(function () {
            setAge(moment($(this).val()));
        });
    });
</script>

    <script>
        function setAge1(d) {
            var age1 = moment().diff(d, 'years');
            $('#TextBoxA1').val(age1);
        }

        $(function () {
            $('.manual1').change(function () {
                setAge1(moment($(this).val()));
            });
        });
</script>
    <script type="text/javascript">
        function SetDate() {
            var date = new Date();

            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();

            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;

            var today = year + "-" + month + "-" + day;


            document.getElementById('TextBoxJ').value = today;
        }
</script>
</head>
<body style="background-color: #CCFFFF">
    <form id="form2" runat="server">
        <asp:Panel ID="Primary_Panel" runat="server" style="background-color: #CCFFFF">
         <table class="auto-style8" cellpadding ="5px">
            <tr>
                <td class="auto-style21">Flat Number</td>
                <td class="auto-style22">
                    <asp:DropDownList ID="DropDownListFN" runat="server" onchange="FlatAvailability()" >
                    </asp:DropDownList>
                </td>
                <td class="auto-style23">
                    <asp:Label ID="lblStatus" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="auto-style9">First_Name</td>
                <td class="auto-style34">
                    <asp:TextBox ID="TextBoxFN" runat="server"></asp:TextBox>
                </td>
                <td>
                    &nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBoxFN" ErrorMessage="First Name is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                    <br />
                </td>
            </tr>
            <tr>
                <td class="auto-style9">Middle_Name</td>
                <td class="auto-style34">
                    <asp:TextBox ID="TextBoxMN" runat="server"></asp:TextBox>
                </td>
                
            </tr>
             <tr>
                 <td class="auto-style9">Last_Name</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxLN" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator16" runat="server" ControlToValidate="TextBoxLN" ErrorMessage="Last Name is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                     <br />
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Mobile Number</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxMO" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBoxMO" ErrorMessage="Mobile Number is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                     <br />
                 </td>
             </tr>
            <tr>
                <td class="auto-style10">Email</td>
                <td class="auto-style35">
                    <asp:TextBox ID="TextBoxE" runat="server"></asp:TextBox>
                </td>
                <td class="auto-style11">
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBoxE" ErrorMessage="Invalid Email" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" SetFocusOnError="True"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style10">Date Of Birth</td>
                <td class="auto-style35">
                    <asp:TextBox ID="TextBoxDOB" runat="server" Class="manual"></asp:TextBox>
                    <asp:ImageButton ID="ImageButton1" runat="server" CausesValidation="False" Height="37px" ImageUrl="~/Images/wxcal.jpg" OnClick="ImageButton1_Click" style="position: relative; top: -23px; left: 0px; margin-left: 137px" Width="57px" />
                </td>
                 <td class="auto-style37">
                     <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" OnSelectionChanged="Calendar1_SelectionChanged" ShowGridLines="True" Width="220px">
                         <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
                         <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                         <OtherMonthDayStyle ForeColor="#CC9966" />
                         <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                         <SelectorStyle BackColor="#FFCC66" />
                         <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
                         <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                     </asp:Calendar>
                </td>
               
                
            </tr>
            <tr>
                <td class="auto-style9">Age</td>
                <td class="auto-style34">
                    <asp:TextBox ID="age" runat="server"></asp:TextBox>
                </td>
                <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="age" ErrorMessage="Age is required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
            </tr>
             <tr>
                 <td class="auto-style16">Educational Qualification</td>
                 <td class="auto-style36">
                     <asp:TextBox ID="TextBoxEQ" runat="server"></asp:TextBox>
                 </td>
                 <td class="auto-style13"></td>
             </tr>
             <tr>
                 <td class="auto-style9">Office Address</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxOA" runat="server" TextMode="MultiLine"></asp:TextBox>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Native Address</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxNA" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TextBoxNA" ErrorMessage="Native Address is required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">PAN Card Number</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxPCN" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" ControlToValidate="TextBoxPCN" ErrorMessage="PAN Card No Is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Aadhar Card Number</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxACN" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" ControlToValidate="TextBoxACN" ErrorMessage="Aadhar number is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Religion</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxR" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator15" runat="server" ControlToValidate="TextBoxR" ErrorMessage="Religion is Mandatory" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style16">Business/Job</td>
                 <td class="auto-style36">
                     <asp:RadioButtonList ID="RadioButtonListBJ" runat="server" RepeatDirection="Horizontal">
                         <asp:ListItem Value="Business">Business</asp:ListItem>
                         <asp:ListItem Value="Job">Job</asp:ListItem>
                     </asp:RadioButtonList>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style16">Married/UnMarried</td>
                 <td class="auto-style36">
                     <asp:RadioButtonList ID="RadioButtonListMU" runat="server" RepeatDirection="Horizontal">
                         <asp:ListItem Value="Married">Married</asp:ListItem>
                         <asp:ListItem Value="Unmarried">Unmarried</asp:ListItem>
                     </asp:RadioButtonList>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
            <tr>
                <td class="auto-style9">No Of Members</td>
                <td class="auto-style34">
                    <asp:TextBox ID="TextBoxNOM" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="TextBoxNOM" ErrorMessage="Number Of Members is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                    <br />
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ControlToValidate="TextBoxNOM" ErrorMessage="Only Numbers are allowed" ForeColor="Red" ValidationExpression="^\d+$"></asp:RegularExpressionValidator>
                </td>
            </tr>
             <tr>
                 <td class="auto-style9">Joining Date</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxJ" runat="server" onclick="SetDate()"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="TextBoxJ" ErrorMessage="Joining Date is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
            <tr>
                <td class="auto-style12" colspan="1">
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" style="text-align: center" Text="ADD" />
               </td>
                <td class="auto-style34">
                    <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Family Member Details" />
                    
                   
                </td>
                <td class="auto-style13"></td>
                <td class="auto-style13"></td>
            </tr>
        </table>
         </asp:Panel>

Open in new window

Julian HansenCommented:
No, what I need to see is the RENDERED HTML - not the source code.

1. Open the page in your browser
2. View Source
3. Copy HTML
4. Paste here

When posting code please use the code tags to wrap your code. To do this
1. Click the CODE option in the menu bar of the editor
2. Paste your code between the code tags

I have modified your previous post to do this.
Sukesh ShuklaAuthor Commented:
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">

        .auto-style8 {
            width: 100%;
            background-color: #CCFFFF;
        }
        .auto-style9 {
            width: 341px;
            text-align: center;
        }
        .auto-style10 {
            width: 341px;
            height: 26px;
            text-align: center;
        }
        .auto-style11 {
            height: 26px;
        }
        .auto-style12 {
            width: 341px;
            height: 23px;
        }
        .auto-style13 {
            height: 23px;
        }
        .auto-style16 {
            width: 341px;
            text-align: center;
            height: 23px;
        }
        .auto-style21 {
            width: 341px;
            height: 24px;
            text-align: center;
        }
        .auto-style22 {
            height: 24px;
            width: 168px;
        }
        .auto-style23 {
            height: 24px;
        }
        .auto-style24 {
            color: #FF0000;
        }
        .auto-style31 {
            width: 128px;
        }
        .auto-style32 {
            height: 26px;
            width: 128px;
        }
        .auto-style33 {
            width: 128px;
            height: 23px;
        }
        .auto-style34 {
            width: 168px;
        }
        .auto-style35 {
            height: 26px;
            width: 168px;
        }
        .auto-style36 {
            width: 168px;
            height: 23px;
        }
        .auto-style37 {
            height: 26px;
            width: 168px;
            color: #FF0000;
        }
    </style>
    <script type="text/javascript">

        function myFunction() {

            alert("You have exceeded the members entered");


        }

        


</script>

  <script type="text/javascript" src="scripts/jquery.js"></script>   
<script type="text/javascript" src="scripts/moment.min.js"></script>
    <script type="text/javascript" src="scripts/moment.js"></script>
    
<script>
    function setAge(d) {
        var age = moment().diff(d, 'years');
        $('#age').val(age);
    }

    $(function () {
        $('.manual').change(function () {
            setAge(moment($(this).val()));
        });
    });
</script>

    <script>
        function setAge1(d) {
            var age1 = moment().diff(d, 'years');
            $('#TextBoxA1').val(age1);
        }

        $(function () {
            $('.manual1').change(function () {
                setAge1(moment($(this).val()));
            });
        });
</script>
    <script type="text/javascript">
        function SetDate() {
            var date = new Date();

            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();

            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;

            var today = year + "-" + month + "-" + day;


            document.getElementById('TextBoxJ').value = today;
        }
</script>
</head>
<body style="background-color: #CCFFFF">
    <form method="post" action="add_pmember.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form2">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZDZTaAbJeV3ESqDeFY7BGtVYICE8HhIpuN4csMdS7a1i4HqQpz/VSuOpH7wEi130j1MDsRbWQkM0d52b4jsb6NjkWJ6AEq5pBfGOkklmPHBrCU3Q+/71YsblwNgMwdFOo76kQsJFW+Q0i78JnSvA22/2PI52QsxItZnFp/vlO1vslQhEmZGSS1CqJAbC22UG6fCZ8wXPeLF8fb1r3KP38PB5/tp0/WH+5WhAOkF9TFThtc5kPawbapC5BVQeIKClpqrREnthLe+47tEZRavJvMHOl4gnSXwO6gUOCE+tf7NRLdIhi0qnH3zysf4p2GIRh7M/33Hv6+cVbYEujBNWx9+Y4dRy4ibmBXh5+b1gQl1yem2i4Psz4EaVV7ESt1cSFGoL3NyC+BCbvCzwc4miDKiyy3ta8Px1NgmU7QnjEwMTuojuRniFJsf5EHfh46N1OOUe7sJNrJKAOWLYBKMnqA==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form2'];
if (!theForm) {
    theForm = document.form2;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZCErUIiy0FccU42WH3R0u--CN1Jpl8tXLOXbLTNp_FIXJfC4VDiTZJY1l2ou5pl0dw2&amp;t=634773918900000000" type="text/javascript"></script>


<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakPMYMZwQliPogleR8Jncs5Te0dqLYv8NHCY2aOdJRHcrcyPcCWkHq3sGXU9sQI23Mi-gbnQx3JHNM8eFN6fzaH81&amp;t=634773918900000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="WbQSh7BkD0SO2ty2opfKVHVgkp0KlHl4VMq+/04jSXvORlVQCloSvbx1aJDpnf5N4HMAY9YQRn9QG8jgoarNp6uwrO5F1kdflPeBbyACv9ipcD+HRJtOFnI2kn56ECtFXkxeLErcAOj9flSob+K0HIWboAwrirK4ng71RvKt9GPf6wNfIqRFAg4Z3S0p++7RXlUwijXaDKbFymMHYHqK6eglaN4bUikj9tQKzUEAb1ILyknYm00JUvD0rHwHe/yGPoJFiyB9wePIoSiQ9oBZRSd6NDagcdcbG8m7wpIWMIKWpFtN8O0BHMw0Ghj9s08MTGqRPUsfolS64ar9Ciuz6Xc+Zz2jZehk+AnEnBPfs05BbaApph7V24R1VBWKgz3VFxkk8+OqrwX6i68mkq3GNLbUQotTn4JQLSCnbUdvWwxOaGJPRnY3P0uGf+n5m7weJlZ2R99JEtG/E/QsECSv2utcgslyFGmkf05ftJzFDtQ2ACjXsMfkic5NwPrxbP//Rtf7hWcflZwBYDjRlgpn5dVjn/UXpZiw9fu/ODKFngpEtMoogrM9o2blcuN7Bp0trSrfKUtmFGTwZyG8e6MxK08rIwZnMBB4F4+If6YGprWW0TXoF5hfnDzGUiJWtrm/FYgsdnnfvvJEaYRfvWBHOMD0CcdeHpNBYdj2ao3nqdVVIaFTngIC+P4PNbdnrTvehw4v0x+zNMZuKZpCaDTCjvVqUCnM+qwJGtn4jx7aBmDxRpnZqoS6QHpODDgUxP1hZbaSC5KcPeyw35eP8egZRA==" />
</div>
        <div id="Primary_Panel" style="background-color: #CCFFFF">
	
         <table class="auto-style8" cellpadding ="5px">
            <tr>
                <td class="auto-style21">Flat Number</td>
                <td class="auto-style22">
                    <select name="DropDownListFN" id="DropDownListFN" onchange="FlatAvailability()">
		<option value="101">101</option>
		<option value="102">102</option>
		<option value="103">103</option>
		<option value="104">104</option>
		<option value="105">105</option>
		<option value="107">107</option>
		<option value="106">106</option>
		<option value="404">404</option>

	</select>
                </td>
                <td class="auto-style23">
                    <span id="lblStatus"></span>
                </td>
            </tr>
            <tr>
                <td class="auto-style9">First_Name</td>
                <td class="auto-style34">
                    <input name="TextBoxFN" type="text" id="TextBoxFN" />
                </td>
                <td>
                    &nbsp;<span data-val-controltovalidate="TextBoxFN" data-val-errormessage="First Name is Required" id="RequiredFieldValidator3" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">First Name is Required</span>
                    <br />
                </td>
            </tr>
            <tr>
                <td class="auto-style9">Middle_Name</td>
                <td class="auto-style34">
                    <input name="TextBoxMN" type="text" id="TextBoxMN" />
                </td>
                
            </tr>
             <tr>
                 <td class="auto-style9">Last_Name</td>
                 <td class="auto-style34">
                     <input name="TextBoxLN" type="text" id="TextBoxLN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxLN" data-val-errormessage="Last Name is Required" id="RequiredFieldValidator16" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Last Name is Required</span>
                     <br />
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Mobile Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxMO" type="text" id="TextBoxMO" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxMO" data-val-errormessage="Mobile Number is Required" id="RequiredFieldValidator4" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Mobile Number is Required</span>
                     <br />
                 </td>
             </tr>
            <tr>
                <td class="auto-style10">Email</td>
                <td class="auto-style35">
                    <input name="TextBoxE" type="text" id="TextBoxE" />
                </td>
                <td class="auto-style11">
                    <span data-val-controltovalidate="TextBoxE" data-val-focusOnError="t" data-val-errormessage="Invalid Email" id="RegularExpressionValidator1" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="\w+([-+.&#39;]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" style="color:Red;visibility:hidden;">Invalid Email</span>
                </td>
            </tr>
            <tr>
                <td class="auto-style10">Date Of Birth</td>
                <td class="auto-style35">
                    <input name="TextBoxDOB" type="text" id="TextBoxDOB" Class="manual" />
                    <input type="image" name="ImageButton1" id="ImageButton1" src="Images/wxcal.jpg" style="height:37px;width:57px;position: relative; top: -23px; left: 0px; margin-left: 137px" />
                </td>
                 <td class="auto-style37">
                     
                </td>
               
                
            </tr>
            <tr>
                <td class="auto-style9">Age</td>
                <td class="auto-style34">
                    <input name="age" type="text" id="age" />
                </td>
                <td>
                     <span data-val-controltovalidate="age" data-val-errormessage="Age is required" id="RequiredFieldValidator2" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Age is required</span>
                 </td>
            </tr>
             <tr>
                 <td class="auto-style16">Educational Qualification</td>
                 <td class="auto-style36">
                     <input name="TextBoxEQ" type="text" id="TextBoxEQ" />
                 </td>
                 <td class="auto-style13"></td>
             </tr>
             <tr>
                 <td class="auto-style9">Office Address</td>
                 <td class="auto-style34">
                     <textarea name="TextBoxOA" rows="2" cols="20" id="TextBoxOA">
</textarea>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Native Address</td>
                 <td class="auto-style34">
                     <input name="TextBoxNA" type="text" id="TextBoxNA" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxNA" data-val-errormessage="Native Address is required" id="RequiredFieldValidator5" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Native Address is required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">PAN Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxPCN" type="text" id="TextBoxPCN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxPCN" data-val-errormessage="PAN Card No Is Required" id="RequiredFieldValidator13" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">PAN Card No Is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Aadhar Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxACN" type="text" id="TextBoxACN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxACN" data-val-errormessage="Aadhar number is Required" id="RequiredFieldValidator14" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Aadhar number is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Religion</td>
                 <td class="auto-style34">
                     <input name="TextBoxR" type="text" id="TextBoxR" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxR" data-val-errormessage="Religion is Mandatory" id="RequiredFieldValidator15" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Religion is Mandatory</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style16">Business/Job</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListBJ">
		<tr>
			<td><input id="RadioButtonListBJ_0" type="radio" name="RadioButtonListBJ" value="Business" /><label for="RadioButtonListBJ_0">Business</label></td><td><input id="RadioButtonListBJ_1" type="radio" name="RadioButtonListBJ" value="Job" /><label for="RadioButtonListBJ_1">Job</label></td>
		</tr>
	</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style16">Married/UnMarried</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListMU">
		<tr>
			<td><input id="RadioButtonListMU_0" type="radio" name="RadioButtonListMU" value="Married" /><label for="RadioButtonListMU_0">Married</label></td><td><input id="RadioButtonListMU_1" type="radio" name="RadioButtonListMU" value="Unmarried" /><label for="RadioButtonListMU_1">Unmarried</label></td>
		</tr>
	</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
            <tr>
                <td class="auto-style9">No Of Members</td>
                <td class="auto-style34">
                    <input name="TextBoxNOM" type="text" id="TextBoxNOM" />
                </td>
                <td>
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Number Of Members is Required" id="RequiredFieldValidator7" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Number Of Members is Required</span>
                    <br />
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Only Numbers are allowed" id="RegularExpressionValidator5" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^\d+$" style="color:Red;visibility:hidden;">Only Numbers are allowed</span>
                </td>
            </tr>
             <tr>
                 <td class="auto-style9">Joining Date</td>
                 <td class="auto-style34">
                     <input name="TextBoxJ" type="text" id="TextBoxJ" onclick="SetDate()" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxJ" data-val-errormessage="Joining Date is Required" id="RequiredFieldValidator21" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Joining Date is Required</span>
                 </td>
             </tr>
            <tr>
                <td class="auto-style12" colspan="1">
                    <input type="submit" name="Button1" value="ADD" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button1" style="text-align: center" />
               </td>
                <td class="auto-style34">
                    <input type="submit" name="Button3" value="Family Member Details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button3&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button3" />
                    
                   
                </td>
                <td class="auto-style13"></td>
                <td class="auto-style13"></td>
            </tr>
        </table>
         
</div>
        
        <p>
            
        </p>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a id="HyperLink1" href="webform1.aspx">Go To Menu</a>
        </p>

        
      <script src="../Scripts/jquery-1.7.1.min.js"></script>  
  
    <script type="text/javascript">

        function FlatAvailability() {
            //This function call on text change.             
            $.ajax({
                type: "POST",
                url: "add_pmember.aspx/CheckFlat", // this for calling the web method function in cs code.  
                data: '{flat: "' + $("#DropDownListFN")[0].value + '"}',// flat name 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });
        }

        // function OnSuccess  
        function OnSuccess(response) {
            var msg = $("#lblStatus")[0];
            switch (response.d) {
                case "true":
                    msg.style.display = "block";
                    msg.style.color = "red";
                    msg.innerHTML = "Flat Detail Already  exists.";
                    break;
                case "false":
                    msg.style.display = "block";
                    msg.style.color = "green";
                    msg.innerHTML = "";
                    break;
            }
        }

        </script>
    
   
    </form>

         
</body>
</html>

Open in new window

Julian HansenCommented:
A couple of pointers off the bat

1. You are including the jQuery library 3 times
2. You are including the moment library twice
3. Where possible use CDN's for your scripts (Ex. http://code.jquery.com/jquery.js)

Try and structure your page like so
<html>
<head>
<!-- <style> and <link> stylesheets here -->
</head>
<body>
<!-- Content -->
<!-- Javascript libraries -->
<!-- Custom javascript - preferably in an external file after including libraries -->
</body>
</html>

Open in new window


I am not seeing anything that links the DOB to a calendar control - but this may be in the 2 resource files that are missing

Can you attach the following
/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZCErUIiy0FccU42WH3R0u--CN1Jpl8tXLOXbLTNp_FIXJfC4VDiTZJY1l2ou5pl0dw2&amp;t=634773918900000000

/WebResource.axd?d=x2nkrMJGXkMELz33nwnakPMYMZwQliPogleR8Jncs5Te0dqLYv8NHCY2aOdJRHcrcyPcCWkHq3sGXU9sQI23Mi-gbnQx3JHNM8eFN6fzaH81&amp;t=634773918900000000

Open in new window

Sukesh ShuklaAuthor Commented:
SetAge function is not working , i mean the age is not calculated automatically on entering DOB...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="housing1.WebForm4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1 {
            text-align: center;
        }
        .auto-style9 {
            width: 341px;
            text-align: center;
        }
        .auto-style34 {
            width: 168px;
        }
        .auto-style10 {
            width: 341px;
            height: 26px;
            text-align: center;
        }
        .auto-style35 {
            height: 26px;
            width: 168px;
        }
        .auto-style11 {
            height: 26px;
        }
        .auto-style24 {
            color: #FF0000;
        }
        .auto-style16 {
            width: 341px;
            text-align: center;
            height: 23px;
        }
        .auto-style36 {
            width: 168px;
            height: 23px;
        }
        .auto-style13 {
            height: 23px;
        }
        
        .auto-style8 {
            width: 100%;
            background-color: #CCFFFF;
        }
        </style>
</head>
    
    
<body style="background-color: #CCFFCC">
    <form id="form1" runat="server">


        <div class="auto-style1">
            Enter New Primary Member Details<br />
            <br />
            <br />
         <table class="auto-style8" cellpadding ="5px">
             <tr>
                 <td class="auto-style9">
                     <asp:HiddenField ID="HiddenFieldLD" runat="server"  />
                 </td>
                 </tr>
             <tr>
                 <td class="auto-style9">Middle_Name</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxMN" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style9">Last_Name</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxLN" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator16" runat="server" ControlToValidate="TextBoxLN" ErrorMessage="Last Name is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                     <br />
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Mobile Number</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxMO" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBoxMO" ErrorMessage="Mobile Number is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                     <br />
                 </td>
             </tr>
            <tr>
                <td class="auto-style10">Email</td>
                <td class="auto-style35">
                    <asp:TextBox ID="TextBoxE" runat="server"></asp:TextBox>
                </td>
                <td class="auto-style11">
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBoxE" ErrorMessage="Invalid Email" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" SetFocusOnError="True"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style10">Date Of Birth</td>
                <td class="auto-style35">
                    <asp:TextBox ID="TextBoxDOB" runat="server" class="manual"></asp:TextBox>
                </td>
                
                <td>
                    <span class="auto-style24">(mm/dd/yyyy)</span>
                </td>
                
            </tr>
            <tr>
                <td class="auto-style9">Age</td>
                <td class="auto-style34">
                    <asp:TextBox ID="TextBoxA" runat="server"></asp:TextBox>
                </td>
                <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBoxA" ErrorMessage="Age is required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
            </tr>
             <tr>
                 <td class="auto-style16">Educational Qualification</td>
                 <td class="auto-style36">
                     <asp:TextBox ID="TextBoxEQ" runat="server"></asp:TextBox>
                 </td>
                 <td class="auto-style13"></td>
             </tr>
             <tr>
                 <td class="auto-style9">Office Address</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxOA" runat="server" TextMode="MultiLine"></asp:TextBox>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Native Address</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxNA" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TextBoxNA" ErrorMessage="Native Address is required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">PAN Card Number</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxPCN" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator13" runat="server" ControlToValidate="TextBoxPCN" ErrorMessage="PAN Card No Is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Aadhar Card Number</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxACN" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator14" runat="server" ControlToValidate="TextBoxACN" ErrorMessage="Aadhar number is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Religion</td>
                 <td class="auto-style34">
                     <asp:TextBox ID="TextBoxR" runat="server"></asp:TextBox>
                 </td>
                 <td>
                     <asp:RequiredFieldValidator ID="RequiredFieldValidator15" runat="server" ControlToValidate="TextBoxR" ErrorMessage="Religion is Mandatory" ForeColor="Red"></asp:RequiredFieldValidator>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style16">Business/Job</td>
                 <td class="auto-style36">
                     <asp:RadioButtonList ID="RadioButtonListBJ" runat="server" RepeatDirection="Horizontal">
                         <asp:ListItem Value="Business">Business</asp:ListItem>
                         <asp:ListItem Value="Job">Job</asp:ListItem>
                     </asp:RadioButtonList>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style16">Married/UnMarried</td>
                 <td class="auto-style36">
                     <asp:RadioButtonList ID="RadioButtonListMU" runat="server" RepeatDirection="Horizontal">
                         <asp:ListItem Value="Married">Married</asp:ListItem>
                         <asp:ListItem Value="Unmarried">Unmarried</asp:ListItem>
                     </asp:RadioButtonList>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
            <tr>
                <td class="auto-style9">No Of Members</td>
                <td class="auto-style34">
                    <asp:TextBox ID="TextBoxNOM" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="TextBoxNOM" ErrorMessage="Number Of Members is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                    <br />
                    <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ControlToValidate="TextBoxNOM" ErrorMessage="Only Numbers are allowed" ForeColor="Red" ValidationExpression="^\d+$"></asp:RegularExpressionValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style9">Joining Date</td>
                <td class="auto-style34">
                    <asp:TextBox ID="TextBoxJ" runat="server" onclick="SetDate()"></asp:TextBox>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator18" runat="server" ControlToValidate="TextBoxJ" ErrorMessage="Date is Required" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
        </table>
            <br />
            <br />


        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Update Dtabase" Height="62px" Width="323px" />
        
            <br />
            <br />
            <br />
            <br />
            <br />
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/webform1.aspx">Go To Menu</asp:HyperLink>
        </div>
        
    </form>

    <script>
        function SetDate() {
            var date = new Date();

            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();

            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;

            var today = day + "/" + month + "/" + year;


            document.getElementById('TextBoxJ').value = today;
        }


       
        function setAge(d) {
            var age = moment().diff(d, 'years');
            $('#TextBoxA').val(age);
        }

        $(function () {
            $('.manual').change(function () {
                setAge(moment($(this).val()));
            });
        });
</script>
    <script>
       $(function () {
           $('#<%=TextBoxJ.ClientID%>').change(function () {
               //This function call on text change.             
                // Check if the joindate is 
                if (new Date($('#<%= HiddenFieldLD.ClientID%>').val()) > new Date($(this).val())) {
                    alert('Invalid Date');
                    return false;
                }
 });
       });
</script>
</body>
</html>

Open in new window

Julian HansenCommented:
Please post rendered HTML - I am not able to work with your ASP code.
Sukesh ShuklaAuthor Commented:
Renderd Html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">
        .auto-style1 {
            text-align: center;
        }
        .auto-style9 {
            width: 341px;
            text-align: center;
        }
        .auto-style34 {
            width: 168px;
        }
        .auto-style10 {
            width: 341px;
            height: 26px;
            text-align: center;
        }
        .auto-style35 {
            height: 26px;
            width: 168px;
        }
        .auto-style11 {
            height: 26px;
        }
        .auto-style24 {
            color: #FF0000;
        }
        .auto-style16 {
            width: 341px;
            text-align: center;
            height: 23px;
        }
        .auto-style36 {
            width: 168px;
            height: 23px;
        }
        .auto-style13 {
            height: 23px;
        }
        
        .auto-style8 {
            width: 100%;
            background-color: #CCFFFF;
        }
        </style>
</head>
    
    
<body style="background-color: #CCFFCC">
    <form method="post" action="WebForm4.aspx?fnum=107&amp;fname=Raj&amp;ldate=10%2f23%2f2014" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="rMOcwP+LRILtzSfBvJ3JWVQQDbOuxHDovK8WpkWta35NGBwDtIQrqnSTnw4SdZwFl87zfqSOspbv8mBhnSq9BFFV8SZIiNQhoHqH4Olw9ZE=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZCErUIiy0FccU42WH3R0u--CN1Jpl8tXLOXbLTNp_FIXJfC4VDiTZJY1l2ou5pl0dw2&amp;t=634773918900000000" type="text/javascript"></script>


<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakPMYMZwQliPogleR8Jncs5Te0dqLYv8NHCY2aOdJRHcrcyPcCWkHq3sGXU9sQI23Mi-gbnQx3JHNM8eFN6fzaH81&amp;t=634773918900000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="TtGjgvPh5HqvyYtKq981UbLhzPWP9baESzqeR8DrazTRJN6y68bTWskun5Z4Mh+Hego1zhAnTA2SFIsSJIVaa8MnNGa3WtnDfCWaDBUv4Hla0Wiz6fqGf4J7tQkbS9w1fzYNRIPJfrFtMLQL7qTTfwwWyfAq2g/yTT+JZylz0wkSRIWstjhBBjQ+DGpObOBuK0iCnWzffDteZ4eDWmiNXoscTUHT0Y0qFaggxOPvfDTBsQ86F4FwVx60VI4Q+m7zbwyV0oNxPNZjlyhsqjlZiKowimcGRcveX+5ccRuev9U8bfh0dK4j/67GLA5cnbBe2xSiyTj8GMnBCageMMxyym3m6j71nZtz8Ls5vFWHkB6AabaKQ2JHK/mhj1mwIwG2NXqq6U6Qc9I0pvrAQzvz9pcIBJyEr458PBHUuGIEEEs3gSFPGWVszMYQ7bKm1S/9LJTevRbwE6BE9zAHZ0N0NDGmGwDS/G6X+ZBNkaPg82QqjNzh9EVml1ocslYzWN+xf2m1Lk7UXdq1cgXmrzyCDuuyMcT7o6cJgGbZXyKvUYaPXts8gJuSZgdihV2wPFdq" />
</div>


        <div class="auto-style1">
            Enter New Primary Member Details<br />
            <br />
            <br />
         <table class="auto-style8" cellpadding ="5px">
             <tr>
                 <td class="auto-style9">
                     <input type="hidden" name="HiddenFieldLD" id="HiddenFieldLD" value="10/23/2014" />
                 </td>
                 </tr>
             <tr>
                 <td class="auto-style9">Middle_Name</td>
                 <td class="auto-style34">
                     <input name="TextBoxMN" type="text" id="TextBoxMN" />
                 </td>
                 <td>
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style9">Last_Name</td>
                 <td class="auto-style34">
                     <input name="TextBoxLN" type="text" id="TextBoxLN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxLN" data-val-errormessage="Last Name is Required" id="RequiredFieldValidator16" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Last Name is Required</span>
                     <br />
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Mobile Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxMO" type="text" id="TextBoxMO" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxMO" data-val-errormessage="Mobile Number is Required" id="RequiredFieldValidator4" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Mobile Number is Required</span>
                     <br />
                 </td>
             </tr>
            <tr>
                <td class="auto-style10">Email</td>
                <td class="auto-style35">
                    <input name="TextBoxE" type="text" id="TextBoxE" />
                </td>
                <td class="auto-style11">
                    <span data-val-controltovalidate="TextBoxE" data-val-focusOnError="t" data-val-errormessage="Invalid Email" id="RegularExpressionValidator1" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="\w+([-+.&#39;]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" style="color:Red;visibility:hidden;">Invalid Email</span>
                </td>
            </tr>
            <tr>
                <td class="auto-style10">Date Of Birth</td>
                <td class="auto-style35">
                    <input name="TextBoxDOB" type="text" id="TextBoxDOB" class="manual" />
                </td>
                
                <td>
                    <span class="auto-style24">(mm/dd/yyyy)</span>
                </td>
                
            </tr>
            <tr>
                <td class="auto-style9">Age</td>
                <td class="auto-style34">
                    <input name="TextBoxA" type="text" id="TextBoxA" />
                </td>
                <td>
                     <span data-val-controltovalidate="TextBoxA" data-val-errormessage="Age is required" id="RequiredFieldValidator2" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Age is required</span>
                 </td>
            </tr>
             <tr>
                 <td class="auto-style16">Educational Qualification</td>
                 <td class="auto-style36">
                     <input name="TextBoxEQ" type="text" id="TextBoxEQ" />
                 </td>
                 <td class="auto-style13"></td>
             </tr>
             <tr>
                 <td class="auto-style9">Office Address</td>
                 <td class="auto-style34">
                     <textarea name="TextBoxOA" rows="2" cols="20" id="TextBoxOA">
</textarea>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Native Address</td>
                 <td class="auto-style34">
                     <input name="TextBoxNA" type="text" id="TextBoxNA" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxNA" data-val-errormessage="Native Address is required" id="RequiredFieldValidator5" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Native Address is required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">PAN Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxPCN" type="text" id="TextBoxPCN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxPCN" data-val-errormessage="PAN Card No Is Required" id="RequiredFieldValidator13" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">PAN Card No Is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Aadhar Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxACN" type="text" id="TextBoxACN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxACN" data-val-errormessage="Aadhar number is Required" id="RequiredFieldValidator14" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Aadhar number is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Religion</td>
                 <td class="auto-style34">
                     <input name="TextBoxR" type="text" id="TextBoxR" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxR" data-val-errormessage="Religion is Mandatory" id="RequiredFieldValidator15" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Religion is Mandatory</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style16">Business/Job</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListBJ">
	<tr>
		<td><input id="RadioButtonListBJ_0" type="radio" name="RadioButtonListBJ" value="Business" /><label for="RadioButtonListBJ_0">Business</label></td><td><input id="RadioButtonListBJ_1" type="radio" name="RadioButtonListBJ" value="Job" /><label for="RadioButtonListBJ_1">Job</label></td>
	</tr>
</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style16">Married/UnMarried</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListMU">
	<tr>
		<td><input id="RadioButtonListMU_0" type="radio" name="RadioButtonListMU" value="Married" /><label for="RadioButtonListMU_0">Married</label></td><td><input id="RadioButtonListMU_1" type="radio" name="RadioButtonListMU" value="Unmarried" /><label for="RadioButtonListMU_1">Unmarried</label></td>
	</tr>
</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
            <tr>
                <td class="auto-style9">No Of Members</td>
                <td class="auto-style34">
                    <input name="TextBoxNOM" type="text" id="TextBoxNOM" />
                </td>
                <td>
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Number Of Members is Required" id="RequiredFieldValidator7" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Number Of Members is Required</span>
                    <br />
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Only Numbers are allowed" id="RegularExpressionValidator5" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^\d+$" style="color:Red;visibility:hidden;">Only Numbers are allowed</span>
                </td>
            </tr>
            <tr>
                <td class="auto-style9">Joining Date</td>
                <td class="auto-style34">
                    <input name="TextBoxJ" type="text" id="TextBoxJ" onclick="SetDate()" />
                </td>
                <td>
                    <span data-val-controltovalidate="TextBoxJ" data-val-errormessage="Date is Required" id="RequiredFieldValidator18" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Date is Required</span>
                </td>
            </tr>
        </table>
            <br />
            <br />


        <input type="submit" name="Button1" value="Update Dtabase" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button1" style="height:62px;width:323px;" />
        
            <br />
            <br />
            <br />
            <br />
            <br />
        <a id="HyperLink1" href="webform1.aspx">Go To Menu</a>
        </div>
        
    </form>

    <script>
        function SetDate() {
            var date = new Date();

            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();

            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;

            var today = month + "/" + day + "/" + year;


            document.getElementById('TextBoxJ').value = today;
        }


       
        function setAge(d) {
            var age = moment().diff(d, 'years');
            $('#TextBoxA').val(age);
        }

        $(function () {
            $('.manual').mouseout(function () {
                setAge(moment($(this).val()));
            });
        });
</script>
    <script>
       $(function () {
           $('#TextBoxJ').mouseout(function () {
               //This function call on text change.             
                // Check if the joindate is 
                if (new Date($('#HiddenFieldLD').val()) > new Date($(this).val())) {
                    alert('Invalid Date');
                    return false;
                }
 });
       });
</script>
</body>
</html>

Open in new window

Julian HansenCommented:
@Sukesh,

I suggest you become familiar with the console window. You need to look there first for errors as first step.

This is what I see in the console when I enter a DOB

ReferenceError: moment is not defined
   setAge(moment($(this).val()));

Open in new window


You have not included the moment.js library - as soon as you add that the code works.
Sukesh ShuklaAuthor Commented:
Could you send me some links from where i can get good knowledge of console window...

Since i'm a beginner i don't have much idea about it
Julian HansenCommented:
Right click the page
Select Inspect Element
Click console tab
Sukesh ShuklaAuthor Commented:
I include moment.js , then also script does not work....
Sukesh ShuklaAuthor Commented:
This is the rendered html of that page
 function setAge1(d) {
            var age1 = moment().diff(d, 'years');
            $('#TextBoxA1').val(age1);
        }

        $(function () {
            $('.manual1').change(function () {
                setAge1(moment($(this).val()));
            });
        });

Open in new window

Julian HansenCommented:
I don't see moment.js in your latest post

you need to do
<script src="path_to_folder/moment.js" type="text/javascript"></script>
Somewhere before the code you just posted
Sukesh ShuklaAuthor Commented:
Sorry i posted the wrong one...Kindly have a look at this one

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">
        .auto-style1 {
            text-align: center;
        }
        .auto-style9 {
            width: 341px;
            text-align: center;
        }
        .auto-style34 {
            width: 168px;
        }
        .auto-style10 {
            width: 341px;
            height: 26px;
            text-align: center;
        }
        .auto-style35 {
            height: 26px;
            width: 168px;
        }
        .auto-style11 {
            height: 26px;
        }
        .auto-style24 {
            color: #FF0000;
        }
        .auto-style16 {
            width: 341px;
            text-align: center;
            height: 23px;
        }
        .auto-style36 {
            width: 168px;
            height: 23px;
        }
        .auto-style13 {
            height: 23px;
        }
        
        .auto-style8 {
            width: 100%;
            background-color: #CCFFFF;
        }
        </style>
     <script type="text/javascript" src="scripts/jquery.js"></script>   
    <script type="text/javascript" src="scripts/moment.min.js"></script>
    <script type="text/javascript" src="scripts/moment.js"></script>

<script>
    function setAge1(d) {
        var age1 = moment().diff(d, 'years');
        $('#TextBoxA1').val(age1);
    }

    $(function () {
        $('.manual1').change(function () {
            setAge1(moment($(this).val()));
        });
    });
</script>
</head>
    
    
<body style="background-color: #CCFFCC">
    <form method="post" action="WebForm4.aspx?fnum=107&amp;fname=R+L&amp;ldate=10%2f23%2f2026" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="p49wJ7Ewrxftf2rF8d5C/CXMV7Ln7d/uX/MVB+HJelC7vYP49RLUa82gyZJE9uH/KjWbUP0RwoPIXVMdqG6UFAhC15GQiC1pXThEI6ZzAMM=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZCErUIiy0FccU42WH3R0u--CN1Jpl8tXLOXbLTNp_FIXJfC4VDiTZJY1l2ou5pl0dw2&amp;t=634773918900000000" type="text/javascript"></script>


<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakPMYMZwQliPogleR8Jncs5Te0dqLYv8NHCY2aOdJRHcrcyPcCWkHq3sGXU9sQI23Mi-gbnQx3JHNM8eFN6fzaH81&amp;t=634773918900000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="fHuSSjNW/FsYERyhvnD5ZV27S/NUiDpxMP4OfJQgt3pBsl4+PEW90gbpUurHNkDyXVNCPoM60pLJjc4Hjp3U06SUpwRpvfPktC4DlfpiMty0InYhd3QpSz6dkmzQ3fHcZ8Y00x+doyrqPEjFqfRDpf661VKGulbZfv9x9A/H5D+7Ll20wiGia8p7Vz8tBXpDMohEHU0dmBxHySQ5sOWLYXNEL4sjOSmRkA4khtfJo+1/+qzQMVkFq4EDRCFsjFwgy6ndQRT7Qi9ACEXrDXkO0MYzgMIz5kOfoL6f7WTXUxSzETjor1t02gOhAMjY2RTTXkmv+Kaz4jlDazQ2EEfIPJED8QTY99Uv1Z6jQeX0qTJGjKFtywt77UD8EuMWh7gU9qPFmEKbxxLWbNb/+gHiLjgsU6AvovbKMyal5dP0iHX9CthojsbhkXOpbHImOyz1zaALTABJgMHjPun6ItjtVVItnq4irSH2mjV+FKD9zTe5Hco6le62Pu1tls9ijEJTDjfiBP8PZv17cNf62+AX0XXTsoai02FN2mpHSK0MKpX0UEuICvLTIQ0R/zbBKQz6" />
</div>


        <div class="auto-style1">
            Enter New Primary Member Details<br />
            <br />
            <br />
         <table class="auto-style8" cellpadding ="5px">
             <tr>
                 <td class="auto-style9">
                     <input type="hidden" name="HiddenFieldLD" id="HiddenFieldLD" value="10/23/2026" />
                 </td>
                 </tr>
             <tr>
                 <td class="auto-style9">Middle_Name</td>
                 <td class="auto-style34">
                     <input name="TextBoxMN" type="text" id="TextBoxMN" />
                 </td>
                 <td>
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style9">Last_Name</td>
                 <td class="auto-style34">
                     <input name="TextBoxLN" type="text" id="TextBoxLN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxLN" data-val-errormessage="Last Name is Required" id="RequiredFieldValidator16" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Last Name is Required</span>
                     <br />
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Mobile Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxMO" type="text" id="TextBoxMO" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxMO" data-val-errormessage="Mobile Number is Required" id="RequiredFieldValidator4" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Mobile Number is Required</span>
                     <br />
                 </td>
             </tr>
            <tr>
                <td class="auto-style10">Email</td>
                <td class="auto-style35">
                    <input name="TextBoxE" type="text" id="TextBoxE" />
                </td>
                <td class="auto-style11">
                    <span data-val-controltovalidate="TextBoxE" data-val-focusOnError="t" data-val-errormessage="Invalid Email" id="RegularExpressionValidator1" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="\w+([-+.&#39;]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" style="color:Red;visibility:hidden;">Invalid Email</span>
                </td>
            </tr>
            <tr>
                <td class="auto-style10">Date Of Birth</td>
                <td class="auto-style35">
                    <input name="TextBoxDOB" type="text" id="TextBoxDOB" class="manual" />
                </td>
                
                <td>
                    <span class="auto-style24">(mm/dd/yyyy)</span>
                </td>
                
            </tr>
            <tr>
                <td class="auto-style9">Age</td>
                <td class="auto-style34">
                    <input name="TextBoxA" type="text" id="TextBoxA" />
                </td>
                <td>
                     <span data-val-controltovalidate="TextBoxA" data-val-errormessage="Age is required" id="RequiredFieldValidator2" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Age is required</span>
                 </td>
            </tr>
             <tr>
                 <td class="auto-style16">Educational Qualification</td>
                 <td class="auto-style36">
                     <input name="TextBoxEQ" type="text" id="TextBoxEQ" />
                 </td>
                 <td class="auto-style13"></td>
             </tr>
             <tr>
                 <td class="auto-style9">Office Address</td>
                 <td class="auto-style34">
                     <textarea name="TextBoxOA" rows="2" cols="20" id="TextBoxOA">
</textarea>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Native Address</td>
                 <td class="auto-style34">
                     <input name="TextBoxNA" type="text" id="TextBoxNA" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxNA" data-val-errormessage="Native Address is required" id="RequiredFieldValidator5" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Native Address is required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">PAN Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxPCN" type="text" id="TextBoxPCN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxPCN" data-val-errormessage="PAN Card No Is Required" id="RequiredFieldValidator13" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">PAN Card No Is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Aadhar Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxACN" type="text" id="TextBoxACN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxACN" data-val-errormessage="Aadhar number is Required" id="RequiredFieldValidator14" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Aadhar number is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Religion</td>
                 <td class="auto-style34">
                     <input name="TextBoxR" type="text" id="TextBoxR" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxR" data-val-errormessage="Religion is Mandatory" id="RequiredFieldValidator15" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Religion is Mandatory</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style16">Business/Job</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListBJ">
	<tr>
		<td><input id="RadioButtonListBJ_0" type="radio" name="RadioButtonListBJ" value="Business" /><label for="RadioButtonListBJ_0">Business</label></td><td><input id="RadioButtonListBJ_1" type="radio" name="RadioButtonListBJ" value="Job" /><label for="RadioButtonListBJ_1">Job</label></td>
	</tr>
</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style16">Married/UnMarried</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListMU">
	<tr>
		<td><input id="RadioButtonListMU_0" type="radio" name="RadioButtonListMU" value="Married" /><label for="RadioButtonListMU_0">Married</label></td><td><input id="RadioButtonListMU_1" type="radio" name="RadioButtonListMU" value="Unmarried" /><label for="RadioButtonListMU_1">Unmarried</label></td>
	</tr>
</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
            <tr>
                <td class="auto-style9">No Of Members</td>
                <td class="auto-style34">
                    <input name="TextBoxNOM" type="text" id="TextBoxNOM" />
                </td>
                <td>
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Number Of Members is Required" id="RequiredFieldValidator7" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Number Of Members is Required</span>
                    <br />
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Only Numbers are allowed" id="RegularExpressionValidator5" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^\d+$" style="color:Red;visibility:hidden;">Only Numbers are allowed</span>
                </td>
            </tr>
            <tr>
                <td class="auto-style9">Joining Date</td>
                <td class="auto-style34">
                    <input name="TextBoxJ" type="text" id="TextBoxJ" onclick="SetDate()" />
                </td>
                <td>
                    <span data-val-controltovalidate="TextBoxJ" data-val-errormessage="Date is Required" id="RequiredFieldValidator18" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Date is Required</span>
                </td>
            </tr>
        </table>
            <br />
            <br />


        <input type="submit" name="Button1" value="Update Dtabase" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button1" style="height:62px;width:323px;" />
        
            <br />
            <br />
            <br />
            <br />
            <br />
        <a id="HyperLink1" href="webform1.aspx">Go To Menu</a>
        </div>
        
    </form>
    
    
    <script>
        function SetDate() {
            var date = new Date();

            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();

            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;

            var today = month + "/" + day + "/" + year;


            document.getElementById('TextBoxJ').value = today;
        }


       
       
</script>
    <script>
       $(function () {
           $('#TextBoxJ').mouseout(function () {
               //This function call on text change.             
                // Check if the joindate is 
                if (new Date($('#HiddenFieldLD').val()) > new Date($(this).val())) {
                    alert('Invalid Date');
                    return false;
                }
 });
       });
</script>
</body>
</html>

Open in new window

Julian HansenCommented:
You are still including jQuery more than once
Also only include one instance of moment.js - either the uncompressed or the minified but not both.

Then if you look at this code
    $(function () {
        $('.manual1').change(function () {
            setAge1(moment($(this).val()));
        });
    });

Open in new window

It is looking for a class manual1 - there is no such class in your document the class you want is manual - without the 1

Then in your setAge
    function setAge1(d) {
        var age1 = moment().diff(d, 'years');
        $('#TextBoxA1').val(age1);
    }

Open in new window


You refer to TextBoxA1 - again no such id in the document - the id is TextBoxA

Fix the above and it works.
Sukesh ShuklaAuthor Commented:
Hi
 TextBox1 , I have used in my Family_Member panel..... I corrected all the things as you mentioned but still not working ....  And the texbox is binded with calender using

 
 protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            TextBoxDOB.Text = Calendar1.SelectedDate.ToString("dd/MM/yyyy");
            Calendar1.Visible = false;
        }

Open in new window

Sukesh ShuklaAuthor Commented:
Julian HansenCommented:
I cannot work with aspx and .cs files for this - please post rendered HTML.
Sukesh ShuklaAuthor Commented:
Rendered HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">

        .auto-style8 {
            width: 100%;
            background-color: #CCFFFF;
        }
        .auto-style9 {
            width: 341px;
            text-align: center;
        }
        .auto-style10 {
            width: 341px;
            height: 26px;
            text-align: center;
        }
        .auto-style11 {
            height: 26px;
        }
        .auto-style12 {
            width: 341px;
            height: 23px;
        }
        .auto-style13 {
            height: 23px;
        }
        .auto-style16 {
            width: 341px;
            text-align: center;
            height: 23px;
        }
        .auto-style21 {
            width: 341px;
            height: 24px;
            text-align: center;
        }
        .auto-style22 {
            height: 24px;
            width: 168px;
        }
        .auto-style23 {
            height: 24px;
        }
        .auto-style24 {
            color: #FF0000;
        }
        .auto-style31 {
            width: 128px;
        }
        .auto-style32 {
            height: 26px;
            width: 128px;
        }
        .auto-style33 {
            width: 128px;
            height: 23px;
        }
        .auto-style34 {
            width: 168px;
        }
        .auto-style35 {
            height: 26px;
            width: 168px;
        }
        .auto-style36 {
            width: 168px;
            height: 23px;
        }
        .auto-style37 {
            height: 26px;
            width: 168px;
            color: #FF0000;
        }
  </style>
    <script type="text/javascript">

        function myFunction() {

            alert("You have exceeded the members entered");
            }
</script>

<script type="text/javascript" src="scripts/jquery.js"></script>   
<script type="text/javascript" src="scripts/moment.min.js"></script>
<script type="text/javascript" src="scripts/moment.js"></script>
    
<script>
    function setAge(d) {
        var age = moment().diff(d, 'years');
        $('#age').val(age);
    }

    $(function () {
        $('.manual').change(function () {
            setAge(moment($(this).val()));
        });
    });

        function setAge1(d) {
            var age1 = moment().diff(d, 'years');
            $('#TextBoxA1').val(age1);
        }

        $(function () {
            $('.manual1').change(function () {
                setAge1(moment($(this).val()));
            });
        });
</script>
    <script type="text/javascript">
        function SetDate() {
            var date = new Date();

            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();

            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;

            var today = month + "/" + day + "/" + year;


            document.getElementById('TextBoxJ').value = today;
        }
</script>
</head>
<body style="background-color: #CCFFFF">
    <form method="post" action="add_pmember.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form2">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="NbLRITltpkGZHWjLlbofPeesdbMnaeTQ89P+1ZGIvU2qH2aAZcedEp2TjTcZ6JDTBXpfMsjkdXRJxtNklnfYHWsZETbpX7TtQ5LcAgsIN3moyDfjm+44jfAjtClLVHAZl3Zx26734+FlbRtoy7EE/6qSV/4taFwUG2WrWPxsfiJko1K7WYP8F3Hu9zbSBfgqfyZgytG8FJmwK6yqvpNHxEI0mpO6CNTbHmUblMa1LCwxL2MgsJ1/o0V9jtwudd2g/Hcwy2JKIhTwdot+3N/UIecavXPgvp4rLwUJdK1JDsn/HYoRUEaHP00t/AiD1UAVsZCI+bp9DAzxINEmEhq1GbQa2i2s0/RoY1cgZp+XqDSbS7HF8aUljjpICMDZgmlnEamhxEuUC10Tfvk8nFPQueilSPLgUrQ3bzJvU50LunUjNRsKOhbQb7gF9f4c7X8FV5HkL2C4o4iVMJEOOV8i5yH0U+TIwS0fdKSanZ26Z4s=" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form2'];
if (!theForm) {
    theForm = document.form2;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZCErUIiy0FccU42WH3R0u--CN1Jpl8tXLOXbLTNp_FIXJfC4VDiTZJY1l2ou5pl0dw2&amp;t=634773918900000000" type="text/javascript"></script>


<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakPMYMZwQliPogleR8Jncs5Te0dqLYv8NHCY2aOdJRHcrcyPcCWkHq3sGXU9sQI23Mi-gbnQx3JHNM8eFN6fzaH81&amp;t=634773918900000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="6nxIXFIFIKqS+PsAnp1HRc4cUCnza2HfmFsETozRu5HtcacJzt7s7k8u6ZZ9Ten9mW9vYHpfHPzgktkgQuwLURhf27g12Nr/cuTZ6Rpgle/QVuwQu5ybEdkbRsYIJJoqpHJJlnzDJPYn0fK+7Bni2XGz9/AkdhDCRjOVWvyG+I4yx2lVQSZfZR1mYNkB51jCS/RS1v5SKyZSSjMOk0/dAIpJGh7HjCp9DC7qpZYCHTsfkTmKA38l+UVk0G+wXy9RnLjj/oQc4VUgkzFHLvPVhKgIIOb6OeHKv3wdhaaSewu6gpOClCXdvU91+7OtClkfTiEsnU3MhV6y7mO2W0SvQA3G9+v3nxYhCXCxcczmCwDKqxQ1LrSWuotBNytCFwdSCcFAh462udG2CAFhIIr+xkA8tPmaYqRRQ4STA4lXfeGRxTZ17PwXkigIPS+yLVnTKypwCVogH589KiBbXMS+0+/xroeagb9VDerN+WC+h4vWxsuZfQANUehTXIj93NBdReuVWTKNefUHTdSiwzP/+vh0BmaMRwvtKsCDYo/js9dQrnXWWFsbiQCFci51++rAEAGba8R/xybWQIaEw/uDKj28B9XtK+B/g5VAw5l3pP6QdisT4ZQ32YSVZbZle6yPV0euyzZtM0dJf1l4xsF+DilPgwpkTE+ARvDZ7CIbT7ZS+As+8paQe1nWamZ8Uc7kRWZ6lpjL5NAslCw0w58fKNHu+b432VLZV0qgm9lGknAiIUl4lvVFZF8j6BntpJIQHZ3N3jQbLgc2npY7Wmmfqw==" />
</div>
        <div id="Primary_Panel" style="background-color: #CCFFFF">
	
         <table class="auto-style8" cellpadding ="5px">
            <tr>
                <td class="auto-style21">Flat Number</td>
                <td class="auto-style22">
                    <select name="DropDownListFN" id="DropDownListFN" onchange="FlatAvailability()">
		<option selected="selected" value="101">101</option>
		<option value="102">102</option>
		<option value="103">103</option>
		<option value="104">104</option>
		<option value="105">105</option>
		<option value="107">107</option>
		<option value="106">106</option>
		<option value="404">404</option>

	</select>
                </td>
                <td class="auto-style23">
                    <span id="lblStatus"></span>
                </td>
            </tr>
            <tr>
                <td class="auto-style9">First_Name</td>
                <td class="auto-style34">
                    <input name="TextBoxFN" type="text" value="Nidhi" id="TextBoxFN" />
                </td>
                <td>
                    &nbsp;<span data-val-controltovalidate="TextBoxFN" data-val-errormessage="First Name is Required" id="RequiredFieldValidator3" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">First Name is Required</span>
                    <br />
                </td>
            </tr>
            <tr>
                <td class="auto-style9">Middle_Name</td>
                <td class="auto-style34">
                    <input name="TextBoxMN" type="text" id="TextBoxMN" />
                </td>
                
            </tr>
             <tr>
                 <td class="auto-style9">Last_Name</td>
                 <td class="auto-style34">
                     <input name="TextBoxLN" type="text" value="Tripathi" id="TextBoxLN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxLN" data-val-errormessage="Last Name is Required" id="RequiredFieldValidator16" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Last Name is Required</span>
                     <br />
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Mobile Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxMO" type="text" value="8602404166" id="TextBoxMO" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxMO" data-val-errormessage="Mobile Number is Required" id="RequiredFieldValidator4" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Mobile Number is Required</span>
                     <br />
                 </td>
             </tr>
            <tr>
                <td class="auto-style10">Email</td>
                <td class="auto-style35">
                    <input name="TextBoxE" type="text" value="nidhi@indweb.com" id="TextBoxE" />
                </td>
                <td class="auto-style11">
                    <span data-val-controltovalidate="TextBoxE" data-val-focusOnError="t" data-val-errormessage="Invalid Email" id="RegularExpressionValidator1" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="\w+([-+.&#39;]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" style="color:Red;visibility:hidden;">Invalid Email</span>
                </td>
            </tr>
            <tr>
                <td class="auto-style10">Date Of Birth</td>
                <td class="auto-style35">
                    <input name="TextBoxDOB" type="text" value="29/10/2015" id="TextBoxDOB" Class="manual" />
                    <input type="image" name="ImageButton1" id="ImageButton1" src="Images/wxcal.jpg" style="height:37px;width:57px;position: relative; top: -23px; left: 0px; margin-left: 137px" />
                </td>
                 <td class="auto-style37">
                     
                </td>
               
                
            </tr>
            <tr>
                <td class="auto-style9">Age</td>
                <td class="auto-style34">
                    <input name="age" type="text" id="age" />
                </td>
                <td>
                     <span data-val-controltovalidate="age" data-val-errormessage="Age is required" id="RequiredFieldValidator2" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Age is required</span>
                 </td>
            </tr>
             <tr>
                 <td class="auto-style16">Educational Qualification</td>
                 <td class="auto-style36">
                     <input name="TextBoxEQ" type="text" id="TextBoxEQ" />
                 </td>
                 <td class="auto-style13"></td>
             </tr>
             <tr>
                 <td class="auto-style9">Office Address</td>
                 <td class="auto-style34">
                     <textarea name="TextBoxOA" rows="2" cols="20" id="TextBoxOA">
</textarea>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Native Address</td>
                 <td class="auto-style34">
                     <input name="TextBoxNA" type="text" id="TextBoxNA" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxNA" data-val-errormessage="Native Address is required" id="RequiredFieldValidator5" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Native Address is required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">PAN Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxPCN" type="text" id="TextBoxPCN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxPCN" data-val-errormessage="PAN Card No Is Required" id="RequiredFieldValidator13" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">PAN Card No Is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Aadhar Card Number</td>
                 <td class="auto-style34">
                     <input name="TextBoxACN" type="text" id="TextBoxACN" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxACN" data-val-errormessage="Aadhar number is Required" id="RequiredFieldValidator14" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Aadhar number is Required</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style9">Religion</td>
                 <td class="auto-style34">
                     <input name="TextBoxR" type="text" id="TextBoxR" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxR" data-val-errormessage="Religion is Mandatory" id="RequiredFieldValidator15" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Religion is Mandatory</span>
                 </td>
             </tr>
             <tr>
                 <td class="auto-style16">Business/Job</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListBJ">
		<tr>
			<td><input id="RadioButtonListBJ_0" type="radio" name="RadioButtonListBJ" value="Business" /><label for="RadioButtonListBJ_0">Business</label></td><td><input id="RadioButtonListBJ_1" type="radio" name="RadioButtonListBJ" value="Job" /><label for="RadioButtonListBJ_1">Job</label></td>
		</tr>
	</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
             <tr>
                 <td class="auto-style16">Married/UnMarried</td>
                 <td class="auto-style36">
                     <table id="RadioButtonListMU">
		<tr>
			<td><input id="RadioButtonListMU_0" type="radio" name="RadioButtonListMU" value="Married" /><label for="RadioButtonListMU_0">Married</label></td><td><input id="RadioButtonListMU_1" type="radio" name="RadioButtonListMU" value="Unmarried" /><label for="RadioButtonListMU_1">Unmarried</label></td>
		</tr>
	</table>
                 </td>
                 <td class="auto-style13">
                     &nbsp;</td>
             </tr>
            <tr>
                <td class="auto-style9">No Of Members</td>
                <td class="auto-style34">
                    <input name="TextBoxNOM" type="text" id="TextBoxNOM" />
                </td>
                <td>
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Number Of Members is Required" id="RequiredFieldValidator7" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Number Of Members is Required</span>
                    <br />
                    <span data-val-controltovalidate="TextBoxNOM" data-val-errormessage="Only Numbers are allowed" id="RegularExpressionValidator5" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid" data-val-validationexpression="^\d+$" style="color:Red;visibility:hidden;">Only Numbers are allowed</span>
                </td>
            </tr>
             <tr>
                 <td class="auto-style9">Joining Date</td>
                 <td class="auto-style34">
                     <input name="TextBoxJ" type="text" id="TextBoxJ" onclick="SetDate()" />
                 </td>
                 <td>
                     <span data-val-controltovalidate="TextBoxJ" data-val-errormessage="Joining Date is Required" id="RequiredFieldValidator21" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="color:Red;visibility:hidden;">Joining Date is Required</span>
                 </td>
             </tr>
            <tr>
                <td class="auto-style12" colspan="1">
                    <input type="submit" name="Button1" value="ADD" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button1" style="text-align: center" />
               </td>
                <td class="auto-style34">
                    <input type="submit" name="Button3" value="Family Member Details" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button3&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="Button3" />
                    
                   
                </td>
                <td class="auto-style13"></td>
                <td class="auto-style13"></td>
            </tr>
        </table>
         
</div>
        
        <p>
            
        </p>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a id="HyperLink1" href="webform1.aspx">Go To Menu</a>
        </p>

        
      <script src="../Scripts/jquery-1.7.1.min.js"></script>  
  
    <script type="text/javascript">

        function FlatAvailability() {
            //This function call on text change.             
            $.ajax({
                type: "POST",
                url: "add_pmember.aspx/CheckFlat", // this for calling the web method function in cs code.  
                data: '{flat: "' + $("#DropDownListFN")[0].value + '"}',// flat name 
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                }
            });
        }

        // function OnSuccess  
        function OnSuccess(response) {
            var msg = $("#lblStatus")[0];
            switch (response.d) {
                case "true":
                    msg.style.display = "block";
                    msg.style.color = "red";
                    msg.innerHTML = "Flat Detail Already  exists.";
                    break;
                case "false":
                    msg.style.display = "block";
                    msg.style.color = "green";
                    msg.innerHTML = "";
                    break;
            }
        }

        </script>
    
   
    </form>

         
</body>
</html>

Open in new window

Julian HansenCommented:
Take a look at that HTML - you will see the same problems exist - you are binding to id's and classes that don't exists.

Do a find on TextBoxA1
Do a find on manual

You will see the only places those are defined is in your JavaScript - they don't refer to anything in your HTML. That is why your code is not working.

I did highlight this in my earlier post.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.