Question

I have a div tag within my contact form which holds the captcha items. I would like this section to be refreshed if the user finds the image unreadable. So I have placed an image link that would be used to initiate the refresh. I want that specific div to be updated and NOT the whole page. I tried all the possible ways the have put on the net, however, they don’t work for me for some and I’d rather get the whole page reloading right at the bottom of the refresh button.

I used this first,

<div id="captchadiv">
    <img src="http://localhost:8000/verifyimg.php" alt="Image verification" name="vimg" style="margin-left:87px" /><a id="refresh" href="#"><img src="images/refresh.jpg" height="40px" width="40px" alt="Refresh Captcha"/></a>
    <label class="text-form-long" style="margin-left:87px">To submit this form, please
    enter the characters you see in the image:
    <input type="text" size="12" name="imgverify" /></label>
</div><br><br>

<div class="buttons">
    <a href="#" class="button" data-type="reset">Clear Form</a>
    <a href="#" class="button" data-type="submit">Send Message</a>
</div>



<script> 
  $(function() {
     $("#refresh").click(function() {
            $("#captchadiv").load("contact.html");
        return false;
     });
  });
</script> 

and this second,

<div id="captchadiv">
    <img src="http://localhost:8000/verifyimg.php" alt="Image verification" name="vimg" style="margin-left:87px" /><a id="refresh" href="#" onClick="refreshCaptcha"><img src="images/refresh.jpg" height="40px" width="40px" alt="Refresh Captcha"/></a>
    <label class="text-form-long" style="margin-left:87px">To submit this form, please
    enter the characters you see in the image:
    <input type="text" size="12" name="imgverify" /></label>
</div><br><br>

<div class="buttons">
    <a href="#" class="button" data-type="reset">Clear Form</a>
    <a href="#" class="button" data-type="submit">Send Message</a>
</div>

<script>
   function refreshcaptcha() {
       var container = document.getElementById("captchadiv");
       var refreshContent = container.innerHTML;
       container.innerHTML = refreshContent;
   }
</script>

Answer 1

You will have to use AJAX or websockets to get asynchronous updates without reloading the page.

Read more about AJAX

Example:

function refreshcaptcha() {
    $.ajax({
    type: "GET",
    url: "your server link to get new image",
    data: "",
    complete: function(data){
        // Read data to get the new image

        // Supposing the data contains your updated captcha content
        var container = document.getElementById("captchadiv");
        var refreshContent = data;
        container.innerHTML = refreshContent;
    }
});

Update

Working on comment by @Josso :

<script>
   function refreshcaptcha() {
       var image = document.getElementsByName("vimg")[0];
       image.setAttribute("src", "http://localhost:8000/verifyimg.php?"+(new Date()).getTime());
   }
</script>