Tuesday, August 26, 2008

A Popup Form

Today's tidbit is a way to inject a popup form into a page and use its form fields on the page once the form has been submitted. Of course, once submitted, the form should destroy itself. These pics show the sequence of events:

1. The initial page with just a button



2. Click the button and the form pops up:



3. Fill out the form:



4. Click Save and the form data returns to the page. Here we're just using an alert() to show that the data made the trip back to the controlling page:



This technique can be used for all kinds of small popup forms. You could create your own message popup that looks nicer than the alert() box, for example.

Here's the calling page for the example, which just fetches a new employee's first and last names:
<html>
<head>
<title>Popup Form Test</title>
<script type="text/javascript" src="../../jquery/jquery.js"></script>
<script type="text/javascript" src="popupFormFunction.js"></script>
<script type="text/javascript">
function processData(formData){
s = formData != "Cancelled" ? formData.firstName + ' ' + formData.lastName : formData;
alert(s);
}
</script>
</head>
<body>
<input type="button" id="btnShowForm" value="New Employee" onclick="showPopup('processData');" />
</body>
</html>

All this page does is show a button. When you click the button, it pops up the form using the showPopup() function. When the form is submitted, it runs the callback function specified in the showPopup() argument--in this case that function is processData().

Here's the content of the popupFormFunction.js file:

function showPopup(callbackFunc) {
s = '';
s += '<style>';
s += ' #formDiv {';
s += ' position: absolute;';
s += ' top: 100px;';
s += ' left: 100px;';
s += ' background-color: #D9E8D7;';
s += ' color: #33532F;';
s += ' border: 1px solid #33532F;';
s += ' padding: 12px 6px 0px 6px;';
s += ' font-family: Tahoma, Helvetica, sans-serif;';
s += ' font-size: 9pt; ';
s += ' text-align: center; ';
s += ' }';
s += '</style>';
s += '';
s += '<div id="formDiv">';
s += ' <strong>New Employee</strong><br /><br />';
s += ' <form name="newEmployeeForm" id="newEmployeeForm" method="post">';
s += ' First Name: <input id="firstName" name="firstName" type="text" /><br />';
s += ' Last Name: <input id="lastName" name="lastName" type="text" /><br />';
s += ' <input type="submit" name="btnSave" id="btnSave" value="Save"><input type="button" name="btnCancel" id="btnCancel" value="Cancel">';
s += ' </form>';
s += '</div>';
s += '';
s += '<script type="text/javascript">';
s += ' formInfo = "";';
s += ' $("#btnCancel").click(function(){';
s += ' returnResponse("Cancelled");';
s += ' });';
s += ' $("#newEmployeeForm").submit(function(){';
s += ' formInfo = new Object;';
s += ' formInfo.firstName = $("#firstName").val();';
s += ' formInfo.lastName = $("#lastName").val();';
s += ' returnResponse(formInfo);';
s += ' });';
s += ' function returnResponse(fI){';
s += ' $("#formDiv").remove();';
s += ' ' + callbackFunc + '(fI);';
s += ' }';
s += '</script>';
$("body").append(s);
}


I put the HTML, CSS, and JavaScript for the form all into a string variable, then inject that HTML into the DOM. This can be done in any of a variety of ways--that stuff could be an HTML file that we fetch via HTTPRequest, for example. The way I have it here is just a nice concise way to represent the technique.

Deconstruction to follow tomorrow--there are lots of fun little techniques to be mined from this example.

1 comment:

Kunal Sagar said...

Simple; but useful.
fine Post... :)