源程序下载在本站的源程序栏的html一代类型里，名为隐藏窗体的应用例子

Using hidden forms to transfer data from client side to Server side and vice-versa

Author: Sudhakar M
Level of Difficulty: Beginner
Languages covered: ASP, JavaScript
Pre-required reading: None
Date: Apr 19, 2000

Introduction

This paper discusses how to use hidden forms to transfer data from client side to server-side and vice-
versa. This approach is needed when you have an ASP application, with the individual pages dealing with
only a part of the whole data involved, but at a later time, such as exiting the application, all of the
data entered intermediately so far is needed.

One obvious approach is to use Session variables. Session variables need cookies to be enabled to work.
But what if cookies are disabled? Also in today's e-commerce applications there are scenarios where random
servers service the browser requests depending on the load (load-balanced), so there is no session
involved. This is an alternative approach to session variables and cookies.

The Approach

I will discuss the approach by a simple example. Suppose I have an ASP application with three pages
Name.asp, Address.asp, database.asp. The user navigates from one page to another page entering the
information along the way in the first two pages. Also after the information is entered in each particular
page, the server side needs the information, to make some decisions, like to pull some more data out of a
database based on the entered values and send it to the next page. This process continues until the user
reaches the last page, when all of the previous data is committed to the database. The trickiest part is
the information entered in any of the intermediate pages and information deduced from the server side
after submitting a page will be needed anywhere in the subsequent pages and moreover all of the
information will be needed in the last page.

The following, Hidden.inc, include file declares the server side variables for all the state involved, a
helper function that will be used every time at the beginning of a page on the server side:

Var FirstName="";
Var LastName="";
Var Address="";

// The following SaveState() function will retrieve
// the submitted state from the hidden frame on any given page

Function SaveState()
{
FirstName = "";
FirstName = Request.Form("FirstName").Item;

LastName = "";
LastName = Request.Form("LastName").Item;

Address = "";
Address = Request.Form("Address").Item;

}

This include file will be included in every page on the server side.

The following is a typical client side include file, Formstate.inc, containing the hidden form, which will
have all the fields involved in the application:

<FORM NAME="FormState">
<INPUT TYPE=HIDDEN NAME=FirstName>
<INPUT TYPE=HIDDEN NAME=LastName>
<INPUT TYPE=HIDDEN NAME=Address>
</FORM>

Now lets move on to the actual ASP pages where the interesting action happens. This is how Name.Asp might
look:

<%@ Language=JavaScript %>

<html><head><title>Name </title>
<!-- #include file = "Helper.inc" -->

<%
SaveState();
//Bunch of other server side stuff.
%>

<!-- //client side ?
<script LANGUAGE="javascript">
<!-

function SubmitHiddenForm(page)
{
var State = document.FormState;

// if the value is not modified in this page you inline it from the
// value what you got from the server side like below
State.FirstName.value = "<%=FirstName%>";

//Otherwise probably pull it out from the client side form and put it
// here
State.LastName.value = document. formName.LastName.Value;

//Assuming the following will not change in this page the rest of them
// are stored in the client side hidden frame as follows
State.City.value = "<%=City%>";

State.action = page;
State.submit();
}

function doNext()
{
SubmitHiddenForm("NextPage.asp");
}

?
</script>

<body>

<form NAME="formGetName" METHOD="POST">
<input TYPE="EDIT" NAME="LastName" >

<!-The button?
<a HREF="JavaScript:doNext();">
<img NAME="Next" src="nextbutton.gif"></a>
</form>

<!-Inline the hidden form here?
<!-- #include file = "FormState.inc" -->

</body>

The key is, as you might have understood is to first generate a function that will hold all the values got
from the server side (like in the above for FirstName). If a particular variable is going to get it's
value from this page then instead of initializing it from the server side variable, read it from the
client side form variable or whatever (like the above for LastName).

Then in response to submission we have to call SubmitHiddenForm() function which effectively posts all the
data to the server side and the server side again in that page generates a similar page, which will save
all the data in the client side variables of that current page. This process continues on to the last page
where probably on the server side we use all the collected information and persist to a database.