Sukesh Shukla
asked on
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
add_flat.aspx
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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>ASKER
Yes , I did the following steps and the script did work properly......
Thanks a lot Julian Hansen for your help..... :)
Thanks a lot Julian Hansen for your help..... :)
You are most welcome - good luck with your project.
ASKER
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
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
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
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));
});ASKER
Scince I'm a beginner could you help me with that too , as to how to ensure the correct date Format
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
<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');
}
});ASKER
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
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
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?
Do you not have a link I can look at - debugging from source is slow and painful?
ASKER
Hi Julian
I have uploaded the project at nidhitripathi.in/sample...
Kindly check
I have uploaded the project at nidhitripathi.in/sample...
Kindly check
That link points to a directory with 1 item.
Do you have a link where I can see the code actually working.
Do you have a link where I can see the code actually working.
ASKER
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
Presently i'm using localhost only....
You can download it and run on your localhost to check
You can download it and run on your localhost to checkUnfortunately 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
ASKER
Ok , thanks for your time Julian Hansen
Where in your ASPX file are you binding the calendar control to DOBI want to try and use the same process in my script and see if that yields any information.
ASKER
//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
{
TextBoxDOB.Text = Calendar1.SelectedDate.ToS
Calendar1.Visible = false;
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
if (Calendar1.Visible)
{
Calendar1.Visible = false;
}
else
{
Calendar1.Visible = true;
}
}
protected void Calendar1_SelectionChanged
{
TextBoxDOB.Text = Calendar1.SelectedDate.ToS
Calendar1.Visible = false;
}
How does that render out? Can you do a view source of your page and paste the HTML.
ASKER
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>
<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">
</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">
</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>
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.
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.
ASKER
<!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&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&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>
<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+([-+.']\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">
</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">
</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("Button1", "", true, "", "", 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("Button3", "", true, "", "", false, false))" id="Button3" />
</td>
<td class="auto-style13"></td>
<td class="auto-style13"></td>
</tr>
</table>
</div>
<p>
</p>
<p>
<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>
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
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
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>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&t=634773918900000000
/WebResource.axd?d=x2nkrMJGXkMELz33nwnakPMYMZwQliPogleR8Jncs5Te0dqLYv8NHCY2aOdJRHcrcyPcCWkHq3sGXU9sQI23Mi-gbnQx3JHNM8eFN6fzaH81&t=634773918900000000ASKER
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>
</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">
</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">
</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>
Please post rendered HTML - I am not able to work with your ASP code.
ASKER
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&fname=Raj&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&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&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>
</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+([-+.']\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">
</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">
</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("Button1", "", true, "", "", 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>
@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
You have not included the moment.js library - as soon as you add that the code works.
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()));You have not included the moment.js library - as soon as you add that the code works.
ASKER
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
Since i'm a beginner i don't have much idea about it
Right click the page
Select Inspect Element
Click console tab
Select Inspect Element
Click console tab
ASKER
I include moment.js , then also script does not work....
ASKER
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()));
});
});
I don't see moment.js in your latest post
you need to do
<script src="path_to_folder/moment
Somewhere before the code you just posted
you need to do
<script src="path_to_folder/moment
Somewhere before the code you just posted
ASKER
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&fname=R+L&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&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&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>
</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+([-+.']\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">
</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">
</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("Button1", "", true, "", "", 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>
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
Then in your setAge
You refer to TextBoxA1 - again no such id in the document - the id is TextBoxA
Fix the above and it works.
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()));
});
});Then in your setAge
function setAge1(d) {
var age1 = moment().diff(d, 'years');
$('#TextBoxA1').val(age1);
}You refer to TextBoxA1 - again no such id in the document - the id is TextBoxA
Fix the above and it works.
ASKER
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
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;
}
I cannot work with aspx and .cs files for this - please post rendered HTML.
ASKER
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&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&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>
<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+([-+.']\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">
</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">
</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("Button1", "", true, "", "", 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("Button3", "", true, "", "", false, false))" id="Button3" />
</td>
<td class="auto-style13"></td>
<td class="auto-style13"></td>
</tr>
</table>
</div>
<p>
</p>
<p>
<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>
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.
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.
ASKER
I applied that script , but its not working.... Kindly let me know the error.I'm attatching my page below
add_pmember.aspx