I have an input textbox called idno. Based on an id number added to this textbox, i want to populate 3 other input textboxes using a jquery function that is functional.
My problem is that i need to populate the input text boxes called age,birthdate and gender dynamically from the textbox called idno. Please assist this javascript beginner
This short javascript/jquery code output correct info to the screen when i use it :
<script>
$().ready(function() {
$('#idno').rsa_id_validator({
});
});
</script>
(function($){
$.fn.rsa_id_validator = function(options) {
var defaults = {
displayValid: [true,"<font color='#00CC00'>IDNo Valid</font>","<font color='#FF0000'>IDNo InValid</font>"],
displayDate: [true,"<b>Date of Birth:</b> "],
displayAge: [true,"<b>Age:</b> "],
displayGender: [true,"<b>Gender:</b> Male","<b>Gender:</b> Female"],
displayCitizenship: [true,"<b>Citizenship:</b> South African","<b>Citizenship:</b> Foreign Citizenship"],
displayValid_id: "id_results",
displayDate_id: "id_results",
displayAge_id: "id_results",
displayGender_id: "id_results",
displayCitizenship_id: "id_results"
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
$(obj).attr('maxlength','13');
$(obj).keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
$(obj).bind("keyup", function(){
//error array creation variables
var displayResults = [" "," "," "," "," "];
var html = "";
//Variable declaration
var element_type = "";
var currentTime = new Date();
var id_number = $(this).val();
//display date of birth
if(options.displayDate[0] == true){ //start if statement
if (id_number.length > 5){ //start if statement
var date = "";
var year = id_number.substr ( 0 , 2 );
var nowYearNotCentury = currentTime.getFullYear() + '';
nowYearNotCentury = nowYearNotCentury.substr(2,2);
if (year <= nowYearNotCentury){
date = '20' + year+ "-" + id_number.substr(2, 2) + "-" + id_number.substr(4, 2);
} else {
date = '19' + year+ "-" + id_number.substr(2, 2) + "-" + id_number.substr(4, 2);
}//end if
displayResults[1] = options.displayDate[1] + date +"<br/>,";
}//end if
}//end if
//display age
if(options.displayAge[0] == true){ //start if statement
if (id_number.length > 5){ //start if statement
var year = id_number.substr ( 0 , 2 );
var nowYearNotCentury = currentTime.getFullYear() + '';
nowYearNotCentury = nowYearNotCentury.substr(2,2);
if (year <= nowYearNotCentury){
year = '20' + year;
} else {
year = '19' + year;
}//end if
var birthDate = new Date(year);
var age = currentTime.getFullYear() - birthDate.getFullYear();
var m = currentTime.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && currentTime.getDate() < birthDate.getDate())) {
age--;
}
displayResults[2] = options.displayAge[1]+ age +"<br/>,";
}//end if
}//end if
//display gender
if(options.displayGender[0] == true){ //start if statement
if (id_number.length > 9){ //start if statement
var MaleFemale = id_number.substr(6, 4);
MaleFemale = (MaleFemale * 1) + 0;
if ((MaleFemale >= 0) & (MaleFemale < 5000)){
displayResults[3] = options.displayGender[2]+"<br/>,";
}//end if
if ((MaleFemale > 4999) & (MaleFemale < 10000)){
displayResults[3] = options.displayGender[1]+"<br/>,";
}//end if
}//end if
}//end if
//display citizenship
if(options.displayCitizenship[0] == true){ //start if statement
if (id_number.length > 12){ //start if statement
var citizen = (id_number.substr ( 10 , 2 )*1);
if ((citizen == 8) || (citizen == 9)){
displayResults[4] = options.displayCitizenship[1]+"<br/>,";
}
else if ((citizen == 18) || (citizen < 19)){
displayResults[4] = options.displayCitizenship[2]+"<br/>,";
}//end if
}//end if
}//end if
//check validility of IDNO
if(options.displayValid[0] == true){ //start if statement
if (id_number.length == 13){ //start if statement
var testResult = ValidateID(id_number);
if (testResult[0] == 1){
displayResults[0] = options.displayValid[1]+'<br/>,';
} else {
var errorMessage = '';
for( count = 0 ; count < testResult[2].length ; count++ )
errorMessage += testResult[2][count] + '';
displayResults[0] = options.displayValid[2] + ": " + errorMessage +'<br/>,';
}//end if
}//end if
}//end if
//display function
if(options.displayValid_id != "id_results"){
element_type = $("#"+options.displayValid_id).get(0).tagName;
displayResults[0] = displayResults[0].replace(/(<.*?>)/ig,"");
displayResults[0] = displayResults[0].replace(/,/g , "");
if(element_type == "DIV"){
$("#"+options.displayValid_id).html(displayResults[0]);
}else if(element_type == "INPUT"){
$("#"+options.displayValid_id).val(displayResults[0]);
}else if(element_type == "SELECT"){
$("#"+options.displayValid_id).val(displayResults[0]);
}else if(element_type == "SPAN"){
$("#"+options.displayValid_id).text(displayResults[0]);
}
}else{
if(displayResults[0] != " "){
html = html+displayResults[0];
}
}
if(options.displayDate_id != "id_results"){
element_type = $("#"+options.displayDate_id).get(0).tagName;
displayResults[1] = displayResults[1].replace(/(<.*?>)/ig,"");
displayResults[1] = displayResults[1].replace(/,/g , "");
if(element_type == "DIV"){
$("#"+options.displayDate_id).html(displayResults[1]);
}else if(element_type == "INPUT"){
$("#"+options.displayDate_id).val(displayResults[1]);
}else if(element_type == "SELECT"){
$("#"+options.displayDate_id).val(displayResults[1]);
}else if(element_type == "SPAN"){
$("#"+options.displayDate_id).text(displayResults[1]);
}
}else{
if(displayResults[1] != " "){
html = html+displayResults[1];
}
}
if(options.displayAge_id != "id_results"){
element_type = $("#"+options.displayAge_id).get(0).tagName;
displayResults[2] = displayResults[2].replace(/(<.*?>)/ig,"");
displayResults[2] = displayResults[2].replace(/,/g , "");
if(element_type == "DIV"){
$("#"+options.displayAge_id).html(displayResults[2]);
}else if(element_type == "INPUT"){
$("#"+options.displayAge_id).val(displayResults[2]);
}else if(element_type == "SELECT"){
$("#"+options.displayAge_id).val(displayResults[2]);
}else if(element_type == "SPAN"){
$("#"+options.displayAge_id).text(displayResults[2]);
}
}else{
if(displayResults[2] != " "){
html = html+displayResults[2];
}
}
if(options.displayGender_id != "id_results"){
element_type = $("#"+options.displayGender_id).get(0).tagName;
displayResults[3] = displayResults[3].replace(/(<.*?>)/ig,"");
displayResults[3] = displayResults[3].replace(/,/g , "");
if(element_type == "DIV"){
$("#"+options.displayGender_id).html(displayResults[3]);
}else if(element_type == "INPUT"){
$("#"+options.displayGender_id).val(displayResults[3]);
}else if(element_type == "SELECT"){
$("#"+options.displayGender_id).val(displayResults[3]);
}else if(element_type == "SPAN"){
$("#"+options.displayGender_id).text(displayResults[3]);
}
}else{
if(displayResults[3] != " "){
html = html+displayResults[3];
}
}
if(options.displayCitizenship_id != "id_results"){
element_type = $("#"+options.displayCitizenship_id).get(0).tagName;
displayResults[4] = displayResults[4].replace(/(<.*?>)/ig,"");
displayResults[4] = displayResults[4].replace(/,/g , "");
if(element_type == "DIV"){
$("#"+options.displayCitizenship_id).html(displayResults[4]);
}else if(element_type == "INPUT"){
$("#"+options.displayCitizenship_id).val(displayResults[4]);
}else if(element_type == "SELECT"){
$("#"+options.displayCitizenship_id).val(displayResults[4]);
}else if(element_type == "SPAN"){
$("#"+options.displayCitizenship_id).text(displayResults[4]);
}
}else{
if(displayResults[4] != " "){
html = html+displayResults[4];
}
}
if($("#id_results").length != 0){
$('#id_results').html(html.replace(/,/g , ""));
}else{
html = html.replace(/(<.*?>)/ig,"");
html = html.replace(/,/g , "\n");
if (id_number.length == 13){
alert(html);
}
}
});//end of function
function ValidateID(id_number){
var sectionTestsSuccessFull = 1;
var MessageCodeArray = [];
var MessageDescriptionArray = [];
var currentTime = new Date();
/* DO ID LENGTH TEST */
if (id_number.length == 13){
/* SPLIT ID INTO SECTIONS */
var year = id_number.substr ( 0 , 2 );
var month = id_number.substr ( 2 , 2 );
var day = id_number.substr ( 4 , 2 );
var gender = (id_number.substr ( 6 , 4 )*1);
var citizen = (id_number.substr ( 10 , 2 )*1);
var check_sum = (id_number.substr ( 12 , 1 )*1);
/* DO YEAR TEST */
var nowYearNotCentury = currentTime.getFullYear() + '';
nowYearNotCentury = nowYearNotCentury.substr(2,2);
if (year <= nowYearNotCentury){
year = '20' + year;
} else {
year = '19' + year;
}//end if
if ((year > 1900) && (year < currentTime.getFullYear())){
//correct
} else {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 1;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Year is not valid, ';
}//end if
/* DO MONTH TEST */
if ((month > 0) && (month < 13)){
//correct
} else {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 2;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Month is not valid, ';
}//end if
/* DO DAY TEST */
if ((day > 0) && (day < 32)){
//correct
} else {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 3;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Day is not valid, ';
}//end if
/* DO DATE TEST */
if ((month==4 || month==6 || month==9 || month==11) && day==31) {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 4;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Date not valid. This month does not have 31 days, ';
}
if (month == 2) { // check for february 29th
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day > 29 || (day==29 && !isleap)) {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 5;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Date not valid. February does not have ' + day + ' days for year ' + year +', ';
}//end if
}//end if
/* DO GENDER TEST */
if ((gender >= 0) && (gender < 10000)){
//correct
} else {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 6;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Gender is not valid, ';
}//end if
/* DO CITIZEN TEST */
//08 or 09 SA citizen
//18 or 19 Not SA citizen but with residence permit
if ((citizen == 8) || (citizen == 9) || (citizen == 18) || (citizen == 19)){
//correct
} else {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 7;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Citizen value is not valid, ';
}//end if
/* GET CHECKSUM VALUE */
var check_sum_odd = 0;
var check_sum_even = 0;
var check_sum_even_temp = "";
var check_sum_value = 0;
var count = 0;
// Get ODD Value
for( count = 0 ; count < 11 ; count += 2 ){
check_sum_odd += (id_number.substr ( count , 1 )*1);
}//end for
// Get EVEN Value
for( count = 0 ; count < 12 ; count += 2 ){
check_sum_even_temp = check_sum_even_temp + (id_number.substr ( count+1 , 1 )) + '';
}//end for
check_sum_even_temp = check_sum_even_temp * 2;
check_sum_even_temp = check_sum_even_temp + '';
for( count = 0 ; count < check_sum_even_temp.length ; count++ ){
check_sum_even += (check_sum_even_temp.substr( count , 1 ))*1;
}//end for
// GET Checksum Value
check_sum_value = (check_sum_odd*1) + (check_sum_even*1);
check_sum_value = check_sum_value + 'xxx';
check_sum_value = ( 10 - (check_sum_value.substr( 1 , 1 )*1) );
if(check_sum_value == 10)
check_sum_value = 0;
/* DO CHECKSUM TEST */
if(check_sum_value == check_sum){
//correct
} else {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 8;
MessageDescriptionArray[MessageDescriptionArray.length] = 'Checksum is not valid, ';
}//end if
} else {
sectionTestsSuccessFull = 0;
MessageCodeArray[MessageCodeArray.length] = 0;
MessageDescriptionArray[MessageDescriptionArray.length] = 'IDNo is not the right length, ';
}//end if
var returnArray = [ sectionTestsSuccessFull, MessageCodeArray, MessageDescriptionArray];
return returnArray;
}//end function
});
};
})(jQuery);
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.rsa_id_validator.js"></script>
<script>
$().ready(function() {
$('#idno').rsa_id_validator({
displayAge: [true,""],
displayDate_id: "date",
displayAge_id: "age",
displayGender_id: "gender",
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<form>
<input type="text" name="idno" id="idno" size = "60" placeholder="Add the ID No of person here ie 5102185149089" />
<input type="text" name="date" id="date" placeholder="birthdate"/>
<input type="text" name="gender" id="gender" placeholder="gender">
<input type="text" name="age" id="age" placeholder="Age">
</form>
</body>
</html>