form not displaying data because of style="display:none;"

[iez]

Hi and thanks in advance!

Someone on this site made a form for me that hides and displays fields, depending on which variable is chosen from a given array. They did a very good job with it with one exception. It seems the code that is used to hide certain fields also hides the form data rather than posting it when the form is submitted.

Here is the code for both the java (listed first) and the form itself.

// Funtion
// Description: show or hide element in the form according to selected element
//
function show_hide(){ 

  if (!document.getElementById) return false;

  fila = document.getElementById('tr_firstname');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_firstname_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_email');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_email_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_email');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_email_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_receipt_invoice');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_receipt_invoice_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_url');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_url_data');
  fila.style.display = "none"; //hide 

  fila = document.getElementById('tr_description_comments');
  fila.style.display = "none"; //hide 
  fila = document.getElementById('tr_description_comments_data');
  fila.style.display = "none"; //hide 

  var strtext ;
  var nuoption= document.frmbodydata.csreason.length; 
  var nuindice = document.frmbodydata.csreason.selectedIndex; 
  var nuvalueSelect = document.frmbodydata.csreason.options[nuindice].value; 
  var strtextSelect = document.frmbodydata.csreason.options[nuindice].text; 

  if (nuvalueSelect==0 )
  {
    return;
  }


    fila = document.getElementById('tr_description_comments');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_description_comments_data');
    fila.style.display = ""; //show 

  if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
  {
    fila = document.getElementById('tr_firstname');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_firstname_data');
    fila.style.display = ""; //show 


    fila = document.getElementById('tr_email');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_email_data');
    fila.style.display = ""; //show 
    
  }

  if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
  {
    fila = document.getElementById('tr_url');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_url_data');
    fila.style.display = ""; //show 
    
  }
if (nuvalueSelect==4 )
{
    fila = document.getElementById('tr_receipt_invoice');
    fila.style.display = ""; //show 
    fila = document.getElementById('tr_receipt_invoice_data');
    fila.style.display = ""; //show   
}
}

//
// Function
// Description: Validate the form for submit
//
function ValidateForm( form ) {


  var nuindice = form.csreason.selectedIndex; 
  var nuvalueSelect = form.csreason.options[nuindice].value; 
  
   if (nuvalueSelect==0  )
    {
        return false;
    }
    
    valor = form.receipt_invoice.value;

    if (!freturn(valor)) return false;    

    valor = form.description_comments.value;
    if (!freturn(valor)) return false;    

    if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
    {
      valor = form.firstname.value;
      if (!freturn(valor)) return false;    
    }
    
    valor = form.lastname.value;
    if (!freturn(valor)) return false;    

    valor = form.email.value;
    if (!freturn(valor)) return false;    


  if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==4 )
  {
      valor = form.url.value;
      if (!freturn(valor)) return false;    
    
  }
    alert ("Thank you for your comment.")  
    return true
}

//
// Function
// Description: Function to return TRUE or FALSE for inclomplete data 
//
/*function freturn(pbolvalue)
{
  if( pbolvalue == null || pbolvalue.length == 0 || /^\s+$/.test(pbolvalue) ) 
  {
    alert ("Incomplete Data, check please.");
    return false;
  }else{
    return true;
  }
} 
*/
function ReloadCaptchaImage(captchaImageId) 
   {
     var obj = document.getElementById(captchaImageId);
     var src = obj.src;
     var date = new Date();
     var pos = src.indexOf('&rad=');
     if (pos >= 0) { src = src.substr(0, pos); }
     obj.src = src + '&rad=' + date.getTime();
     return false;
     }

<center> <form id="frmbodydata" name="frmbodydata" onsubmit="return ValidateForm(this);" action="http://www.SnapHost.com/captcha/WebFormSubmit.aspx" method="post"> <input id="SnapHostID" name="SnapHostID" value="2FMYX5LLTQZQ" type="hidden" /> 


<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Reason for contact</td>
</tr>
<tr>
<td><select id="csreason" name="csreason" onchange="show_hide();" align="left"> <option value="0">Please Select One</option> <option value="1">Contact</option> <option value="2">Report Bad Link</option> <option value="3">Gallery Submission</option> <option value="4">Preferred Partner Submission</option> <option value="5">Link Exchange</option> </select></td>

</tr>
<tr id="tr_firstname" style="display:none;">
<td>First name/Last name</td>
</tr>
<tr id="tr_firstname_data" style="display:none;">
<td><input id="firstname" /><input id="lastname" align="left" type="text" /></td>
</tr>
<tr id="tr_email" style="display:none;">
<td>Email</td>
</tr>
<tr id="tr_email_data" style="display:none;">
<td><input id="email" size="30" maxlength="30" align="left" type="text" /></td>
</tr>
<tr id="tr_receipt_invoice" style="display:none;">

<td>Receipt/Invoice</td>

</tr>
<tr id="tr_receipt_invoice_data" style="display:none;">
<td><input id="receipt_invoice" name="receipt_invoice" size="15" maxlength="15" align="left" type="text" /></td>
</tr>
<tr id="tr_url" style="display:none;">
<td>URL</td>
</tr>
<tr id="tr_url_data" style="display:none;">
<td><input id="url" size="80" maxlength="80" align="left" type="text" /></td>
</tr>
<tr id="tr_description_comments" style="display:none;">
<td>Description/Comments</td>

</tr>
<tr id="tr_description_comments_data" style="display:none;">
<td><textarea id="description_comments" rows="10" cols="50" align="left"> </textarea></td>

</tr>
<tr>
<td><i>Enter security code</i></td>
<td>SECURITY CODE</td>
</tr>
<tr>
<td><input name="CaptchaCode" class="txtFields" maxlength="6" style="width:130px; height:28px; font-size:24px; text-align:center;" type="text" /></td>
<td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img id="CaptchaImage" alt="Web Form Code" style="margin-left:20px; border:1px 
solid #999999;" src="http://www.SnapHost.com/captcha/WebForm.aspx?id=2FMYX5LLTQZQ&amp;ImgType=2" /></a> <br /> <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a></td>

</tr>
<tr>
<td align="center"><input src="http://www.theopenpussy.com/1/images/submit.gif" alt="Submit button" type="image" /></td>
</tr>

<tr>
<td></td>
</tr>
</tbody>
</table>
</form> </center>

Sorry for all the code! Is there anything I can do to maintain the hide and seek nature of the forms and show the data that is submitted, or am I stuck displaying all fields all the time?

[FuquayDentist]

Hide or show has to do with the style sheet, not with the actual form. So I tend to believe if you are having a problem with data collected not making it to the database, the hide/show isn't at fault.

Do you have a toggle (click to hide, click to show)? This would probably give you some insight - if you type data into the field, then hide it, the re-show it, if the data is still there that you typed into the field - then the hide/show definitely is not the issue.

It's a bit hard without testing it. So if you'll give that a try, you'll get closer to the solution.