Auto-populating user info from database

Question

Auto populate user info from database when user inputs employee number. The same applies when the user inputs name/extension/mobile/email/

Some code is duplicated. Is there any way to make it shorter?

$(document).ready(function () {
 $("#empnum").change(function () {
 var fourdigitpatrn = /^[0-9]{4}$/;
 var idType = this.id;
 var myval = $.trim(this.value);
 if (myval == "" | myval.length < 3 ) return;
 if (fourdigitpatrn.exec(myval)) {
 myval ="EMP_"+myval;
 }
 if (myval.length) {
 $.ajax({
 contentType: "application/json; charset=utf-8",
 url: 'http://myserver.com/helpdesk/check_json.php',
 dataType: 'json',
 data: {type: 'empnum', term: myval},
 success: function (data) {
 if(typeof data == "undefined" | data == null | data.length == 0){
 alert("No Result");
 document.getElementById("form1").reset();
 return};
 //console.log(data);
 $("#empnum").val(data[0].empnum);
 $("#ext").val(data[0].extension);
 $("#omobile").val(data[0].omobile);
 $("#pmobile").val(data[0].pmobile);
 $("#ename").val(data[0].ename);
 $("#name").val(data[0].empnum);
 $("#email").val(data[0].email);
 },
 error: function (result) {
 alert("Error");
 }
 });
 }
 });
});
$(document).ready(function () {
 $("#ext").change(function () {
 var extpatrn=/^[0-9]{2,11}$/;
 var idType = this.id;
 var myval = $.trim(this.value);
 if (!extpatrn.exec(myval))
 {
 alert ("2~11 digits needed");
 return;
 }
 if (myval == "" | myval.length < 2 ) return;
 if (myval.length) {
 $.ajax({
 contentType: "application/json; charset=utf-8",
 url: 'http://myserver.com/helpdesk/check_json.php',
 dataType: 'json',
 data: {type: 'ext', term: myval},
 success: function (data) {
 if(typeof data == "undefined" | data == null | data.length == 0){
 alert("No Result");
 document.getElementById("form1").reset();
 return}; 
 //console.log(data);
 $("#empnum").val(data[0].empnum);
 $("#ext").val(data[0].extension);
 $("#omobile").val(data[0].omobile);
 $("#pmobile").val(data[0].pmobile);
 $("#ename").val(data[0].ename);
 $("#name").val(data[0].empnum);
 $("#email").val(data[0].email);
 },
 error: function (result) {
 alert("Error");
 }
 });
 }
 });
});
//similar script for auto populate on omobile/pmobile/email input
...
...
...

• Victor: if (myval == "" | myval.length < 3 ) return; could be simplified to if (myval.length < 3) return;

Answer 1

given that you duplicate nearly the whole $.ajax() call you can extract it into a function and add a parameter where it differs::

function doAjax(dataType, myval){
 $.ajax({
 contentType: "application/json; charset=utf-8",
 url: 'http://myserver.com/helpdesk/check_json.php',
 dataType: 'json',
 data: {type: dataType, term: myval},
 success: function (data) {
 if(typeof data == "undefined" | data == null | data.length == 0){
 alert("No Result");
 document.getElementById("form1").reset();
 return};
 //console.log(data);
 $("#empnum").val(data[0].empnum);
 $("#ext").val(data[0].extension);
 $("#omobile").val(data[0].omobile);
 $("#pmobile").val(data[0].pmobile);
 $("#ename").val(data[0].ename);
 $("#name").val(data[0].empnum);
 $("#email").val(data[0].email);
 },
 error: function (result) {
 alert("Error");
 }
 });
}

• Elias Van Ootegem: use a closure to avoid excessive DOM queries for all those $('#') selectors... and possibly the constant values in the $.ajax parameters, too