www.webdeveloper.com
Results 1 to 4 of 4

Thread: keeping div displayed on form submit

  1. #1
    Join Date
    Oct 2008
    Posts
    12

    keeping div displayed on form submit

    Hi all....
    I have a contact form within a div that displays like a sliding panel when the 'contact us' link is clicked (by default, the div does not display when the page loads).
    I've added a captcha function (classic asp) to validate the form on submit. The captcha function checks the 'captcha code' before sending the form data in an email.

    If a visitor enters an incorrect captcha code, a text warning is displayed within the div. The problem is when the page is submitted, the div revets back to it's default state (css display none)

    How would i get the div to stay displayed if the captcha code was incorrent?

    here's the code i'm using

    css

    Code:
    #contact_panel {
    	height: 215px;
    	background-image: url(../../assets/img/panel_slide_bg.gif);
    	background-repeat: no-repeat;
    	width: 341px;
    	background-position: center top;
    	position: absolute;
    	z-index: 50;
    	margin-top: 0px;
    	margin-left: 9px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #333333;
    	text-decoration: none;
    	padding-top: 20px;
    	padding-right: 12px;
    	padding-bottom: 10px;
    	padding-left: 11px;
    	background-color: #C9CACA;
    	border: 1px solid #BBBBBB;
    }
    Javascript

    Code:
    <script type="text/javascript"> 
    $(document).ready(function(){
     
    	$(".btn-slide1").click(function(){
    		$("#contact_panel").slideToggle("slow");
    		$(this).toggleClass("active"); return false;
    	});	
    	 
    });
    </script>
    Link to open div slider

    Code:
    <div class="contact_slide"><a href="#" class="btn-slide1"></a></div>
    Div containing form

    Code:
    <div id="contact_panel">
    	<!-- you can put content here -->
    	<form action="#" method="post" name="infoform" id="infoform">
    	<div>
    	  <p>Please enter your details so we can provide you with further information about the &quot; <%=(RSDetails.Fields.Item("Product").Value)%>&quot; 
    	    <input name="subject" type="hidden" id="subject" value="product information enquiry" />
    		<input name="product" type="hidden" id="product" value="<%=(RSDetails.Fields.Item("Product").Value)%>" />
    	  </p>
    	  <table width="100%" border="0" cellspacing="2" cellpadding="5">
            <tr>
              <td width="25%"><div align="right">Name</div></td>
              <td width="75%"><div align="left">
                <label>
                <input name="name" type="text" id="name" />
                </label>
              </div></td>
            </tr>
            <tr>
              <td><div align="right">Company</div></td>
              <td><div align="left">
                <label>
                <input name="company" type="text" id="company" />
                </label>
              </div></td>
            </tr>
            <tr>
              <td><div align="right">Telephone</div></td>
              <td><div align="left">
                <label>
                <input name="telephone" type="text" id="telephone" />
                </label>
              </div></td>
            </tr>
            <tr>
              <td><div align="right">Email</div></td>
              <td><div align="left">
                <label>
                <input name="email" type="text" id="email" />
                </label>
              </div></td>
            </tr>
            <tr>
              <td><div align="right">Message</div></td>
              <td><div align="left">
                <label>
                <textarea name="message" rows="4" id="message"></textarea>
                </label>
              </div></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><img id="imgCaptcha" src="captcha.asp" /><br />
                        <a href="javascript:void(0)" onclick="RefreshImage('imgCaptcha')">Change Security Code </a></td>
            </tr>
            <tr>
              <td><div align="right">Enter Code </div></td>
              <td><input name="captchacode" type="text" id="captchacode" size="22" maxlength="6" />
    		  <%
    	if not IsEmpty(Request.Form("btnTest")) then
    		Response.Write("<tr><td colspan=""2"" align=""center"">")
    		if not TestCaptcha("ASPCAPTCHA", Request.Form("captchacode")) then			
    			Response.Write("<b style=""color:#FF0000"">Wrong Security Code Entered</b>")
    		end if
    		Response.Write("</td></tr>" & vbCrLf)
    	end if
    	%>
    	</td>
            </tr>
            <tr>
              <td><div align="right"></div></td>
              <td><div align="left">
                <label>
                <input name="btnTest" id="btnTest" type="submit" value="Submit" />
                </label>
                <input name="FFinfosubmit" type="hidden" id="FFinfosubmit" value="yes" />
              </div></td>
            </tr>
            <tr>
              <td><div align="right"></div></td>
              <td><div align="left"></div></td>
            </tr>
          </table>
    	  
    	</div>
        </form>
    </div>

  2. #2
    Join Date
    Nov 2007
    Posts
    409
    My first suggestion is to change your submit so that it validates the captcha and then subm8it the for only upon success of captcha... but the following should work too:

    Add your "passed captcha?" ASP code into your JS document.ready section to manually run the slideToggle.
    Code:
    <script type="text/javascript"> 
    $(document).ready(function(){
     
    	$(".btn-slide1").click(function(){
    		$("#contact_panel").slideToggle("slow");
    		$(this).toggleClass("active"); return false;
    	});	
    
    <&#37;	if not TestCaptcha("ASPCAPTCHA", Request.Form("captchacode")) then %>
    		$("#contact_panel").slideToggle("slow");
    		$(this).toggleClass("active"); return false;
    <%	end if %>
    
    	 
    });
    </script>

  3. #3
    Join Date
    Nov 2007
    Posts
    409
    My first suggestion is to change your submit so that it validates the captcha and then subm8it the for only upon success of captcha... but the following should work too:

    Add your "passed captcha?" ASP code into your JS document.ready section to manually run the slideToggle.
    Code:
    <script type="text/javascript"> 
    $(document).ready(function(){
     
    	$(".btn-slide1").click(function(){
    		$("#contact_panel").slideToggle("slow");
    		$(this).toggleClass("active"); return false;
    	});	
    
    <%	if not TestCaptcha("ASPCAPTCHA", Request.Form("captchacode")) then %>
    		$("#contact_panel").slideToggle("slow");
    		$(this).toggleClass("active"); return false;
    <%	end if %>
    
    	 
    });
    </script>

  4. #4
    Join Date
    Oct 2008
    Posts
    12
    Thanks nap0leon

    That worked a treat :-)

    Regards
    Andy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles