Solved

Form Data Disappearing

Posted on 2004-08-30
3
229 Views
Last Modified: 2012-05-05
I must preface this question to admitting my ignorance when it comes to javascript... I inherited this code.

The following form gets validated by Coldfusion upon submission.  If user had entered inaccurate information, they are sent back to this page to complete.  If they are sent back all of their previously entered info disappears.  I've played with different scenarios.  If user has not clicked any of the "onclick toggle" fields the information they entered is displayed.  However, if they have "toggled" anything, all info disappears and they have to start over.  

Any help would be most welcome!
======================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Compliance Review Request</title>


<LINK rel="stylesheet" type="text/css" href="/images/FRWS.css" title="public">
<link REL="styleSheet" HREF="/menu/2/menu.css" TYPE="text/css">



<script language="JavaScript" src="date-picker.js"></script>

<SCRIPT LANGUAGE="javascript">
if (((navigator.appName == "Netscape") && (parseFloat(navigator.appVersion) < 4.0)) || ((navigator.appName == "Microsoft Internet Explorer") && (parseFloat(navigator.appVersion) < 4.0))) window.location = "old_browser.html";
var old_nn4 = ((navigator.appName == "Netscape") && (parseFloat(navigator.appVersion) < 4.06));
if (!old_nn4) document.write('<LINK REL="stylesheet" HREF="/menu/2/ns.css">');
</SCRIPT>
<script>
function submitForm() {
 document.theForm.submit();
}
</script>      
<script>
var arrOldValues;
function SelectAllList(CONTROL){
for(var i = 0;i < CONTROL.length;i++){
CONTROL.options[i].selected = true;
}
}

function DeselectAllList(CONTROL){
for(var i = 0;i < CONTROL.length;i++){
CONTROL.options[i].selected = false;
}
}
function FillListValues(CONTROL){
var arrNewValues;
var intNewPos;
var strTemp = GetSelectValues(CONTROL);
arrNewValues = strTemp.split(",");
for(var i=0;i<arrNewValues.length-1;i++){
if(arrNewValues[i]==1){
intNewPos = i;
}
}
for(var i=0;i<arrOldValues.length-1;i++){
if(arrOldValues[i]==1 && i != intNewPos){
CONTROL.options[i].selected= true;
}
else if(arrOldValues[i]==0 && i != intNewPos){
CONTROL.options[i].selected= false;
}
if(arrOldValues[intNewPos]== 1){
CONTROL.options[intNewPos].selected = false;
}
else{
CONTROL.options[intNewPos].selected = true;
}
}
}
function GetSelectValues(CONTROL){
var strTemp = "";
for(var i = 0;i < CONTROL.length;i++){
if(CONTROL.options[i].selected == true){
strTemp += "1,";
}
else{
strTemp += "0,";
}
}
return strTemp;
}

function GetCurrentListValues(CONTROL){
var strValues = "";
strValues = GetSelectValues(CONTROL);
arrOldValues = strValues.split(",")
}
</script>

<SCRIPT TYPE="text/javascript">
var d1="",d2="",d3="",d4="",d5="",d6="",d7="",d8="",d9="";
function toggle()
{
     var a=toggle.arguments;
     if(a[0]){d1=a[0];document.getElementById(d1).style.display = "block";}
     if(a[1]){d2=a[1];document.getElementById(d2).style.display = "none";}
     if(a[2]){d3=a[2];document.getElementById(d3).style.display = "block";}
     if(a[3]){d4=a[3];document.getElementById(d4).style.display = "none";}
     if(a[4]){d5=a[4];document.getElementById(d5).style.display = "none";}
       if(a[5]){d6=a[5];document.getElementById(d6).style.display = "block";}
     if(a[6]){d7=a[6];document.getElementById(d7).style.display = "none";}
       if(a[7]){d8=a[7];document.getElementById(d8).style.display = "block";}
     if(a[8]){d9=a[8];document.getElementById(d9).style.display = "none";}
     if(a[9])window.location="#"+d1+d2+d3+d4+d5+d6+d7+d8+d9
}
function last()
{
   if(window.location.href.indexOf("option1option2")!=-1)
        toggle('option1','option2','','','','','','','',false);
   if(window.location.href.indexOf("option2option1")!=-1)
       toggle('option2','option1','','','','','','','',false);
   if(window.location.href.indexOf("option3option4option5")!=-1)
        toggle('','','option3','option4','option5','','','','',false);
   if(window.location.href.indexOf("option4option3option5")!=-1)
        toggle('','','option4','option3','option5','','','','',false);
   if(window.location.href.indexOf("option5option3option4")!=-1)
       toggle('','','option5','option3','option4','','','','',false);
   if(window.location.href.indexOf("option6option7")!=-1)
        toggle('','','','','','option6','option7','','',false);
   if(window.location.href.indexOf("option7option6")!=-1)
    toggle('','','','','','option7','option6','','',false);
   if(window.location.href.indexOf("option8option9")!=-1)
         toggle('','','','','','','','option8','option9',false);
   if(window.location.href.indexOf("option9option8")!=-1)
    toggle('','','','','','','','option9','option8',false);
}
</SCRIPT>  
<script>
function doit(isChecked, divID)
{
divStyle = (document.getElementById) ? document.getElementById(divID).style : ( document.all) ? document.all[divID].style : document.layers[divID];
if(isChecked)
{
 divStyle.visibility = 'visible';
 divStyle.display = 'block';  
 }

else
{
 divStyle.visibility = 'hidden';
 divStyle.display = 'none';  
 }
}
</script>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!--Hide script from old browsers

function newWindow(newContent)
 {
  winContent = window.open(newContent, 'nextWin', 'right=0, top=20,width=450,height=500, toolbar=yes,scrollbars=yes, resizable=yes')        
 }

 //Stop hiding script from old browsers -->
 </SCRIPT>
<style>
 a.type      
       {
      text-align:Left;
      font-family:verdana,Arial;
      font-size:11px;
      color:660033;
      text-decoration:none;
      }
 td.border
       {
      border-color: gray;
      border-width: 0px;
      border-style: solid;
      text-align:Left;
      font-family:verdana,Arial;
      font-size:11px;
      font-weight:;
      color:black;
      text-decoration:none;
      background-color:#DFD9C9;
      }
td.border2
       {
      border-color: gray;
      border-width: 1px;
      border-style: solid;
      }
</style>
</head>
<body onload=last(); TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<table cellpadding="30" width="790" bgcolor="#ffffff">
<tr valign="bottom">
<td>
<table cellpadding="5" width="790" bgcolor="#ffffff">
<tr valign="bottom">
<td><font class="pageHeading">Compliance Review Request</font><br>
<a href="javascript: window.close();" class="news">CLOSE this workspace and RETURN to Financial Rep Website</a></td>
<td><div align="right"></div></td>
</tr>
<tr>
<td colspan="2"><hr width="100%" size="1" noshade></td>
</tr>
<tr>
<form action="?"  method="post" enctype="multipart/form-data"  name="theForm">
<td colspan="2">
<font class="directive">TRACKING NO: <strong>1362</strong></font><br>
<br>
<table width="100%" cellpadding="3">
<tr>
<td class="border"><strong>Is this related to any prior submissions?</strong> <font class="supportingText">[REQUIRED]</font></td>
</tr>
<tr>
<td bgcolor="#F5F0E2"><font class="directive">
<INPUT onClick="return toggle('option1','option2','','','','','','','',true)" TYPE="radio" VALUE="Y" NAME="PriorSubmissions">Yes
<INPUT onClick="return toggle('option2','option1','','','','','','','',true)" TYPE="radio" VALUE="N" NAME="PriorSubmissions">No
</td>
</tr>
</table>
<DIV ID="option1" STYLE="display:none">
<table width="100%" cellpadding="3">
<tr>
<td class="border"><strong>Select the related tracking number</strong> <font class="supportingText">[REQUIRED]</font></td>
</tr>
<tr>
<td bgcolor="#F5F0E2">
<select name="RelatedTrackingNo" size="1">
<option value="None">...</option>
<option value="1361">1361:  </option><option value="1360">1360:  </option><option value="1359">1359:  </option><option value="1358">1358:  test</option><option value="1357">1357:  </option><option value="1356">1356:  test</option><option value="1318">1318:  test</option><option value="1283">1283:  </option><option value="1274">1274:  Test</option><option value="1273">1273:  </option><option value="1263">1263:  Letters to retired clients</option><option value="1261">1261:  test</option><option value="1244">1244:  Testing New Code</option><option value="1236">1236:  </option><option value="1235">1235:  </option><option value="1221">1221:  </option><option value="1220">1220:  </option><option value="1219">1219:  </option><option value="1218">1218:  </option><option value="1217">1217:  </option><option value="1216">1216:  </option><option value="1215">1215:  </option><option value="1214">1214:  </option><option value="1213">1213:  </option><option value="1212">1212:  </option><option value="1211">1211:  </option><option value="1210">1210:  </option><option value="1209">1209:  </option><option value="1208">1208:  </option><option value="1207">1207:  </option><option value="1206">1206:  </option><option value="1205">1205:  </option><option value="1204">1204:  </option><option value="1203">1203:  test</option><option value="1202">1202:  test</option><option value="1196">1196:  </option><option value="1179">1179:  </option><option value="1177">1177:  </option><option value="1176">1176:  </option><option value="1158">1158:  </option><option value="1140">1140:  </option><option value="1124">1124:  </option><option value="1123">1123:  </option><option value="1117">1117:  </option><option value="1114">1114:  test</option><option value="1113">1113:  test</option><option value="1112">1112:  test</option><option value="1111">1111:  test</option><option value="1110">1110:  test</option><option value="1109">1109:  test</option><option value="1108">1108:  test</option><option value="1107">1107:  </option><option value="1105">1105:  </option><option value="1104">1104:  </option><option value="1103">1103:  test</option><option value="1075">1075:  </option><option value="1064">1064:  </option><option value="1062">1062:  test</option><option value="1061">1061:  </option><option value="1060">1060:  </option><option value="1059">1059:  test</option><option value="1058">1058:  </option><option value="1023">1023:  Testing file upload</option><option value="1014">1014:  </option><option value="1010">1010:  </option><option value="1008">1008:  test only</option>
</select>
</td>
</tr>      
</table>
</DIV>
<DIV ID="option2" STYLE="display:none"></DIV>
<table width="100%" cellpadding="3"><tr>
<td  class="border"><p><strong>Who will use?</strong> <font class="supportingText">[REQUIRED]</font></td>
</tr>
<tr>
<td bgcolor="#F5F0E2"><font class="directive"><input onClick="return toggle('','','option3','option4','option5','','','','',true)" type="radio" name="UsedBy" value="Lincoln" >All Lincoln Branches & Reps
<input onClick="return toggle('','','option4','option3','option5','','','','',true)" type="radio" name="UsedBy" value="Branch" >Branch
<input onClick="return toggle('','','option5','option3','option4','','','','',true)" type="radio" name="UsedBy" value="OneOrMore">One or more reps</font></td>
</tr></table>
<DIV ID="option3" STYLE="display:none"></DIV>
<DIV ID="option4" STYLE="display:none">
      <table width="100%" cellpadding="3"><tr>
      <td  class="border"><p><strong>Please select the branch(s) who will use</strong> <font class="supportingText">[REQUIRED]</font>
      </td>
      </tr>
      <tr>
      <td bgcolor="#F5F0E2"><br>
      <table><tr valign="top"><td>
      <a href="javascript:SelectAllList(document.theForm.Branch_List);">[select all]</a><br>      <br>
      <select name="UsedByBranches" size="7" name="Branch_List" id="Branch_List"  multiple onMouseDown="GetCurrentListValues(this);" onchange="FillListValues(this);">
      <option value="List_item_1"  >1</option>
                <option value="List_item_2"  >2</option>
                <option value="List_item_3"  >3</option>
                <option value="List_item_4"  >4</option>
      </select></td>
      <td><br><br><table cellpadding="5"><tr><td bgcolor="#ffffff"><img src="/images/WAC_help_info.gif" alt="" width="33" height="32" border="0">To make multiple selections, hold down your Ctrl. key and select.</td></tr></table></td>
      </tr></table>
      </td></tr></table>
      <table width="100%" cellpadding="3"><tr>
      <td class="border"><strong>Are you willing to share this material with other Lincoln reps?</strong></td>
      </tr>
      <tr>
      <td bgcolor="#F5F0E2">
      <font class="directive">
            <input type="radio" name="Share" value="Y">Yes <input type="radio" name="Share" value="N">No
      </font>
      </td>
      </tr>      
      </table>

</DIV>      
<DIV ID="option5" STYLE="display:none">
<table width="100%" cellpadding="3"><tr>
<td  class="border"><p><strong>Please select those reps who will use</strong> <font class="supportingText">[REQUIRED]</font>
</td>
</tr>
<tr>
<td bgcolor="#F5F0E2">
<br>
<table><tr valign="top"><td>
[<a href="javascript:SelectAllList(document.theForm.Rep_List);">select all</a>]<br>      <br>
<select name="UsedByReps" size="7" name="Rep_List" id="Rep_List"  multiple onMouseDown="GetCurrentListValues(this);" onchange="FillListValues(this);">
<option value="List_item_1"  >1</option>
                <option value="List_item_2"  >2</option>
                <option value="List_item_3"  >3</option>
                <option value="List_item_4"  >4</option>
</select>
</td>
<td><br><br><table cellpadding="5"><tr><td bgcolor="#ffffff"><img src="/images/WAC_help_info.gif" alt="" width="33" height="32" border="0">To make multiple selections, hold down your Ctrl. key and select.</td></tr></table></td>

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

      <table width="100%" cellpadding="3"><tr>
      <td class="border"><strong>Are you willing to share this material with other Lincoln reps?</strong></td>
      </tr>
      <tr>
      <td bgcolor="#F5F0E2">
      <font class="directive">
      
            <input type="radio" name="Share" value="Y">Yes <input type="radio" name="Share" value="N">No
      
      </font>
      </td>
      </tr>      
      </table>

</DIV>      
            
<table width="100%" cellpadding="3"><tr>
<td class="border"><strong>Date Needed</strong> <font class="supportingText">[REQUIRED]<br>
Should be at least 5 <u>working days</u> in the future.</font>
</td>
</tr>
<tr>
<td bgcolor="#F5F0E2"><input type="text" name="dateNeeded" size="10" maxlength="32" class="textfield">
      <a href="javascript:show_calendar('theForm.dateNeeded');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;"><img src="/images/calendar.gif" border="0" alt=""></a></td>
</tr>      </table>
<table width="100%" cellpadding="3"><tr>
<td class="border"><strong>Type</strong> <font class="supportingText">[REQUIRED]</font></td>
</tr>
<tr>
<td bgcolor="#F5F0E2">
<table>
<tr valign="top">
<td><input onClick="return toggle('','','','','','option6','option7','','',true)" type="radio" name="type" value="Advertising"></td>
<td width="100%"><font class="directive">Advertising</font> <br>
<font class="supportingText">Any communication intended for use in the public media.  No control regarding who views, reads or listens to the communication.</font></td>
</tr>
<tr valign="top">
<td><input onClick="return toggle('','','','','','option6','option7','','',true)" type="radio" name="type" value="Literature"></td>
<td width="100%"><font class="directive">Sales Literature</font><br>
<font class="supportingText">Any communication with the public that will be disseminated to two or more prospects or existing retail customers and does not meet the definition of advertising.  There is control regarding to whom the sales literature is distributed.</font></td>
</tr>
<tr valign="top">
<td><input onClick="return toggle('','','','','','option7','option6','','',true)" type="radio" name="type" value="Presentation"></td>
<td width="100%"><font class="directive">Presentation</font><br>
<font class="supportingText"> A seminar, forum, radio or television interview, public appearance or other speaking activity.</font></td>
</tr>
<tr valign="top">
<td><input onClick="return toggle('','','','','','option6','option7','','',true)"  type="radio" name="type" value="Invitation"></td>
<td width="100%"><font class="directive">Invitation Only</font><br>
<font class="supportingText">For use when presentation has been scheduled but the actual presentation is not yet completed and is not yet available for compliance review, OR, for use when presentation has been pre-approved and no changes have been made.
 </font></td>
</tr>

</table>

</td>
</tr></table>
<DIV ID="option6" STYLE="display:none"></DIV>
<DIV ID="option7" STYLE="display:none">
      <table width="100%" cellpadding="3"><tr>
      <td class="border"><strong>Will written invitation be extended?</strong>  <font class="supportingText">[REQUIRED]</font>      </td>
      </tr>
      <tr>
      <td bgcolor="#F5F0E2"><font class="directive"><input type="radio" onClick="return toggle('','','','','','','','option8','option9',true)" name="writtenInvitation" value="Y">Yes
      <input onClick="return toggle('','','','','','','','option9','option8',true)" type="radio" name="writtenInvitation" value="N">No
      </font></td>
      </tr>      
      </table>
      </DIV>      
      <DIV ID="option8" STYLE="display:none">
            <table width="100%" cellpadding="3"><tr>
            <td class="border"><strong>Are you generating the invitation?</strong> <font class="supportingText">[REQUIRED]</font>      </td>
            </tr>
            <tr>
            <td bgcolor="#F5F0E2"><font class="directive"><input type="radio" name="writtenInvitationInvolved" value="Y" >Yes
                        <input type="radio" name="writtenInvitationInvolved" value="N" >No
            </font></td>
            </tr>      
            </table>
      </DIV>      
<DIV ID="option9" STYLE="display:none"></DIV>









<table width="100%" cellpadding="3"><tr>
<td class="border"><strong>Description of subject</strong> <font class="supportingText">[REQUIRED]</font>      </td>
</tr>
<tr>
<td bgcolor="#F5F0E2"><input type="text" name="Description" size="55" maxlength="100"></td>
</tr>      </table>
<table width="100%" cellpadding="3">
<tr>
<td class="border" height="20"><strong>Purpose</strong> <font class="supportingText">[REQUIRED]</font></td></tr>
<tr>
<td bgcolor="#F5F0E2"><textarea cols="60" rows="2" name="Purpose"></textarea></td>
</tr></table>


      <br>
      
      <br>
      
      
      <input type="submit" name="Upload" value="Continue">
      

      
      









      
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
0
Comment
Question by:squickel
3 Comments
 
LVL 4

Accepted Solution

by:
sgalzin earned 500 total points
Comment Utility
hi squickel,

After a "quick" look, it seems :
- the JavaScript only takes care of showing / hiding the relevant fields. Depending on what the user selected, different fields may be visible / hidden. So from one entry to the next, the script just makes sure that the relevant fields stay visible. It doesn't actually take car of entering the information.

- reentereing the information is sometimes done automatically by the browser, but I wouldn't count on it

- ideally the fields would be reentered in your ColdFusion script (not available).

So here's what I suggest : any validation on the coldfusion side needs to make sure, when recreating the page, that the fields that *were* transmitted are written in the VALUE="" attribute of the input elements of your form so as to not loose any info.

I hope this helps, if I wasn't clear please let me know and I'll try to see if I can be of any further help ;-)

In particular, if you are having trouble with implementing my suggestion, please post your coldfusion code (I'll try to see what I can do, or someone else who knows coldfusion better than I do -which isn't saying much- might hop in).

Hope this helps,

Stephane.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 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

18 Experts available now in Live!

Get 1:1 Help Now