 | ||||||
| ||||||
Using HTML to design forms comes with some drawbacks, namely the need for a server or client-side script to process the form data. The saveSnapshot behavior can be used to save a Web page and persist the form data directly within the page itself. This allows a larger audience to use Web forms for day-to-day activities without needing a special script to process and deliver the information.
An expense report can be created with HTML, persisted with the saveSnapshot behavior, and then e-mailed to an employee or employer with no specialized scripting.
The saveSnapshot behavior requires certain elements in order to function: a META element, a STYLE block, an ID attribute, and a CLASS attribute on the object to persist.
The META and STYLE elements are used to inform the browser that the Web page is persistent.
<META NAME="save" CONTENT="snapshot">
<STYLE>
.saveSnapshot {behavior:url(#default#savesnapshot);}
</STYLE>
The CLASS attribute identifies the type of persistence the element is using.
<ELEMENT CLASS=saveSnapshot ID=oPersistElement.. >
The style can also be set inline with the element.
<ELEMENT CLASS="saveSnapshot" STYLE="behavior:url(#default#savesnapshot)" ID="oPersistElement" >
Persisting form data using the saveSnapshot behavior does not require additional scripting. Therefore, the entire form will appear almost like any other form except for the required CLASS and ID attributes. These attributes may either be placed on the FORM object, or on the individual form ELEMENTS.
The following form only needs a defined CLASS in order to persist.
<FORM ID=oPersistForm CLASS=saveSnapshot> First Name: <INPUT TYPE=text> Last Name: <INPUT TYPE=text> Exemptions: <INPUT TYPE=text> </FORM>
By giving the FORM object an ID and a CLASS of saveSnapshot, the entire form will persist. If persisting only selected ELEMENTS is desired, then the ID and CLASS attributes can be moved from the FORM object onto those ELEMENTS.
<FORM> First Name: <INPUT TYPE=text ID=oPersistInput1 CLASS=saveSnapshot> Last Name: <INPUT TYPE=text ID=oPersistInput2 CLASS=saveSnapshot> Exemptions: <INPUT TYPE=text> </FORM>
In this example, the First Name and Last Name text fields are persisted, but the Exemptions field is not. The entire Web page for this form would include the HTML form, the essential persistence information, and HTML, HEAD and BODY elements.
<HTML>
<HEAD>
<META NAME="save" CONTENT="snapshot">
<STYLE>
.saveSnapshot {behavior:url(#default#savesnapshot);}
</STYLE>
</HEAD>
<BODY>
<FORM ID=oPersistForm CLASS=saveSnapshot>
First Name: <INPUT TYPE=text>
Last Name: <INPUT TYPE=text>
Exemptions: <INPUT TYPE=text>
</FORM>
</BODY>
</HTML>
The saveSnapshot behavior allows the SCRIPT block to persist variables. Comments, functions, and script objects such as arrays will be automatically removed.
Persisting the SCRIPT block is no different than for any other object, except that the information must be placed into the persistent block, which involves some scripting.
<SCRIPT CLASS=saveSnapshot ID=oPersistScript> var sPersistValue=""; </SCRIPT> : Enter some text: <INPUT TYPE=text ID=oInput> Click to save: <INPUT TYPE=button VALUE="Save" onclick="sPersistValue=oInput.value;"> Click to load: <INPUT TYPE=button VALUE="Load" onclick="oInput.value=sPersistValue;"> :
Web applications, expense reports, and other forms that would benefit from using the saveSnapshot behavior often times need a means of validation. The ability to present information in several formats also may be required for whomever receives the completed form.
A combination of persistent form values and persistent script variables can be used to create a dynamic, persistent form. Such a form can provide different variations of format to easily import or export the information into other formats such as mailing lists, databases, and so on.
A trip expense report would need to fit the needs of at least two people: the person entering the information and the person reading the completed form. Depending on the needs of the company, the information would need to be transferred into another application for billing and logging procedures, such as a database, spreadsheet or word processing file. Therefore, the Web page will need to have an original version and a completed version. This can be done dynamically.
First, the form needs to be added and set to persist. A persistent script block can be used to determine when the form was submitted, if the form was validated, and what format the information should take.
<SCRIPT CLASS=saveSnapshot ID=oPersistScript> var bIsValid=false; var bIsComplete=false; var sFormat="Edit"; </SCRIPT>
Two booleans are used to determine the validation and completion state of the form, and a string is used to determine what format the form will take when the page is loaded. A function is added to validate the form and set the persistent booleans.
/* The validate function determines:
1) if everything filled is in, and
2) what the form will look like when it is reloaded.
*/
function Validate(){
var iAll=document.all.length;
var bValid=true;
for(var i=0;i<iAll;i++){
window.status=i + " of " + iAll;
var vForm=document.all[i];
if(vForm.type=="text"){
if(vForm.value.length==0){
/* Look through the entire document.
If an empty form element is found that is not marked as extra ...
*/
if((vForm.id!="oStub2")||
(vForm.id!="oStub3")||
(vForm.id!="oTCo2")||
(vForm.id!="oTCo3")){
/* then set the boolean to false.
This is not the same boolean as the persistent boolean.
*/
bValid=false;
}
}
}
}
if(bValid==false){
// If the boolean is false, alert the user that the form is invalid.
alert("This form is invalid."
+ "Review the log and make the necessary corrections.");
}
if(bValid==true){
// If the boolean is true, set the persistent booleans to true.
alert("This form has been validated." +
+ "Save this page as Web Page, HTML Only."
+ "When it is reloaded, the new style will take effect.");
bIsValid=true;
bIsComplete=true;
sFormat="Output";
}
}
A second function is used to build the output from the form values after the form has been persisted.
function fnPopulateOutput(){
/* Since the form data is still in the fields,
the form is hidden and a new display is made
by using the persisting data.
*/
oEdit.style.display="none";
oOutput.style.display="block";
var iAll=document.all.length;
var bValid=false;
for (var i=0;i<iAll;i++){
window.status=i + " of " + iAll;
var vForm=document.all[i];
if(vForm.type=="text"){
if(vForm.value.length!=0){
/* If the form does not contain empty entries,
write the values to the output.
*/
bValid=true;
oOutput.innerHTML+=document.all[i-2].innerHTML +
' ' + vForm.value + '<br>\n';
}
}
}
if(bValid==false){
/* If an empty value is discovered,
then write an appropriate error message.
*/
oOutput.innerHTML+='Error: The form contains no data.<br>\n';
}
}
By keeping the form visible when the page starts, browsers that don't support persistence, CSS or JScript (compatible with ECMA 262 language specification) will still be able to view the completed form.
The following are links to further topics related to DHTML Behaviors and persistence.
Did you find this topic useful? Suggestions for other topics? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top