IDevResource.com - ASP Byte Size: Hidden Forms

The Developer's Resource & Community Site

COM	XML	ASP	Java & Misc.	NEW: VS.NET
International	This Week	Forums	Author Central	Find a Job

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.

Contribute to IDR:

To contribute an article to IDR, a click here.

To contact us at IDevResource.com, use our feedback form, or email us.

To comment on the site contact our webmaster.