1
\$\begingroup\$

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
...
...
...
\$\endgroup\$
  • \$\begingroup\$ if (myval == "" | myval.length < 3 ) return; could be simplified to if (myval.length < 3) return; \$\endgroup\$ – Victor Sep 19 '14 at 12:01
1
\$\begingroup\$

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");
        }
    });
}
\$\endgroup\$
  • 1
    \$\begingroup\$ use a closure to avoid excessive DOM queries for all those $('#') selectors... and possibly the constant values in the $.ajax parameters, too \$\endgroup\$ – Elias Van Ootegem Sep 19 '14 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.