Refresh reCaptcha on submitting form data

programming web dev
1

I have my first JQuery Mobile site up and running successfully–but with one bug that is driving me nuts! The problem is that after the user successfully (or not) sends a message via an HTML5 contact form (with PHP in the backend), and then choses to return to the mobile site (at any time–immediately or later), the form data persists and the reCaptcha “I am not a robot” box is still checked.
I have tried “onload” and “onsubmit” with a simple call to a .js “clearForm” function, but neither has solved the problem. Any help would be appreciated & note I am really a technical writer, so am far from an expert coder. THX.

2

Can you share the URL of your contact form OR the code you are using to clear the form? :slightly_smiling:

3

I tried several ways to solve the problem, and figured that refreshing the form won’t work because reCaptcha is a separate object (?) Because there was also a problem with stale news being cached on users’ phones, and because the JQM file is multipage, I figured that I might solve everything by requiring a refresh from server upon every load. That way, after pressing SEND, and after the user is sent to a separate thankyou.html or error.html page, whenever they go back to the mobile.html page, it will be refreshed.

Below are my two recent code attempts; the third is online at http://albanymm.us/mobile.html. It uses the meta tag http-equiv==“expires” content=“tue, 08 Apr 2016”; now the msg is sent but the thankyou page doesn’t display, and when I go back to the first #page the inside links don’t work until I refresh manually.
(BTW: Users with small viewports will automatically be redirected to the mobile site but I won’t set that up until this bug is fixed.) Here is the code from my two other recent attempts:

1: html file call to function that should refresh page from server:

<!doctype html>
 <html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Albany Maritime Ministry-Mobile</title> 
	<link rel="alternate" href="http://www.albanymm.us/mobile.html" />
	<link rel="stylesheet" href="themes/mytheme.min.css" />
	<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
	<link rel="stylesheet" href="themes/mycss.css" />
	<link rel="stylesheet" href="themes/media.css"/>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<script src="reloadpage.js"></script>
</head>
<body onload="reloadPage()">
...

JS file named reloadpage.js:

 function reloadPage()
 {
 var i=0;
 for i < 1;  Location.reload(true); i++);
 }

2: Attempted cache control at top of mobile.html page:
<!doctype html>
<?php
header(“Cache-Control: no-cache, must-revalidate”);
header(“Expires: Sat, 26 Jul 1997 05:00:00 GMT”);
?>

…

Thanks for any help you can give!