Create Auto-Incrementing Code Numbers (Part 4)

In this final post in a four-part series, we will write the code that stitches together the three parts of our Request Number. To refresh our memories, the request number is generated in the following format:

XXX-YY-00000

where “XXX” is the three-letter Airport Code, “YYY” is the three-letter Department Code, and “00000” is the five-digit next available number. Our code will use a JavaScript event to detect whenever a user makes a selection in either drop-down control and will then read the values in the controls and generate a Request Number. Before it runs, it must first check to see if the other control (Airport Code or Department Code) has already been selected because both codes must have values in order to generate the Request Number. In other words, the number is not generated when the user makes the first drop-down selection; it only generates the number on the second (and successive) drop-down selections.

Create Request Number when selecting Airport City

Because a user may use either the Airport Code control or the Department Code control to initiate his number generation, or he might change or correct his initial selection, we must be ready to generate the number whenever the user makes a selection in either of the controls. jQuery’s “.change()” event will allow us to act upon any change to the drop-down controls. The first part of the code detects the event, reads the drop-down’s selected option into the AptChar variable and sets this same value as the Airport Code’s lookup field so that it is saved together with the generated Request Number in the Request Number list. The second part first checks to see if the Department Code drop-down has a value, and if so, then creates the request number by adding the three parts of the code together (AptChar + DeptChar + ReqNumChar  = YYY-XXX-00000). I have left in the alerts I used for debugging in the sample code below. Uncomment as needed.

//Create a Request Number upon making a selection ($.change()) in Airport Code dropdown only…>> when the Department Code drop-down has already been selected.

$("select#AptCodeSelect").change(function() {

//Make the first character of the Request Number equal to the value (abbreviation) of the  selected…>>
…option in the Airport Code drop-down list

$AptCode = $("select#AptCodeSelect").val() + "-";

AptChar = $AptCode;

//alert("$AptCode = " + $AptCode);

//Set the value of the Airport Code lookup field to be the same as our drop-down field.

var $AptCodeInsert = $('#AptCodeSelect option:selected').text();

//Reconstruct value the AirportCity from DisplayName by using JavaScript .split()

$('input[title="AirPortCity"]').val ($AptCodeInsert.split(",")[0] + "," + $AptCodeInsert.split(",")[1]);

$('select[title="AirPortCity"] option:contains("' + $AptCodeInsert + '")').prop('selected', true);

//Check for selection in Department Code. Create Request Number.

if($("select#DptCodeSelect").val() != 0) {

//Define the beginning characters

ReqNoBeginsWith = AptChar + DeptChar;

//alert("ReqNoBeginsWith = " + ReqNoBeginsWith);

//Call the function that finds the next available number

ReqNumCharNoPad = ReqNum(ReqNoBeginsWith);

//Call the function that adds the leading zeros

ReqNumChar =  pad(ReqNumCharNoPad.toString(), 5);

//Set the Request Number display at the top of the form

$('#ReqNumDisplay').text(AptChar + DeptChar + ReqNumChar);

//Set the value of the Request Number field to the generated Request Number

$('input[title="RequestNumber"]').val(AptChar + DeptChar + ReqNumChar );

}

})

Create Request Number when selecting Department

The code for the Department Code drop-down is similar to the code for the Airport Code drop-down and just swaps out the corresponding variables.

//Create a Request Number upon making a selection ($.change()) in Department Code  dropdown…>> …only when Airport Code the drop-down has already been selected.

$('select#DptCodeSelect').change(function() {

//Make the second and third characters of the Request Number equal to the value (abbreviation) of…>> …the selected option in the Department Code drop-down list

$DptCode = $("select#DptCodeSelect").val() + "-";

DeptChar = $DptCode;

//alert("$DptCode = " + $DptCode);

//Set the value of the Department Code lookup field to be the same as our drop-down field.

var $DptCodeInsert = $('#DptCodeSelect option:selected').text();

$('input[title="Department"]').val($DptCodeInsert);

$('select[title="Department"] option:contains("' + $DptCodeInsert + '")').prop('selected', true);

//Check for selection in Airport Code. Create Request Number.

if($("select#AptCodeSelect").val() != 0) {

//Define the beginning characters

ReqNoBeginsWith = AptChar + DeptChar;

//alert("ReqNoBeginsWith = " + ReqNoBeginsWith);

//Call the function that finds the next available number

ReqNumCharNoPad = ReqNum(ReqNoBeginsWith);

//Call the function that adds the leading zeros

ReqNumChar =  pad(ReqNumCharNoPad.toString(), 5);

//Set the Request Number display at the top of the form

$('#ReqNumDisplay').text(AptChar + DeptChar + ReqNumChar);

//Set the value of the Request Number field to the generated Request Number

$('input[title="RequestNumber"]').val(AptChar + DeptChar + ReqNumChar);

}

})

Update the form’s Request Number display

Displaying the Request Number at the top of the form is a simple matter of taking the generated request number and writing it using jQuery’s “.text()” to the span# RequestNumDisplay’ we created when customizing the form.

//Request Number DisplayGet the Request Number from the Request Number field.

var Requestnum = $('input[title="Request Number"]').val();

//alert(Requestnum);

//Change the text in <h3 id="RequestNumDisplay"> to the value of Requestnum

$('#RequestNumDisplay').text(Requestnum);

Test the form

Go to the Request Number list and generate a few numbers using the same combination of Airport City and Department and watch how the request numbers increment automatically as you add new ones!

request numbers increment automatically as you add new ones

April 2, 2013

Questions?

Email support@randgroup.com with any questions you have pertaining to this course.

Skip to toolbar