Question : while using recaptcha in tabs it works in form in  tab 1 but image not showing up in form in tab 2

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
<?php
/*

Template Name: Opportunity
*/
?>

<?php
ob_start();
@session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Kerner Group | www.Kerner.com</title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/kg_main.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/JS/jquery-ui.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/JS/jquery-ui-1.8.2.custom.min.js" language="javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/JS/jquery-1.4.2.min.js" language="javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/JS/idtabs.js" language="javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/JS/jquery-1.4.2.js" language="javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/JS/cufon-yui.js" language="javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/JS/TodaySHOP-Regular_400.font.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/JS/BankGothic_Md_BT_400.font.js"></script>

<style type="text/css">

	.SYN_ROW {background:silver;}

	.SYN_TXT {border-left:1px solid;position:relative;left:4.5em;background:white;font-family:monospace;margin-right:4.5em;}

	.HTML_TXT {color:#000000;}

	.HTML_TAG {color:#0000ff;}

	.HTML_ELM {color:#800000;}

	.HTML_ATR {color:#ff0000;}

	.HTML_VAL {color:#0000ff;}

	.SYN_LNB {position:absolute;left:0;}

	.SYN_LNN {padding:0;color:black;border:0;text-align:right;width:3.5em;height:1em;font-family:monospace;background:transparent;cursor:default;font-size:100%;}

	.SYN_BCH {display:none;}

	.HTML_CHA {color:#ff0000;}

	</style>

<script type="text/javascript"> 
$(document).ready(function() {
 
	$('ul.tabs a').click(function(){
		switch_tabs($(this));
	});
 	switch_tabs($('.defaulttab'));
 });
 
function switch_tabs(obj)
{
	$('.tab-content').hide();
	$('.tabs a').removeClass("selected");
	var id = obj.attr("rel");
 
	$('#'+id).show();
	obj.addClass("selected");
}
</script> 

<script type="text/javascript">
$(function()
{
	// remove the captcha's script element
	$('#captcha script').remove();
	// set up tabs
	$('#tabarea').tabs(
	{
		show:function(event,ui)
		{
			// if the captcha is already here, return
			if($('#captcha',ui.panel).length)return;
			// move the captcha into this panel
			$('table tr:last',ui.panel).before($('#captcha'));
		}
	});
});
</script>
<script type= "text/javascript">
var RecaptchaOptions = {theme: 'custom',  custom_theme_widget: 'recaptcha_widget'};
</script>
<script type="text/javascript">
function val()
{
	function Trim(str)
	{  
		while(str.charAt(0) == (" ") )
		{  
			str = str.substring(1);
		}
	  	while(str.charAt(str.length-1) == " " )
		{ 
			str = str.substring(0,str.length-1);
		}
	  return str;
	}

	var fnameString = Trim(document.getElementById("fname_2").value);
	if(fnameString!="")
	{  
		document.getElementById("fname_2").value=fnameString; 
	}
	if(fnameString== "")
	{
		alert("Please Enter your Name");
		document.getElementById("fname_2").focus();
		return false;
	}

	var regExp = /^([A-Z a-z 0-9 _ \-\,\.])+\@([A-Z a-z 0-9 _ \-\.])+\.([A-Z a-z]{2,4})$/;
	var email = document.getElementById("email_2").value;
	if(document.getElementById("email_2").value== "")
	{
		alert("Please enter your Email-Id");
		document.getElementById("email_2").focus();
		return false;
	}
	else if (!regExp.test(email))
	{
		alert("Enter valid Email-id");
		document.getElementById("email_2").focus();
		return false;
	}
	else
	{
	   document.forms[0].submit();
	}		
}

function validate()
{
	function Trim(str)
	{  
		while(str.charAt(0) == (" ") )
		{  
			str = str.substring(1);

 		}
	  	while(str.charAt(str.length-1) == " " )
		{ 
			str = str.substring(0,str.length-1);
		}
        return str;
	}

    var fnameString = Trim(document.getElementById("fname").value);
	if(fnameString!="")
	{  
		document.getElementById("fname").value=fnameString; 
	}
	if(fnameString== "")
	{
		alert("Please Enter your Name");
		document.getElementById("fname").focus();
		return false;
	}
	var regExp = /^([A-Z a-z 0-9 _ \-\,\.])+\@([A-Z a-z 0-9 _ \-\.])+\.([A-Z a-z]{2,4})$/;
	var email = document.getElementById("email").value;
    if(document.getElementById("email").value== "")
	{
		alert("Please enter your Email-Id");
		document.getElementById("email").focus();
		return false;
	}
	else if (!regExp.test(email))
	{
		alert("Enter valid Email-id");
		document.getElementById("email").focus();
		return false;
	}
	else
	{
        document.forms[0].submit();
	}
}
</script>
</head>
<?php wp_head(); 
global $options;
foreach ($options as $value) {
if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_option( $value['id'] ); } }
?>
<body>

<div id="kg-main">
<script type="text/javascript">
Cufon.set('fontFamily', 'TodaySHOP-Regular');
Cufon.replace('#top-menu a');
Cufon.set('fontFamily', 'BankGothic Md BT');
Cufon.replace('h1');
</script>

<div id="top-menu">
<ul><li><a class="ll" href="<?php bloginfo('url'); ?>"  title="Home">Home</a></li>
<?php wp_list_pages("title_li=&depth=0&exclude=".$kg_EX_P."&sort_column=menu_order");  ?></ul>
</div>


<div id="main-body">
<div id="title-div"><h1></h1></div>
<div id="entry">

<div id="tabarea">
    <ul class="tabs">
        <li><a id="t1" href="#" class="defaulttab" rel="tabs1"><span style="visibility:hidden;">tab1</span></a></li>
        <li><a id="t2" href="#" rel="tabs2"><span style="visibility:hidden;">tab2</span></a></li>
    </ul>
 
    <div class="tab-content" id="tabs1">
    
    <div class="opp-txt">Kerner is always interested in hearing from self-motivated, imaginative and entrepreneurial people looking to work for an exciting company and with a great team.
    <br/><br/>If you would like to submit your name for future consideration, please complete this form.</div>
    <div class="opp-frm">
         
    <form name="frm1" method="post" action="<?php bloginfo('template_directory'); ?>/email-o1.php">
			<table border="0" width="100%" id="table12" cellspacing="4" cellpadding="0" style="float:left;">
				<tr>
					<td align="right" style="width: 106px">Full Name*: </td>
					<td width="205"><input name="fname" id="fname"  type="text" size="35"></td>
				</tr>
				<tr>
					<td align="right" style="width: 106px">Email Address*: </td>
					<td width="205"><input name="email" id="email" type="text"  size="35"></td>
				</tr>
				<tr>
					<td align="right" style="width: 106px">Phone Number: </td>
					<td width="205"><input name="phone"  type="text"  size="35" style="height:32px;"></td>
				</tr>
				<tr>
					<td align="right" valign="top" style="width: 106px">Brief description: </td>
					<td width="205"><textarea  name="resume"  rows="5" cols="22"></textarea><br /></td>
				</tr>
				<tr>
					<td align="center" valign="top" colspan="2">
                    Spam Filter <i style="font-size:11px;">(Type the text from image to textbox)</i>
                    </td>
				</tr>
                <tr id="captcha">
                	<td align="center" valign="top" colspan="2">
                	<div id="recaptcha_widget" style="display:none">
                    
                       <div id="recaptcha_image" align="left"></div>
                       <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
 					                  
                       <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" size="30"/>
 					   <a href="javascript:Recaptcha.reload()">
                       <img src="<?php bloginfo('template_directory'); ?>/images/refresh.gif"></a>                   
                     </div>
                    
                     <script type="text/javascript"
                     src="http://www.google.com/recaptcha/api/challenge?k=6Ld1n7sSAAAAAPHROlwXasE6rBOi8GLF6RS94KXw">
                     </script>
                     <noscript>
                     <iframe 
                     src="http://www.google.com/recaptcha/api/noscript?k=6Ld1n7sSAAAAAPHROlwXasE6rBOi8GLF6RS94KXw" 
                     height="300" width="500" frameborder="0">
                     </iframe><br>
                     <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
                     <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                     </noscript>
                	</td>
                </tr>
                <tr>
                	<td width="150" align="left" colspan="2" style="padding:10px 0px 0px 162px;">
                    <input type="image" src="<?php bloginfo('template_directory'); ?>/images/frm-submit.png" name="Submit" onclick="return validate();" /><br />
                    </td>
                </tr>
           </table>
       </form>

    
    
    
    </div>
    
    </div>
    
    <div class="tab-content" id="tabs2">
	<div class="opp-txt">If you have a business, business idea, product, service or concept that you believe would fit in the Kerner family, please complete the following form. Please do not send completed business or marketing plans until and unless you receive a request from our business strategy team.
    <br/><br/>If you would like to submit your name for future consideration, please complete this form.</div>
    <div class="opp-frm">
 		
         <form name="frm2" method="post" action="<?php bloginfo('template_directory'); ?>/email-o2.php">
			<table border="0" width="100%" id="table12" cellspacing="4" cellpadding="0" style="float:left;">
				<tr>
					<td align="right" style="width: 106px">Full Name*: </td>
					<td width="205"><input name="fname_2" id="fname_2"  type="text" size="35"></td>
				</tr>
				<tr>
					<td align="right" style="width: 106px">Email Address*: </td>
					<td width="205"><input name="email_2" id="email_2" type="text"  size="35"></td>
				</tr>
				<tr>
					<td align="right" style="width: 106px">Phone Number: </td>
					<td width="205"><input name="phone_2" type="text" size="35" style="height:32px;"></td>
				</tr>
				<tr>
					<td align="right" valign="top" style="width: 106px">Brief description: </td>
					<td width="205"><textarea  name="resume_2" rows="5" cols="22"></textarea><br /></td>
				</tr>
				<tr>
					<td align="center" valign="top" colspan="2">
                    Spam Filter <i style="font-size:11px;">(Type the text from image to textbox)</i>
                    </td>
				</tr>
               	<!--<tr>
                	<td align="center" valign="top" colspan="2">
                       <div id="recaptcha_widget" style="display:none">
                    
                       <div id="recaptcha_image" align="left"></div>
                       <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
 					                  
                       <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" size="30"/>
 					   <a href="javascript:Recaptcha.reload()">
                       <img src="<?php //bloginfo('template_directory'); ?>/images/refresh.gif"></a>                   
                     </div>
                    
                     <script type="text/javascript" 
                     src="http://www.google.com/recaptcha/api/challenge?k=6Ld1n7sSAAAAAPHROlwXasE6rBOi8GLF6RS94KXw">
                     </script>
                     <noscript>
                     <iframe 
                     src="http://www.google.com/recaptcha/api/noscript?k=6Ld1n7sSAAAAAPHROlwXasE6rBOi8GLF6RS94KXw" 
                     height="300" width="500" frameborder="0">
                     </iframe><br>
                     <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
                     <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                     </noscript>
                    </td>
                </tr>-->
                <tr>
                	<td width="150" align="left" colspan="2" style="padding:10px 0px 0px 162px;">
                    <input type="image" src="<?php bloginfo('template_directory'); ?>/images/frm-submit.png" name="Submit" onclick="return val();" /><br />
                    </td>
                </tr>
           </table>
       </form>
    
    </div>
    </div>
	</div>
	</div>
	</div>

<div id="kg-footer">© All images and text on this site are protected by international copyright laws.  KERNER® is a registered trademark of the Kerner Group™.</div>

<div class="clear"></div>
</div>

</body>

</html>

Answer : while using recaptcha in tabs it works in form in  tab 1 but image not showing up in form in tab 2

Hi designersx,

I see you are using "Google" ready made links. Why not use your own script so you can rely on it. Other sites can remove old links resulting in your failing script. http://www.google.com/recaptcha/api/js/recaptcha.js

Here is a related link:
http://www.white-hat-web-design.co.uk/articles/php-captcha.php

Hope this helps
Regards
Random Solutions  
 
programming4us programming4us