how to get php variable in javascript

Question

I want to get value of $security_code which is in captchaCode.php file, in captcha.php file through javascript.I can not include this file in captcha.php file . Here is the code of Captcha_code.php and this code not comes inside any function of this file:

$captcha = new CaptchaCode();
$security_code = str_encrypt($captcha->generateCode(6));

And here is my javascript function, through this function i want to get the value of $security:

function refresh_captcha()
{
    var img = document.getElementById('captcha_img');
    img.src = '<?php echo "/captcha_images.php"?>';
    jQuery("#captcha_img").attr("src",img.src);
    jQuery("#security_code").val("<?php echo $security_code;?>");
}

Actually this code is for getting new encrypted value when captcha is refreshed without refreshing the page.

Why do you need to output a static string with php? Why not just write the string in JavaScript? — elclanrs
– elclanrs, Commented Sep 10, 2013 at 7:18
Variable should be present in the current file, so you need to include it. Otherwise you have to send request to the .php file and use the answer which is given by it. — Ivan Yonkov
– Ivan Yonkov, Commented Sep 10, 2013 at 7:19
You have two options: Use Ajax to fetch PHP Value, or use cookies — GoodSp33d
– GoodSp33d, Commented Sep 10, 2013 at 7:19
Could you provide me ajax code..i donot understand how to do this — user2746093
– user2746093, Commented Sep 10, 2013 at 7:19

Ravindra Gullapalli · Accepted Answer · 2013-09-10 07:52:57Z

1

You have to change the image source assignment related code. No need to assign PHP tag. Just assign the PHP file name instead like this.

function refresh_captcha()
{
    var img = document.getElementById('captcha_img');
    img.src = '/captcha_images.php';
    jQuery("#captcha_img").attr("src",img.src);
    /*This line will not work without Ajax request*/
    /*jQuery("#security_code").val("<?php echo $security_code;?>");*/
}

edited Sep 10, 2013 at 7:52

answered Sep 10, 2013 at 7:21

Ravindra Gullapalli

9,1983 gold badges51 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Starx Over a year ago

@itachi, No, javascript cannot communicate with PHP. It will only have the first value it originally receives.

itachi Over a year ago

@Starx erm.... here javascript doesn't need to do a thing. randomness will be ensure by php, not javascript.

Starx Over a year ago

@itachi, ????? I am really seeing your point. How does javascript not do a thing here?

Ivan Yonkov Over a year ago

The request to captcha_images.php will be made only once, isn't it?

itachi Over a year ago

my mistake. i thought OP was mentiong about captcha image only. in that case, ajax is overkill, otherwise, ajax is must.

|

Starx · Accepted Answer · 2013-09-10 07:27:20Z

0

Send an ajax request to a page to output only the code like:

File: outputcode.php (demo only)

$captcha = new CaptchaCode();
$security_code = str_encrypt($captcha->generateCode(6));
echo $security_code;
exit;

Next, grab that value using AJAX, like for example in jQuery

$("#refresh_code").on('click', function() {
   $.get("outputcode.php", function(data) {
      //data will now hold the new code
   });
});

Hope this gives you an idea.

answered Sep 10, 2013 at 7:27

Starx

79.3k50 gold badges187 silver badges266 bronze badges

3 Comments

itachi Over a year ago

ajax is overkill here. if you want the image to change, changing the img src attribute with a random string is enough.

user2746093 Over a year ago

its giving error that $ is not defined. If i use jQuery in place of $ then agian its giving error that jQuery is not defined...

Starx Over a year ago

@user2746093, You need to include jQuery library first.

Ivan Yonkov · Accepted Answer · 2013-09-10 07:31:54Z

0

If you cannot include the files, you need to use ajax request.

captcha.php

$captcha = new CaptchaCode();
$security_code = str_encrypt($captcha->generateCode(6));
echo json_encode($security_code);

in your js:

<img src="" id="captcha_img" onclick="refresh_captcha()"/>
<script>

    function refresh_captcha()
{
    $.ajax({
        url : 'captcha.php',
        type : 'POST',
        dataType : 'json',
        success : function (security_code) {
            var source = security_code;
            var img = document.getElementById('captcha_img');
            img.src = source;
            jQuery("#captcha_img").attr("src",img.src);
            jQuery("#security_code").val(source);
        }
    });

}
</script>

The onclick event on the img could be totally wrong, but for the excercise purpose, I've put it there.

Depends on what $security_code is, you can for example, not use JSON.

answered Sep 10, 2013 at 7:31

Ivan Yonkov

7,0291 gold badge20 silver badges25 bronze badges

23 Comments

user2746093 Over a year ago

Now its not refreshing the captcha image

Ivan Yonkov Over a year ago

How it should refresh? It refreshes on click on the image in this example.

user2746093 Over a year ago

m clicking on image but its not refreshing the captcha

Ivan Yonkov Over a year ago

it's changing the src attribute, as far as I can test it, if it's not changing the actual image, there should be another problem

user2746093 Over a year ago

is there any other way to get the php variable javascript?

|

Ajith S · Accepted Answer · 2013-09-10 08:50:51Z

0

In your php file captcha.php,

    $captcha = new CaptchaCode();
    $security_code = str_encrypt($captcha->generateCode(6));?>
    <script>
         var code = '<?= $security_code ?>';
    </script><?php // rest of the php codes

In your js file

function refresh_captcha()
{
    var img = document.getElementById('captcha_img');
    img.src = code;
    jQuery("#captcha_img").attr("src",img.src);
}

edited Sep 10, 2013 at 8:50

answered Sep 10, 2013 at 7:22

Ajith S

2,9172 gold badges20 silver badges30 bronze badges

Collectives™ on Stack Overflow

how to get php variable in javascript

4 Answers 4

7 Comments

3 Comments

23 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

23 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related