Page 1 of 1

Javascript | Refreshing captcha image

Posted: Mon Dec 08, 2008 7:54 am
by Sindarin
I am trying to add a refresh link for the captcha in my form, so the user can always get a new image if he can't read the current one. Tried but failed,

Code: Select all

<!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=iso-8859-1" />
<title>Contact Form</title>
 
<script>
 
      function RefreshCaptcha() 
      {
var div1 = document.getElementById("sec");
div1.innerHTML = "<img name='security_image' src='captcha.php?width=100&height=40&characters=5' alt='security code' />";
      }
      
 
</script>
</head>
 
<body>
<form action="sendmail.php" method="post" name="form1" id="form1">
  <table width="333" height="149" border="0" cellpadding="2" cellspacing="2">
    <tr>
      <td colspan="3" align="center" valign="middle">Contact Form </td>
    </tr>
    <tr>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
    </tr>
    <tr>
      <td width="91" align="left" valign="middle">First Name </td>
      <td width="8" align="left" valign="middle">&nbsp;</td>
      <td width="214" align="left" valign="middle"><input name="firstname" type="text" id="firstname" maxlength="60" /></td>
    </tr>
    <tr>
      <td align="left" valign="middle">Last Name </td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle"><input name="lastname" type="text" id="lastname" maxlength="60" /></td>
    </tr>
    <tr>
      <td align="left" valign="middle">Address</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle"><input name="address" type="text" id="address" maxlength="60" /></td>
    </tr>
    <tr>
      <td align="left" valign="middle">Phone</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle"><input name="phone" type="text" id="phone" maxlength="60" /></td>
    </tr>
    <tr>
      <td align="left" valign="middle">e-mail</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle"><input name="email" type="text" id="email" maxlength="60" /></td>
    </tr>
    <tr>
      <td align="left" valign="top">Message</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle"><textarea name="message" cols="32" rows="12" id="message"></textarea></td>
    </tr>
    <tr>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
    </tr>
    <tr>
      <td align="left" valign="middle">Security Code </td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
    </tr>
    <tr>
      <td align="left" valign="middle"><div id='sec'><img name="security_image" src="captcha.php?width=100&height=40&characters=5" alt="security code" /></div></td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle"><input name="garbage" type="text" id="garbage" style="display:none;" />
      <input name="security_code" type="text" id="security_code" maxlength="60" /> 
      [<span style='cursor:pointer;' title='Please type the letters and/or numbers you see in the image on the left'>?</span>] [<a href="javascript&#058;RefreshCaptcha()">Reload</a>] </td>
    </tr>
    <tr>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
    </tr>
    <tr>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle">&nbsp;</td>
      <td align="left" valign="middle"><input name="Send" type="submit" id="Send" value="Send" /> <input name="Clear" type="reset" id="Clear" value="Clear" /></td>
    </tr>
  </table>
</form>
</body>
</html>

Re: Javascript | Refreshing captcha image

Posted: Mon Dec 08, 2008 9:26 am
by VladSun
Try
[js]function RefreshCaptcha() {var captchaImg = document.getElementById("idCaptchaImg");captchaImg.src='captcha.php?width=100&height=40&characters=5&time='+(new Date().getTime());}[/js]

to avoid caching.

Re: Javascript | Refreshing captcha image

Posted: Mon Dec 15, 2008 7:09 am
by Sindarin
Thanks, it looks like the below code works as well.

Code: Select all

 
  function reloadCaptcha(imageName)
  {
    var randomnumber=Math.floor(Math.random()*1001); // generate a random number to add to image url to prevent caching
    document.images[imageName].src = document.images[imageName].src + '&rand=' + randomnumber; // change image src to the same url but with the random number on the end
  }
 

Re: Javascript | Refreshing captcha image

Posted: Mon Dec 15, 2008 7:34 am
by VladSun
Well, it will work most of the time, but there wil be cases where Math.random() will return the same value as the one generated previously (so, a cached image will be displayed). Using Date.getTime() ensures that it will not happen ever.

;)