ReCaptcha: how to keep information after form refreshes

[olchik]

Hello,

I am trying to add ReCaptcha to my form. If someone enters wrong words or nothing at all in reCaptcha field, form refreshes itself. Everything is working fine, except two dynamic fields. I have two fields that appear if someone selects certain selection from dropdowns. I was able to display all the information entered (after form refreshes), except those dynamic fields. Does anyone know how to do it?

Thank you

 

[cfSearching]

Can you post the code used to display/populate the two fields?

----------------------------------

http://cfsearching.blogspot.com/

 

[olchik]

Hello, thank you for your response!

Here is the code

<select id="feedbacktype" name="feedbacktype" onChange="ShowReg2(this.selectedIndex)">
<option value='0'> -- select--
<option value="Report a bug" <cfif IsDefined("form.recaptcha")>
<cfif #form.recaptcha# is false><cfif IsDefined("form.feedbacktype")><cfif #form.feedbacktype# is "Report a bug">selected</cfif></cfif></cfif></cfif>> Report a bug</option>
<option value="Complaint" <cfif IsDefined("form.recaptcha")>
<cfif #form.recaptcha# is false><cfif IsDefined("form.feedbacktype")><cfif #form.feedbacktype# is "Complaint">selected</cfif></cfif></cfif></cfif>> Complaint</option>
<option value="Compliment" <cfif IsDefined("form.recaptcha")>
<cfif #form.recaptcha# is false><cfif IsDefined("form.feedbacktype")><cfif #form.feedbacktype# is "Compliment">selected</cfif></cfif></cfif></cfif>> Compliment</option>
<option value="Comment" <cfif IsDefined("form.recaptcha")>
<cfif #form.recaptcha# is false><cfif IsDefined("form.feedbacktype")><cfif #form.feedbacktype# is "Comment">selected</cfif></cfif></cfif></cfif>> Comment</option>
<option value="Question" <cfif IsDefined("form.recaptcha")>
<cfif #form.recaptcha# is false><cfif IsDefined("form.feedbacktype")><cfif #form.feedbacktype# is "Question">selected</cfif></cfif></cfif></cfif>> Question</option>
</select>
<br><div id="Report a bug" style="display:none">
<font face="Verdana, Arial, Helvetica, sans-serif"size="2">What computer platform are you using?</font>
<input type="text" name="Comptype" <cfif IsDefined("form.recaptcha")>
<cfif #form.recaptcha# is false><cfif IsDefined("form.Comptype")>value="#form.Comptype#"</cfif></cfif><cfelse>value=""</cfif>></div>
<div id="Complaint" style="display:none">
<input type="hidden" name="Complaint" value=""></div>
<div id="Compliment" style="display:none">
<input type="Hidden" name="Compliment" value=""></div>
<div id="Comment" style="display:none">
<input type="hidden" name="Comment" value=""></div>
<div id="Question" style="display:none">
<input type="hidden" name="Question" value=""></div>

 

[cfSearching]

onChange="ShowReg2(this.selectedIndex)"

Can you post that function?

Having nothing to do with your problem.. using CFPARAM would greatly simplify your code. Declare a default for all FORM values. So they always exist. Then you can use them normally, without all the nested CFIF's statements.

<cfparam name="form.feedbacktype" default="">
<cfparam name="form.Comptype" default="">
...
<select id="feedbacktype" name="feedbacktype" onChange="ShowReg2(this.selectedIndex)">
   <option value='0'> -- select--
   <option value="Report a bug" <cfif form.feedbacktype is "Report a bug">selected</cfif>> Report a bug</option>
   <option value="Complaint" <cfif form.feedbacktype is "Complaint">selected</cfif>> Complaint</option>
   ... etcetera ....
</select>
... html ....
<input type="text" name="Comptype" value="#form.Comptype#">
... etcetera ...

----------------------------------

http://cfsearching.blogspot.com/

 

[olchik]

Thank you again! Here is the function

function ShowReg2(op) {
document.getElementById('Report a bug').style.display='none';
document.getElementById('Complaint').style.display='none';
document.getElementById('Compliment').style.display='none';
document.getElementById('Comment').style.display='none';
document.getElementById('Question').style.display='none';

if (op == 1) {
document.getElementById('Report a bug').style.display="block";
}
if (op == 2) {
document.getElementById('Complaint').style.display="block";
}
if (op == 3) {
document.getElementById('Compliment').style.display="block";
}
if (op == 4) {
document.getElementById('Comment').style.display="block";
}
if (op == 5) {
document.getElementById('Question').style.display="block";
}
}

 

[cfSearching]

You can call the function when the page loads with AjaxOnLoad.


----------------------------------

http://cfsearching.blogspot.com/

 

[olchik]

I am not good at JavaScript:-( I don't know how to to that

 

[cfSearching]

AjaxOnLoad is not a javascript function, it is CF. Granted it does invoke a javascript function.

http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=functions_a-b_06.html

<cfjaximport />
... other html/cf code ...
<cfset AjaxOnLoad("YourJavascriptFunctionName")>

The one catch is it does not accept parameters. Write a wrapper function that calls your javascript function ShowReg2(op)

<cfjaximport />
<script ..>
    function ShowReg2(op) {
       //.... more code 
    }
    function init() {
       //... get the selected list index and 
       // pass it into ShowReg2(..)
    } 
</script>
... other html/cf code ...
<cfset AjaxOnLoad("init")>

That said, that is not the most efficient way to structure the code. The form and javascript could certainly be simplified. But understand what the code is doing first. Then refactor it.


----------------------------------

http://cfsearching.blogspot.com/

 

[olchik]

Hello,

Thank you for your response. I was away for last 2 weeks.
Getting back is not easy and I have to say I don't understand anything. Is there any other way to retain value when form refreshes?

Thank you

 

[cfSearching]

Retaining values is easy. Like I said earlier, use cfparam to set a default value for all form fields. Then set the initial value of your fields.

<cfparam name="form.Comptype" default="">
<input type="text" name="Comptype" value="#form.Comptype#">

But that is not what your javascript function is doing. It toggles the visibility of certain html elements with javascript. What part is not clear? The outline is already there. All you need is one more line of code.

ie //... get the selected list index and
// pass it into ShowReg2(..)

----------------------------------

http://cfsearching.blogspot.com/