javascript - how to automatically populate the age field after entering dob filed in jsp.? - Stack Overflow

admin管理员组

文章数量:1401826

My jsp code is as follows:(A simple registartion from with fields)

 <label>DOB</label></td><td><input type="text" name="dob" /> </td></tr>
 <tr><td>
 <label>AGE</label></td><td><input type="text" name="age" onclick =" ageCount()"/> </td></tr>
 <tr><td>
 <label>GENDER</label></td><td><input type="radio" name="gender" value="Male"/>Male<input    
  type="radio" name="gender" value="Female">Female</td></tr>
 <tr><td>

I used a function in JS to calculate the age from dob! Dob is in sql Date format.

<script type="text/javascript">
function ageCount(){
var date1 = new date();
var dob = document.getElementById("dob").value;
var date2 = new date(dob);
var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/; 
if(pattern.test(dob)){
    var y1 = date1.getFullYear();
    var y2 = date2.getFullYear();
    var age = y1-y2;
    document.write("Age :" +age);
    return true;
}else{
    alert("invalid date fromat.!! Please enter in (DD/MM/YYYY) format");
    return false;
}
     }


     </script>

how do i use this so that when i enter the dob and press tab the age should be displayed in its field. Drop in your ideas and suggestions.

My jsp code is as follows:(A simple registartion from with fields)

 <label>DOB</label></td><td><input type="text" name="dob" /> </td></tr>
 <tr><td>
 <label>AGE</label></td><td><input type="text" name="age" onclick =" ageCount()"/> </td></tr>
 <tr><td>
 <label>GENDER</label></td><td><input type="radio" name="gender" value="Male"/>Male<input    
  type="radio" name="gender" value="Female">Female</td></tr>
 <tr><td>

I used a function in JS to calculate the age from dob! Dob is in sql Date format.

<script type="text/javascript">
function ageCount(){
var date1 = new date();
var dob = document.getElementById("dob").value;
var date2 = new date(dob);
var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/; 
if(pattern.test(dob)){
    var y1 = date1.getFullYear();
    var y2 = date2.getFullYear();
    var age = y1-y2;
    document.write("Age :" +age);
    return true;
}else{
    alert("invalid date fromat.!! Please enter in (DD/MM/YYYY) format");
    return false;
}
     }


     </script>

how do i use this so that when i enter the dob and press tab the age should be displayed in its field. Drop in your ideas and suggestions.

• javascript
• html

Share Improve this question Follow edited May 14, 2013 at 7:03 AlexR 115k1616 gold badges134134 silver badges212212 bronze badges asked May 14, 2013 at 7:00 ranjaniranjani 3511 gold badge11 silver badge66 bronze badges 3

• 2 once again java != javascript – Subhrajyoti Majumder Commented May 14, 2013 at 7:02
• 1 Since there is nothing about java here I am re-tagging this question. – AlexR Commented May 14, 2013 at 7:03
• Sorry and thanks for editing !! – ranjani Commented May 14, 2013 at 7:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

<input type="text" name="dob" onBlur="getAge(this.value)"/>
<input type="text" name="age" id="ageId"/>

function getAge(birthDate){

  var birthDate= new Date(birthDate);
   var  currentDate= new Date();

    var years = (otherDate.getFullYear() - birthDate.getFullYear());

    if (currentDate.getMonth() < birthDate.getMonth() || 
        currentDate.getMonth() == birthDate.getMonth() && currentDate.getDate() < birthDate.getDate()) {
        years--;
    }
$('#ageId').val(years);

} If the current month less than birth month or equal and currentdate is lessthan birth date i am decreasing years the value

Hey guys thanks for ur time working on my issue!!

I have solved it myself with a few changes here and there.

The modified code :( might help others if need be)

<script type="text/javascript">
function ageCount() {
    var date1 = new Date();
    var dob = document.getElementById("dob").value;
    var date2 = new Date(dob);
    var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
    //Regex to validate date format (dd/mm/yyyy)       
    if (pattern.test(dob)) {
        var y1 = date1.getFullYear();
        //getting current year            
        var y2 = date2.getFullYear();
        //getting dob year            
        var age = y1 - y2;
        //calculating age                       
        document.getElementById("ageId").value = age;
        doucment.getElementById("ageId").focus ();
        return true;
    } else {
        alert("Invalid date format. Please Input in (dd/mm/yyyy) format!");
        return false;
    }

}

<tr>
                    <td><label>DOB</label></td>
                    <td><input type="text" name="dob" id="dob"
                        onblur="ageCount()" /></td>
                </tr>
                <tr>
                    <td><label>AGE</label></td>
                    <td><input type="text" name="age" id="ageId" /></td>
                </tr>

try this

<script type="text/javascript">
function ageCount() {
var today = new Date();
var date1 = document.getElementById("dob").value;
var dob = new Date(date1);  
var month = dob.getMonth();
    var day = dob.getDate();  
    var age = today.getFullYear() - dob.getFullYear();
    if (today.getMonth() < month || (today.getMonth() == month && today.getDate() < day))
    {
      age--;
     }                
if(age < 0)
{
alert ("Invalid Date of Birth");    
return false;
}
else
{
    document.getElementById("age").value = age;
    doucment.getElementById("age").focus ();
    alert(age);
    return true;
}
}
</script>    

You can use unBlur() function , when you control leave the focus from text box your JavaScript method should be called.

Like this :-

<input type="text" name="age" onblur="ageCount()"/>

Now inside your JavaScript you can calculate the age and display.

<script type="text/javascript">
    // Your ageCount() for calculate AGE and display AGE
</script>

本文标签： javascripthow to automatically populate the age field after entering dob filed in jspStack Overflow