Solved

How to persist data in static HTML Pages

Posted on 2010-08-24
20
392 Views
Last Modified: 2012-06-21
Experts, please help:

So, I have two static html pages: A and B

A has two text boxes and a link at the bottom to HTML page B. And B also has two text boxes and a link to HTML page A. When user fill in the text boxes on page A and clicks on the link to B, he is directed to page B and upon clicking on the link to page A he returns to page A but the data should not be gone ( I just described a classic example of Persistent data). So here is the piece of code that I have for page A.

<meta NAME="save" CONTENT="snapshot">
<title>TPP Data Entry System</title>

<STYLE>  
  .saveSnapshot {behavior:url(#default#savesnapshot);}
</STYLE>
<form  name="form1" CLASS="saveSnapshot" ID="oPersistForm">


So, this code seems to be not working...can someone tell me what is wrong? I am also OK to do it differently as long as there is no need for a server to maintain the form data...not even IIS. Thank you all!
0
Comment
Question by:DoofuS
  • 11
  • 6
  • 3
20 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 33517058
"Introduced in IE5..."

Are you using IE or some other browser?
0
 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 33517069
Excerpted from http://msdn.microsoft.com/en-us/library/ms531066%28VS.85%29.aspx

"This feature requires Microsoft Internet Explorer 5 or later."


<!-- Tell the browser the page is persistent-->
<META NAME="save" CONTENT="favorite">
<!-- Define the class for the persistent object-->
<STYLE>
    .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>
<SCRIPT>
// Record information to the persistent object as an attribute.
function fnSave(){
   oPersistInput.setAttribute("sPersistAttr",oPersistInput.value);
}
// Retrieve information from a persistent object.
function fnLoad(){
   oPersistInput.value=oPersistInput.getAttribute("sPersistAttr");
}
</SCRIPT>
:
<!-- The CLASS enables the object to persist, the event handlers 
     fire the scripted functions.-->
<INPUT
   TYPE="text"
   CLASS="saveFavorite"
   ID="oPersistInput"
   onload="fnLoad()"
   onsave="fnSave()"
>

Open in new window

0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 33517094
'behavior' is supported only in IE.  I don't know what the rest of that even means.

The only way I can think of to do what you want is to use javascript to set a cookie with the info on the first page and read it on the second page.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33517126
Like I said in the post above yours, "This feature requires Microsoft Internet Explorer 5 or later."
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 33517188
Yes, @Badotz, I was researching and typing still when you posted so I didn't see yours.  Lighten up.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33517207
hmmm...page refresh before posting, you must. Avoid incurring snipes, you will ;-)
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 33517231
I often do that... but don't be making up new rules for others.  Live and let live.
0
 

Author Comment

by:DoofuS
ID: 33517379
:)...easy fellas.

So Badotz - I did try your code. See my code below... it is erroring out on fnSave() complaining about the curly brace.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="save" CONTENT="favorite">
<title>TPP Data Entry System</title>

<STYLE>
    .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>


<script language="VBScript">
      Sub ProcessPayroll()
            Dim myArray(4)
            Dim objShell
            Dim cmdParam
            Dim iSelectedIndex
            iSelectedIndex=(Document.form1.Designation.selectedindex)
            myArray(0)=(Document.form1.Name.Value)
            myArray(1)=int(Document.form1.Age.Value)
            myArray(2)=(Document.form1.Address.Value)
            myArray(3)=(Document.form1.Designation(iSelectedIndex).Text)
          cmdParam = Join(myArray, "###")
            Set objShell = CreateObject ("WScript.Shell")
            objShell.Run "D:\ExcelOperations.exe " & cmdParam
      End Sub
      
      function fnSave(){
            oName.setAttribute("sName",oName.value);
            oAge.setAttribute("sAge",oAge.value);
            oAddress.setAttribute("sAddress",oAddress.value);
            oDesignation.setAttribute("sDesignation",oDesignation.value);
}


function fnLoad(){
   oName.value=oName.getAttribute("sName");
   oAge.value=oAge.getAttribute("sAge");
   oAddress.value=oAddress.getAttribute("sAddress");
   oDesignation.value=oDesignation.getAttribute("sDesignation");
}
</script>
</head>

<body>
<form  name="form1" CLASS="saveSnapshot" ID="oPersistForm">
  <label>Name
  <input type="text" name="Name" CLASS="saveFavorite" ID="oName" onload="fnLoad()" onsave="fnSave()"/>
  </label>
 
  <label><br />
  <br />
  Age      
  <input type="text" name="Age" CLASS="saveFavorite" ID="oAge" onload="fnLoad()" onsave="fnSave()" />
  </label>
 
  <label><br />
  <br />
  Address
  <input type="text" name="Address" CLASS="saveFavorite" ID="oAddress" onload="fnLoad()" onsave="fnSave()" />
  </label>
 
  <label></label>
  <p>
    <label>Designation
    <select name="Designation" CLASS="saveFavorite" ID="oDesignation" onload="fnLoad()" onsave="fnSave()" >
      <option>ABC</option>
      <option>DEF</option>
      <option>GHI</option>
      <option>JKL</option>
    </select>
    </label>
    <input type="button" name="Submit" id="Submit" value="Submit" onclick="ProcessPayroll()"/>
  </p>
  <p>&nbsp;</p>
  <p><a href="Page2.html">Next</a></p>
</form>

</body>
</html>


Please let me know what is wrong in the code above. Thanks a lot for all of you guys...
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33518089
It doesn't like your mix of VBScript and JavaScript.
0
 

Author Comment

by:DoofuS
ID: 33524659
I dont think it has any issues with "mixing" VB Script and Javascript.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 29

Expert Comment

by:Badotz
ID: 33524746
Oh really?

Are you telling me that you can declare the script language to be VBScript, and then include JavaScript code in that same script block, and it will work?

Because if that is the case, your page should be working right now.
0
 

Author Comment

by:DoofuS
ID: 33535137
Sorry I did not mean to come across like that. Of course, I had corrected the code posted above....to close the script tag for vb script and reopen another tag for Javascript...duh me! What I meant was, even after doing that change, the page is not retaining any info. :-/. Here is the corrected code... thanks Badotz.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta NAME="save" CONTENT="favorite">
<title>TPP Data Entry System</title>

<STYLE>
    .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>



<script language ="javascript">      
      function fnSave(){
            oName.setAttribute("sName",oName.value);
            oAge.setAttribute("sAge",oAge.value);
            oAddress.setAttribute("sAddress",oAddress.value);
            oDesignation.setAttribute("sDesignation",oDesignation.value);
}


function fnLoad(){
   oName.value=oName.getAttribute("sName");
   oAge.value=oAge.getAttribute("sAge");
   oAddress.value=oAddress.getAttribute("sAddress");
   oDesignation.value=oDesignation.getAttribute("sDesignation");
}
</script>
</head>

<body>
<form  name="form1" CLASS="saveSnapshot" ID="oPersistForm">
  <label>Name
  <input type="text" name="Name" CLASS="saveFavorite" ID="oName" onload="fnLoad()" onsave="fnSave()"/>
  </label>
 
  <label><br />
  <br />
  Age      
  <input type="text" name="Age" CLASS="saveFavorite" ID="oAge" onload="fnLoad()" onsave="fnSave()" />
  </label>
 
  <label><br />
  <br />
  Address
  <input type="text" name="Address" CLASS="saveFavorite" ID="oAddress" onload="fnLoad()" onsave="fnSave()" />
  </label>
 
  <label></label>
  <p>
    <label>Designation
    <select name="Designation" CLASS="saveFavorite" ID="oDesignation" onload="fnLoad()" onsave="fnSave()" >
      <option>ABC</option>
      <option>DEF</option>
      <option>GHI</option>
      <option>JKL</option>
    </select>
    </label>
    <input type="button" name="Submit" id="Submit" value="Submit" onclick="ProcessPayroll()"/>
  </p>
  <p>&nbsp;</p>
  <p><a href="text.htm">Text Page</a></p>
</form>

</body>
</html>
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33535432
What browser are you using?
0
 

Author Comment

by:DoofuS
ID: 33535841
IE7
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33536883
Not much more I can do for you, sorry.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33536907
Except to say: cookies persist info across page transitions. And they are browser-neutral, unlike this IE-specific crap :-/
0
 

Author Comment

by:DoofuS
ID: 33538567
OK...I did try to create cookies but failed. I dont have the code handy right now but will post it.. Do you think you can look into that or would that be another question? Thanks again for all ur time!
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33539401
That would be another question. And there are countless examples of cookie usage both here and on the 'net - a Google search should turn up a few million or so.
0
 

Author Closing Comment

by:DoofuS
ID: 33541260
Although due to reasons unknown, the solution provided here is not working for me. But I am sure it would be helpful for others who'd have a similar question like mine. Thanks Badotz
0
 
LVL 29

Expert Comment

by:Badotz
ID: 33543190
No worries - glad to help.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now