Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    iez
    iez is offline
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

    Code:
    // 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;
         }
    Code:
    <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?

  • #2
    New Coder
    Join Date
    Aug 2011
    Location
    Fuquay Varina NC
    Posts
    21
    Thanks
    1
    Thanked 2 Times in 2 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •