Clearing text boxes

**gits** · Aug 20 '07, 08:52 PM

heya,

[CODE=javascript]document.getEle mentById("myFor m").reset();[/CODE]
should do the trick. to get it to work you should have an id assigned to your form-element id = "myForm" ...

kind regards

ps: and please use the appropriate CODE tags when posting code ... that makes it easier for readers to read the code ... ;)

**JShea** · Aug 21 '07, 03:49 PM

Thanks. I tried that and it did not work.

**gits** · Aug 21 '07, 06:11 PM

hi ...

the following works ... i tested it right now! have a close look at this example.

[HTML]
<html>
<head>
<script type="text/javascript">
function clear_form() {
var form = document.getEle mentById('my_fo rm');
form.reset();
}
</script>
</head>
<body>
<form id="my_form">
<input type="text" name="test"/>
<input type="button" value="reset" onclick="clear_ form();"/>
</form>
</body>
</html>
[/HTML]

kind regards

**JShea** · Aug 24 '07, 05:27 PM

Thanks again, but I still can not achieve my task. Although your reply worked, it did not fit into what I have to do.

Here is the jsp file I am working on. I tried to skinny it down as best I could without eliminating anything that may be needed. I bolded and Italicized the "input" statement where I have to put the "Cancel" button, near the botton of the second jsp file.

There is actually two different screens involved in this form. The first is where you enter your search criteria. That is the first frame/part where I need to eventually bring the user back to and reset the form. You then hit the "Search" button that brings you to the second part of the form where the "Cancel" button needs to be installed. The button should bring the user back to the original part of the form and clear the text boxes and radio buttons there. I need to make it work just like a "Back" button then a "Reset" button combined into one.

Here is the two jsp files involved.

*************** ** First jsp file *************** *************** *

[HTML]<HTML>
<HEAD>
<TITLE> AAAAA Resources </TITLE>
<link rel="stylesheet " type="text/css" href="/enroll/css/employer.css">

</HEAD>
<body>
<table CELLSPACING=0 CELLPADDING=0 WIDTH=100%>
<tr><td colspan=3>

<jsp:include page="admin_det ails_blank.jsp" flush="false">
</jsp:include>

</td></tr>
<tr>

<td colspan=3>

<jsp:include page="button_ba r.jsp" flush="false">
</jsp:include>

</td></tr>
<tr>
<td valign=top width=150>

<jsp:include page="admin_det ails_custName.j sp"flush="false ">
</jsp:include>
</td>

<td> &nbsp ; </td>

<td valign=top>
<br/>

<jsp:include page="find_subs criber_customer s.jsp"flush="fa lse">
</jsp:include>

</td>
</tr>
</table>

[/HTML]*************** End of first jsp *************** *************** *****

*** Second jsp file, find_subscriber _customers.jsp ***************

[CODE=jsp]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<%@ page language="java"
import="com.aaa aa.util.*,java. util.*,java.lan g.*,java.net.*, com.aaaaa.healt h.custsetup.dat abase.*,com.aaa aa.health.enrol l.memberenroll. business.Produc tGridConstants" %>

<jsp:useBean id="EzEnroll_Ez User" beanName="com.a aaaa.health.enr oll.EzUser"
type="com.aaaaa .health.enroll. EzUser" scope="session" >
</jsp:useBean>

<jsp:useBean id="CUSTOMER_CO NTAINER" beanName="com.a aaaa.health.enr oll.ui.EzCustom er"
type="com.aaaaa .health.enroll. ui.EzCustomer" scope="session" >
</jsp:useBean>

<jsp:useBean id="customerDat a" beanName="com.a aaaa.health.enr oll.ui.EzCustom erData"
type="com.aaaaa .health.enroll. ui.EzCustomerDa ta" scope="session" >
</jsp:useBean>

<jsp:useBean id="PLAN_CONTAI NER" beanName="com.a aaaa.health.enr oll.ui.plan.EzP lanContainer"
type="com.aaaaa .health.enroll. ui.plan.EzPlanC ontainer" scope="session" >
</jsp:useBean>

<jsp:useBean id="applySucces sful" beanName="java. lang.String" type="java.lang .String" scope="session" >
</jsp:useBean>

<jsp:useBean id="applyMessag e" beanName="java. lang.String" type="java.lang .String" scope="session" >
</jsp:useBean>

<jsp:useBean id="view" beanName="java. lang.String" type="java.lang .String" scope="session" >
</jsp:useBean>

<jsp:useBean id="ezPortalEnt ry" beanName="java. lang.String" type="java.lang .String" scope="session" >
</jsp:useBean>

<jsp:useBean id="customerdat a" beanName="java. lang.String" type="java.lang .String" scope="session" >
</jsp:useBean>

<TITLE>Get Subscriber and Customers</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<META name="GENERATOR " content="IBM WebSphere Studio">
<link rel="stylesheet " type="text/css" href="/enroll/css/employer.css">
<script language="JavaS cript" type="text/javascript" src="/enroll/script/global.js"></script>

<script type="text/javascript">
function clear_form() {
var form = document.getEle mentById('ssnFo rm');
form.reset();
}
</script>

</HEAD>
<BODY>

<FORM NAME="ssnForm" ID="ssnForm" METHOD="POST" TARGET="_top" ACTION="/enroll/EzGetMember">



<% if (PLAN_CONTAINER .getErrorTable( ).size() > 0)
//if (errorMessages. size() > 0)
{%>

<table cellspacing="0" cellpadding="1" border="0" width="100%" align="center">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td height="1" nowrap></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td>
<table cellspacing="0" cellpadding="5" border="0" width="100%">
<tr>
<td align="left" class="Error" height="20px">
Error</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="7" border="0" width="100%">
<tr>
<td class=body>
<% //System.out.prin tln("FS JSP:: The error messages hashtable has elements"); Enumeration enum = PLAN_CONTAINER. getErrorTable() .elements();
//Enumeration enum = errorMessages.e lements();
while (enum.hasMoreEl ements())
{
out.println("<f ont color=red>" + enum.nextElemen t()+ "</font>");
}%>
</td>
</tr></table></td>
</tr></table></td></tr></table>
</td></tr></table>
<br>
<%}else{
// System.out.prin tln("FS JSP:: NO errors in errorMessages hashtable");
}%>
[/CODE]

[CODE=jsp]

<% if (view.equals ("c") && !EzEnroll_EzUse r.hasRestricted CustomerAccess( ))
{%>
<table cellspacing="0" cellpadding="1" border="0" width="100%" align="center">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td height="1" nowrap></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td>
<table cellspacing="0" cellpadding="5" border="0" width="100%">
<tr>
<td align="left" class="Bodybold ">Search Criteria</td>
</tr>
</table>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td>
<table cellspacing="0" cellpadding="7" border="0" width="100%">
<tr>

<td><span class="bodyBold ">Search Type: <% if (!customerData. getSearchType() .equals ("customer_name ")) out.println(cus tomerData.getSe archType()); else out.println("Pl an Sponsor Name");%>   
<B>Search by:</B> <%=customerData .getSearchParm( )%></span>
</td>
</tr></table></td>
</tr></table></td>
</tr></table></td>
</tr></table><br>

<%}%>


<table cellspacing="0" cellpadding="1" border="0" width="100%" align="center">

<tr>
<td valign="top" class="headline Employer" align="center"> Find/Enroll Subscriber</td>
</tr>

<tr><td valign="top">

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>

<BR/><BR/>

<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
<tr><td valign="top">

<td class="bodyBold " valign="top" align="left" nowrap width=50%>*Plea se Enter Subscriber Social Security Number:</td>
<td class="body" align="left" width=50%>
<% if (ezPortalEntry. equals("true"))
{ %>
<input type="text" maxlength="9" size="12" name="ssn" value="<%= customerData.ge tSSN() %>" />
<%}else{ %>

<input type="text" maxlength="9" size="12" name="ssn" value="<%=custo merData.getSSN( )%>" />
<%} %>
</td>
</tr>
</table>
[/CODE]
[HTML]
<% String tempName = " ";
// if ( (!EzEnroll_EzUs er.hasRestricte dCustomerAccess () && customerData.ge tViewInd().equa ls ("search") || customerData.ge tViewInd() == null ) )
if( (!EzEnroll_EzUs er.hasRestricte dCustomerAccess () && customerData.ge tCustomerNames( ) == null) ||
(!EzEnroll_EzUs er.hasRestricte dCustomerAccess () && view.equals ("s") || view.equals (" ") ) )

{
//System.out.prin tln("the customer does not have single customer access ");
//System.out.prin tln("the customerNames array = " + customerData.ge tCustomerNames( ) );
//System.out.prin tln("the view = " + view);
//System.out.prin tln("the viewInd = " + customerData.ge tViewInd());

%>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr><td valign="top">

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr><td class="bodyBold " valign="top" align="left">*P lease Select a Search Option:</td></tr>

<tr><td class="body" align="left">



<input type=radio name="searchBy" value="control" <%= customerData.ge tSelectedValueC ontrol()? "checked" : "" %>><span class="bold">Co ntrol # </span><br>
<input type=radio name="searchBy" value="group" <%= customerData.ge tSelectedValueG roup()?"checked " : "" %>><span class="bold">Gr oup #</span><br>
<input type=radio name="searchBy" value="name" <%= customerData.ge tSelectedValueN ame()?"checked" : "" %>><span class="bold">Pl an Sponsor Name</span>

<br><br>

<span class="bold">&n bsp;Search by:</span> 
<input type="text" name="searchPar m" size=6 maxlength=50 value="<%=custo merData.getSear chParm()%>">
<BR>
</td></tr></table>
</td></tr></table>

<BR>


<div align="left"><i nput type="submit" name="search" value="Search" class="button"/></div>

</table>
</td></tr></table>



<%}else if (customerData.g etCustomerNames () != null && customerData.ge tViewInd().equa ls("choose") )
{
//System.out.prin tln("JSP:: The customerData object has customerNames") ;
// System.out.prin tln("JSP:: The customerData object has " + customerData.ge tCustomerNames( ));
}%>



<% //if ezCustData is not null then print results in drop down list box
String [] customerNames = customerData.ge tCustomerNames( );
if ((customerNames != null && customerData.ge tViewInd().equa ls("choose")) ||
(customerNames != null && view.equals ("c") ) )
{
//System.out.prin tln("JSP:: creating the drop down list box of customers");
//this is needed to enclose the value chosen in quotes
//so the whole string will be sent to the DB in the query
//String tempName = " "; %>


<table cellspacing="0" cellpadding="1" border="0" width="100%" align="center">
<tr><td valign="top">

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr><td valign="top" class="bodybold " align="left" width=50%>
*Please Select the Name for this subscriber:</td>

<td class="body" align="left" width=50%>



<% //System.out.prin tln("JSP::The customerNames array from EzCustomerdata is not null");
customerNames = customerData.ge tCustomerNames( );
%>

<SELECT name="customerC hoice" size=5>

<% if(customerName s.length > 1)
{%>
<OPTION value=""selecte d>
--- Select one ---
</OPTION>
<%}else{%>

<%}%>
<% int count = customerNames.l ength;
//System.out.prin tln(" JSP:: (multi-customer) the length of customer names = " + count);
%>


<% for (int ii = 0; ii < count; ii++)
{ %>
<% tempName = customerNames[ii];%>

<% if (!(ii < count))
throw new ArrayIndexOutOf BoundsException ();%>
<OPTION VALUE="<%=tempN ame%>"<%if(cust omerNames.lengt h == 1){%>selected<% }%>> <%=customerName s[ii] %>
</OPTION>
<% } %>


</SELECT>

<BR><BR>

</TD>
</TR>
</TABLE>
</td></tr></table>



[B]<div align="center">
<input type="submit" name="back" value="Back" class="button">   
<input type="submit" name="continue" value="Continue " class="button">   
<input type="button" name="ssn" value="Cancel" onclick="histor y.go(1);clear_f orm();"/>
</div>[/B]
<td></tr></table></td></tr></table>


<%}
//if EzUser has customer names and the user is a single customer user print the drop down list box
else if (EzEnroll_EzUse r.getCustomerNa mes() != null && EzEnroll_EzUser .hasRestrictedC ustomerAccess() )
{

customerNames = EzEnroll_EzUser .getCustomerNam es();
//System.out.prin tln("JSP::The customerNames array is not null");
customerNames = EzEnroll_EzUser .getCustomerNam es();
%>



<table cellspacing="0" cellpadding="1" border="0" width="100%" align="center">
<tr><td valign="top">

<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr><td valign="top" class="bodybold " align="left" width=50%>
*Please Select the Name for this subscriber:</td>

<td class="body" align="left" width=50%>

<SELECT name="customerC hoice" size=2>

<% int count = customerNames.l ength;%>


<% for (int jj = 0; jj < count; jj++)
{ %>
<% tempName = customerNames[jj];%>
<% if (!(jj < count))
throw new ArrayIndexOutOf BoundsException ();%>
<OPTION VALUE="<%=tempN ame%>"selected> <%= customerNames[jj] %></OPTION>
<% } %>

</SELECT>

<BR><BR>
</div>

</TD></TR></TABLE>
</td></tr></table>

<div align="center">
<input type="submit" name="back" value="Back" class="button"/>  
<input type="submit" name="continue" value="Continue " class="button"/>

<BR><BR>
</div>
</td>
<td width="15" class=body align=left>
<img alt="" border=0 height=1 width=15 src="/enroll/images/img_clear.gif"> </td>

</tr></table></td></tr></table>


<%}%>


</form>
</body>
</html>
[/HTML]
Thanks again for any help you provide.

**acoder** · Aug 24 '07, 08:27 PM

Please use code tags when posting code.

You're going forward with history.go(1) and then trying to clear the form. Clear the form first then leave the page.

**JShea** · Aug 27 '07, 04:08 PM

Tried that and it did not work.

[HTML]<input type="button" name="CancelBut ton" value="Cancel" onclick="clear_ form();history. go(-1);clear_form() ;"/>[/HTML]

**gits** · Aug 27 '07, 04:48 PM

hi ...

you have to clear the form of the page you are going to ... clearForm of your cancel-button only clears the form in the actual page (where the button is implemented) ... so you have to redesign your steps. the simplest way would be to call the clearForm-function from onload of the 'search'-page ... so you would always have a clean form when loading it ... another ... and probably more intuitive way would be to avoid frames and using hidden/visible divs that contain all formelements depending on the users actions. but first try the onload-solution :)

kind regards

**JShea** · Aug 29 '07, 10:02 PM

Thanks again. It worked. But there is one minor problem I can not solve. When a user hits the "Back" button and returns to the "Search" page and then hits the "Search" button again to bring him to the page where he hit the "Back" button, and then hits the "Cancel" button, he is returned back to the "Search" page but this time the data in the text boxes is not cleared and the radio buttons are not unchecked like they were when you hit the "Cancel" without first hitting the "Back" button.

I was wondering if there is a way to bring the user back to the "Search" part of the form without using the

Code:

history.go(-1)

**gits** · Aug 30 '07, 07:39 AM

hi ...

i think the best way would be to consider a redesign and put all form-elements into one single page and then switching the visibility of the sections accordding to your needs ... the history isn't your friend ... did you try the browsers back-button too? i think there are more problems with relying on the history object then creating a selfcontained reliable interface ...

kind regards

Clearing text boxes

Clearing text boxes

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment