Previously I had discussed building a simple fill in form and having it submit the results to a database using Coldfusion. Well, now I want to take this form one step further and have a lookup for the employees that will auto-fill their information into the form to help insure accuracy. While I can have them follow a wizard type sequence before going to the actual form, I feel that it is easier to have a small pop-up window appear when they click on a button, and have that window populate the parent form when the lookup is complete. It’s amazing that there is an actual legitimate use for pop-up windows besides insulting our consumer intelligence with obnoxious advertising of garbage that any intelligent individuals wouldn’t even consider buying.
Referencing my previous article, I have several fields for user related information. For the sake of this example, we will only focus on a few fields, the first name, last name, employee ID, and their job title. So that means I have a form that looks like so:
<form id="horizontalForm" name="nomformpt1" method="post" action="nomination_form.cfm?Submit=1">
<label for="lookupclass1">
<input name="emp_lookup" type="button" id="emp_lookup" onClick="openWindow('lookup_employee.cfm','','width=425,height=150')" value="Lookup Employee Information">
</label>
Name (First)
<input name="firstname" type="text" class="style3" id="firstname" align="left" />
Name (Last)
<input name="lastname" type="text" class="style3" id="lastname" />
GEID#:
<input name="geid" type="text" class="style3" id="geid" size="10" maxlength="10">
Title/Position:
<input name="positiontitle" type="text" class="style3" id="positiontitle">
<input type="button" class="blue" name="Submit" value="Submit Participant Info" onClick="submit()">
</form>
Notice the button “emp_lookup”. This button is going to open our lookup window, but not submit the form. It calls a Javascript action basically is a interface to the window.open() method. The actual function looks like so:
<script language="JavaScript" type="text/JavaScript">
<!--
function openWindow(theURL,winName,features) {
var w = window.open(theURL,winName,features);
}
//-->
</script>
Now comes the pop-up page. This page is basically a Coldfusion page with a simple input box prompting the user to input their ID number. Once they do, it will perform a quick database lookup for the employee information, and then update the parent windows form with the correct information. This will use a similar mechanism as outlines last time, with the form calling the same page upon submission, but instead of inserting to a database, it will do the employee lookup, then create a small, blank HTML page with the Javascript to insert the returned values into parent pages form. I show the completed pop-up page in the following example. I removed all CSS and formatting tags, and replaced the query with a Coldfusion reference to a page containing the query itself.
<cfif not isdefined("form.no_emp")>
<html>
<head>
<title>RDG National Training Nomination Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form id="horizontalForm" action="lookup_employee.cfm?Submit=1" method="post">
Look Up Employee Information by SOEID
Enter your SOEID: <input name="no_emp" type="text" class="style3" id="employeeinfo">
<input name="Submit" type="submit" class="blue2" value="Submit">
</form>
</body>
</html>
<cfelse>
<cfinclude template="qry_getEmployeeInfo.cfm">
<html>
<body>
<cfif getEmployeeInfo.recordcount gt 0>
<cfoutput query="getEmployeeInfo">
<script>
window.opener.document.getElementById("firstname").value = '#fname#';
window.opener.document.getElementById("lastname").value = '#lname#';
window.opener.document.getElementById("geid").value = '#geid#';
window.opener.document.getElementById("positiontitle").value = '#jobtitle#';
window.close();
</script>
</cfoutput>
<cfelse>
No information found under that ID. Please check the ID number and try again.<br>
<a href="##" onClick="javascript:history.go(-1);">Back</a>
</cfif>
</body>
</html>
</cfif>
There is not much to doing the pass back to the parent page. The key is using the window.opener property, which keeps the parent caller for any popup pages. The easiest way to get the data into the form fields is by using the document.getElementByID() method. Interestingly enough, I came across this IBM developerWorks article about AJAX, and they also mention how familiar a web developer should be with the getElementByID() method when working with the AJAX method.
With the lookup page completed, the user can click on the Lookup button, and have a quick means of filling out the form without having to type in the information. The full form has a lot more fields, which are prone to error, and the lookup for available classes is done in this manner as well. Being able to pass back data to a parent window from a pop-up window demonstrates that there are legitimate uses for those annoying pop-ups. Pop-up blockers do sometimes prevent this functionality from working. I’m going to look into using AJAX to have the form fill in automatically when the user puts in their ID on the form itself as opposed to the pop-up window.
Subscribe to:
Post Comments (Atom)
Posts
3 comments:
That getElementByID-thingy was just the hint I needed. Helped me a lot, thx.
Dude, that's amazing -- thank you.
Very nice example, clean, concise. Thanks!
Post a Comment