Question

How to refresh only an element of a HTML page with Jquery or Javascript on clicking another element on the same page? I need to know this to implement a form captcha.

<img src="includes/captcha.php" style="padding:10px 0;"/>&nbsp;&nbsp;&nbsp;
<img src="images/refresh.gif" onclick="window.location.reload()" style="cursor:pointer; padding:10px 0;" />

i want to reload the image generated wih captcha.php by clicking on refresh.gif. The current code reloads the complete page.

Answer 1

This does not require any jquery. Simply alter the images src attribute to include some additional random data.

function reloadImage() {
    var now = new Date();
    document.getElementById('captcha').src = 'includes/captcha.php?r=' + now.getTime();
}

Alter your image tag to set an ID like this.

<img src="includes/captcha.php" id="captcha" style="padding:10px 0;"/>

And add the call to the function in your refresh image.

<img src="images/refresh.gif" onclick="reloadImage()" style="cursor:pointer; padding:10px 0;" />