CODEWITHSUNDEEP
javascriptphp
azirion
azirion

Reputation: 109

Get PHP variable to javascript

I cant seem to find the answer for this one. I need to grab a PHP variable and insert it into javascript.

Here is an example of what I have in the body of a PHP page:

<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function() { 
        var info = "<?php Print($info); ?>";
        $.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
        alert(info);
        });
    });   
});
</script>

<?php
    $info="some info";
?>
<form  id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>

So the problem is that the alert pops up but doesn't echo the $info string. Obviously i'm missing the right way to grab a PHP variable. Please help.

Upvotes: 0

Views: 2453

Answers (10)

Steve
Steve

Reputation: 818

If you don't want to use JQuery you could put the php value into a hidden input and get it from the hidden variable with JavaScript documentGetElementById... that way you can keep your script in the head, which seems to meet your requirements. Either the hidden span as per @Miko or:

    <input type="hidden" id="php_info_data" name="php_info_data" value="<?php echo $info; ?>" />

and in your header script which executes after the body has loaded:

    var info = documentGetElementById('php_info_data').value;

Upvotes: 1

JAAulde
JAAulde

Reputation: 19560

Primary issue with your example code

All of the PHP executes ahead of the JS. PHP executes, then outputs Your HTML and JS to the browser where they are rendered/executed/etc.

As such, your Print of $info is executing before your declaration and definition of $info. You need to define it, then output it.

Further issues you should consider

Once this is solved, you'll eventually run into issues with simply spewing data into the middle of JS. It is not easily maintained, and unprepared data will eventually break your JS syntax. When I have to do such a thing, I generally separate the two as much as possible: 

<?php
    // declare and define the data
    $info = "foo";
?>

<script>
    // prepare an IIFE which takes the data as a param
    (function (info) {
        // inside this function body you can use the data as you
        // please without muddling your JS by mixing in PHP
        alert(info);
    }(
        // in the invoking parens, output encoded data
        <?= json_encode($info) ?>
    ));
<script>

Another benefit of this approach is that you can pass any PHP data structure to JS without changing the approach in any way. (As opposed to using inputs or element texts where you'd need to parse the JSON and keep track of which elements contain which values)

Upvotes: 1

Miko
Miko

Reputation: 156

try this

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

<span id="info" hidden><?php
$info="some info";
echo $info;
?></span>


<form  id="frm1" method="post">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>

<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() { 
    var info = $("#info").text();

    $.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
    alert(info);
    });

});   
});
</script>


</body>
</html>

Upvotes: 1

CY5
CY5

Reputation: 1580

you can convert PHP variable to JSON and then send it Javascript, becoz JSON is supported by all language Example

var a=<?php echo json_encode($info); ?>

alert(a);

or simply 

var a=<?php echo $info; ?>

alert(a);

<?php $info=10; ?>
    <script>

        var a=<?php echo $info; ?>;
        var a1=<?php echo json_encode($info+10); ?>;
        alert(a);
        alert(a1);
    </script>

Upvotes: 0

Darkmere
Darkmere

Reputation: 60

It looks to me like you are declaring the variable after you use it. So there is nothing in $info.

try:

<?php
        $info="some info";
    ?>
        <script type="text/javascript">
    $(document).ready(function(){
        $('#button').click(function() { 
            var info = "<?php echo $info; ?>";
            $.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
            alert(info);
            });
        });   
    });
    </script>


    <form  id="frm1" method="post" action="somepage.php">
    <input name="Text1" type="text" />
    <input id="button" type="submit" value="submit" />
    </form>

Upvotes: 1

Azad
Azad

Reputation: 5264

try this

<?php
    $info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function() { 

        $.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
        alert(<?php echo $info;?>);
        });
    });   
});
</script>

<form  id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>

Upvotes: 0

Samir Selia
Samir Selia

Reputation: 7065

Try this

var info = "<?php echo $info; ?>";

Upvotes: 0

j08691
j08691

Reputation: 207891

Change:

alert(info);

to:

alert('<?php echo "some info"; ?>');

Upvotes: 1

Blag
Blag

Reputation: 5894

<?php
    $info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
    $('#button').click(function() { 
        var info = "<?php echo($info); ?>";
        alert(info);
        $.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
        alert(info);
        });
    });   
});
</script>

<form  id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>

Upvotes: 0

Jeroen Bellemans
Jeroen Bellemans

Reputation: 2035

If the php variable is visible inside the inner HTML, you could do something like this to grab the variable:

HTML:

<span class="variable-content"><?php echo $variable; ?></span>

jQuery:

var php_variable = $(".variable-content").text();
alert(php_variable);

Upvotes: 2

Related Questions