|
|
|
 |
Magazine |
| | Community |
| | Workshop |
| | Tools & Samples |
| | Training |
| | Site Info |
 |
 |
||||||||
|
|
||||||||
|
|||||||||
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 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 ..>
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>
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;"> :
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 cater to 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, then alert the user that the form is invalid.
alert("This form is invalid. Please review the log at the bottom of the page and make the necessary corrections.");
}
if(bValid==true){
// If the boolean is true, then 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.
Does this content meet your programming needs? Write us!
© 1998 Microsoft Corporation. All rights reserved. Terms of use.
Back to top