Javascript | Refreshing captcha image

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Javascript | Refreshing captcha image

Post 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>
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Javascript | Refreshing captcha image

Post 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.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Javascript | Refreshing captcha image

Post 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
  }
 
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: Javascript | Refreshing captcha image

Post 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.

;)
There are 10 types of people in this world, those who understand binary and those who don't
Post Reply