A Sticky Form With Only Textboxes

 

Introduction.  Now we need to start working with forms that have the potential to do the following.
  • post to themselves
  • retain inputted information when posting
  • display information in form controls from other sources
    • database sources
    • other forms

The jargon that is often used to describe such forms is sticky forms.

Everyone has probably had the experience of going to a web site, filling in a lot of information, pressing a submit button and then being routed back to the same form without having all the work you've just entered be present.  I find this very irritating and far too prevalent.  Intelligent use of sticky forms is terribly important in web development.

Our first example does the following

  • gets some basic information from the user in textboxes
  • does some validation processing on the inputs
  • directs the user back to the form with comments about how the  inputs need to be improved
  • refills the form each time with the most recent entries

You should call this JSP page sticky_textboxes.jsp.

 

 

<html>
<head>
<title>A Sticky Form for Formatting Inputs</title>
</head>
<body bgcolor = "003344" text="cccccc">
<%
//  obtaining the inputs from the form into local variables
String first_name = request.getParameter("txt_first_name");
if (first_name == null) first_name = "";

String last_name = request.getParameter("txt_last_name");
if (last_name == null) last_name = "";

String email = request.getParameter("txt_email");
if (email == null) email = "";
// checking to see if this form has been submitted
if (request.getMethod().equals("POST"))
{

// initializing a boolean for errors
boolean allEntriesPresent = true;
// initializing a string for the error message
String skipped_inputs = "";
if (first_name.length( ) == 0)
{

skipped_inputs = "You forgot to enter your first name<br>";
allEntriesPresent = false;

}
if (last_name.length( ) == 0)
{

skipped_inputs = skipped_inputs + "You forgot to enter your last name<br>";
allEntriesPresent = false;

}
if (email.length( ) == 0)
{

skipped_inputs = skipped_inputs + "You forgot to enter your email address<br>";
allEntriesPresent = false;

}

// if all of the required fields haven't been entered
// inform the user
if (!allEntriesPresent)
{

out.println(skipped_inputs);

}
else
{

// display the name and address that have been entered
String identifierString = "Your name: " + first_name + " " + last_name + "<br>" +
"Your email: " + email + "<br>";
out.println("<p>" + identifierString);

}

}
%>
<form action="sticky_textboxes.jsp" method = "POST">
<table>
<tr>
<td>First Name:
</td>
<td><input type="text" name="txt_first_name" value="<%=first_name%>">
</td>
</tr>
<tr>
<td>Last Name:
</td>
<td><input type="text" name="txt_last_name" value="<%=last_name%>">
</td>
</tr>
<tr>
<td>EMail:
</td>
<td><input type="text" name="txt_email" value="<%=email%>">
</td>
</tr>
</table>
<P>
<input type="submit" name="cmd_submit" value="Submit!">
</P>
</form>
</body>
</html>

 

After copying this code and uploading it and accessing it on your web you should see something like the following after pressing the submit button on a largely blank form.

 

 

The code has a couple new aspects that need to be discussed.
  • we initialize a String variable to obtain the contents of each text box or set it to blank if we get a null value
  • in order to determine whether the form has been posted or this is its initial appearance we use the following

// checking to see if this form has been submitted
if (request.getMethod( ).equals("POST"))

  • we develop an error message based on the user's inputs

  • we display this message if there are errors while redisplaying the user's entries

  • the value in each of the text boxes is filled in using a scriptlet expression with the
    <%=  %> delimiters