CODEWITHSUNDEEP
phpajaximage
MJBZA
MJBZA

Reputation: 5018

Change an image using AJAX

I want to create a login page. So I put a captcha picture in the login form with following html code:

<img name="captcha" id="captcha" src="captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5"/>

and I put a button that users can click on to change captcha if it is unreadable as follow :

<input type="button" name="new_Captcha_button" onClick="new_captcha()"/>

and I wrote a script as follow which work just in chrome :

<script type="text/javascript">
function new_captcha()
    {   
        document.images["captcha"].src = "captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5";
    }
</script>

but it doesn't work in other browsers, so I replace the previous code with the following :

<script type="text/javascript">
function new_captcha()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("captcha").src = xmlhttp.responseText;
            }
          }
        xmlhttp.open("GET","captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5",true);
        xmlhttp.send();
    }

So please tell me what changes I need to do in my code to make it correct. I think I need to change just following line :

document.getElementById("captcha").src = xmlhttp.responseText;

Thanks a lot.

Upvotes: 0

Views: 3534

Answers (2)

ram obrero
ram obrero

Reputation: 197

You may try to do this

login.php

<div id="captcha_container"></div>
<input type="button" id="btn_recaptcha" value="Recaptcha">

<script>
function ajax_loadpage(loadUrl,output_container)
    {
        $.post
        (
            loadUrl,
            {language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html"
        );
    }

ajax_loadpage("captcha_page.php","#captcha_container");

$('#btn_recaptcha').click(function(){
   ajax_loadpage("captcha_page.php","#captcha_container");
})
</script>
______________________________________________________________________________________
captcha_page.php
<img width="212" height="53" src="captcha.php">

captcha.php contains my captcha code, it contains a header ("Content-type: image/gif"); code, so i needed an extra php file on where i can save the image file, thus using my captcha_page.php. Worked for me :)

Upvotes: 1

Egret
Egret

Reputation: 46

<script type="text/javascript">
function new_captcha()
    {   
        document.getElementById('captcha').src = 'captcha/CaptchaSecurityImages.php?width=90&height=28&characters=5&_t=' + Math.random(1);
    }
</script>

Do not need to use ajax, function new_captcha() is ok as it is.

Upvotes: 2

Related Questions