How to pass variable from PHP to JS, perform math on the variable then output to an on page element [duplicate]

Question

Possible Duplicate:
how to access PHP variables from within JavaScript?

I am trying to pass a variable from mySQL to PHP then to JavaScript to perform some math on it then have the result displayed on page in a specific area (in a <p> element with a specific ID assigned to it). Is this possible or is there an easier solution?

Thanks!

I already know how to get the variable from MySQL to PHP just having trouble on what to do after that.

Here is my updated code after reading responses. Still not working but I am sure I'm doing something wrong!

<p id="p_id"><?php echo $price; ?></p>
<input type="radio" group="radio_group" value="Reduce 10%" onclick="radio_click();" />

<script type="text/javascript">
var price = <?php echo $price; ?>;

function radio_click() {
var target = document.GetElementById('p_id');
var final_number; // this will be variable your store the final number in

final_number = price * .9;
target.innerHTML = final_number;

}
</script>

I forgot to mention I need the value to be displayed onclick of a radio button — gb2016
– gb2016, Commented Nov 20, 2012 at 19:19
@cHao Not a duplicate. OP asked for a more complete algorithm: passing to JS, performing operation on it and writing it into an element. OP: Welcome to Stack Overflow, too! — Giulio Muscarello
– Giulio Muscarello, Commented Nov 20, 2012 at 19:32

Community · Accepted Answer · 2020-06-20 09:12:55Z

In short, you have to pass the variable to the <script> tag as a string in a JavaScript friendly format (quotes and stuff).

<?php

$variable = 5;
$javaScriptAccessible = '
    <script type="text/javascript">
        var javaScriptAccessible = "'. $variable . '";
    </script>
';

echo $javaScriptAccesible;

Also, you could JSON it:

<?php

$variable = 5;
$javaScriptAccessible = '
    <script type="text/javascript">
        var javaScriptAccessible = '. json_encode($variable) .';
    </script>
';

echo $javaScriptAccessible;

With JSON, the quotes would be appended automatically.

Here you can see both in action: http://codepad.viper-7.com/Jyfw31

Update:

Here are more refined and, I think, better to understand examples: http://codepad.viper-7.com/1cloyB
Only thing you have to do, is use it on your radio buttons / elements.

I'd strongly suggest going with JSON, because it actually stands for JavaScript Object Notation, it has libraries in, probably, every single programming language on planet, and is specifically designed to pass JS data from one environment to other.

http://php.net/manual/en/function.json-encode.php here you can see multiple options you're able to pass in order to render it differently.

Mike Brant · Accepted Answer · 2012-11-20 19:27:17Z

0

Just output the variable from PHP into a <script> item. Then set the innerHTML property of your <p> based on your calculation. You can put this into a function and call it from your radio button's onclick.

<p id="p_id"><!-- Your value will be inserted here --></p>
<input type="radio" group="radio_group" value="some_value" onclick="radio_click();" />

<script type="text/javascript">
var your_number = <?php echo $php_number; ?>;

function radio_click() {
    var target = document.GetElementById('p_id');
    var final_number; // this will be variable your store the final number in

    // do your math here using your_number variable

    target.innerHTML = final_number;

}
</script>

answered Nov 20, 2012 at 19:27

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Comments

Giulio Muscarello · Accepted Answer · 2012-11-20 19:36:22Z

0

To pass the data from PHP to JavaScript, just echo it. For example, say you want to display the data in a message box:

$data="something";
echo "<script>";
// Do the maths
echo 'var = ' . $data . ' + 1';
echo 'document.write("<p id=\"someID\">" + var + "</p>");' // PHP code writing Javascript code to write HTML code. Wow.
echo "</script>";

If you want to display the data on click of a radio button:

<input type="radio" onClick="someFunction();">
<?php
echo "<script>function someFunction() {";
// Do the maths
echo 'var = ' . $data . ' + 1';
echo 'document.write("<p id=\"someID\">" + var + "</p>");' // PHP code writing Javascript code to write HTML code. Wow.
echo "}</script>";
?>

*Edit: If the <p> tag already exists, use document.GetElementById(\"someID\").innerHTML = var; instead of document.write("<p id=\"someID\">" + var + "</p>");.

edited Nov 20, 2012 at 19:36

answered Nov 20, 2012 at 19:20

Giulio Muscarello

1,3412 gold badges13 silver badges34 bronze badges

4 Comments

gb2016 Over a year ago

Basically when the page loads it has a PHP variable being echoed within a <p> tag that is displayed to the user. When they select an option on the radio form it needs to adjust the displayed value in the <p> tag by a set amount or percentage.

tomsseisums Over a year ago

Not in <p>, in a <script> tag, because that's where the JavaScript happens. You just have to echo out proper JS.

Giulio Muscarello Over a year ago

@GarrettBurke Not exactly. PHP inserts (or passes) the variable into JavaScript, JS will work with it, and then JS will write it into the HTML page.

cHao Over a year ago

$data should be escaped or something.

Collectives™ on Stack Overflow

How to pass variable from PHP to JS, perform math on the variable then output to an on page element [duplicate]

3 Answers 3

Update:

Comments

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update:

Comments

Comments

4 Comments

Linked

Related