Get variable from PHP to JavaScript

Question

I want to use a PHP variable in JavaScript  How is it possible

User · Answer

It depends on what type of PHP variable you want to use in Javascript. For example, entire PHP objects with class methods cannot be used in Javascript. You can, however, use the built-in PHP JSON (JavaScript Object Notation) functions to convert simple PHP variables into JSON representations. For more information, please read the following links:

You can generate the JSON representation of your PHP variable and then print it into your Javascript code when the page loads. For example:

<script type="text/javascript">
  var foo = <?php echo json_encode($bar); ?>;
</script>

User · Answer

I think the easiest route is to include the jQuery javascript library in your webpages  then use JSON as format to pass data between the two   In your HTML pages  you can request data from the PHP scripts like this     getJSON  http   foo bar php     num1   12   num2   27   function e        alert  Result from PHP      e result         In bar php you can do this    num1     GET  num1     num2     GET  num2    echo json encode array  result    gt   num1    num2      This is what s usually called AJAX  and it is useful to give web pages a more dynamic and desktop-like feel  you don t have to refresh the entire page to communicate with PHP    Other techniques are simpler   As others have suggested  you can simply generate the variable data from your PHP script    foo   123  echo   lt script type   text javascript   gt  n   echo  var foo     foo   n   echo  alert  value is     foo   n   echo   lt  script gt  n     Most web pages nowadays use a combination of the two

User · Answer

It depends on what type of PHP variable you want to use in Javascript. For example, entire PHP objects with class methods cannot be used in Javascript. You can, however, use the built-in PHP JSON (JavaScript Object Notation) functions to convert simple PHP variables into JSON representations. For more information, please read the following links:

You can generate the JSON representation of your PHP variable and then print it into your Javascript code when the page loads. For example:

<script type="text/javascript">
  var foo = <?php echo json_encode($bar); ?>;
</script>

User · Answer

You can print the PHP variable into your javascript while your page is created    lt script type  text javascript  gt      var MyJSStringVar     lt  php Print  MyPHPStringVar     gt        var MyJSNumVar    lt  php Print  MyPHPNumVar     gt    lt  script gt    Of course this is for simple variables and not objects

User · Answer

I think the easiest route is to include the jQuery javascript library in your webpages  then use JSON as format to pass data between the two   In your HTML pages  you can request data from the PHP scripts like this     getJSON  http   foo bar php     num1   12   num2   27   function e        alert  Result from PHP      e result         In bar php you can do this    num1     GET  num1     num2     GET  num2    echo json encode array  result    gt   num1    num2      This is what s usually called AJAX  and it is useful to give web pages a more dynamic and desktop-like feel  you don t have to refresh the entire page to communicate with PHP    Other techniques are simpler   As others have suggested  you can simply generate the variable data from your PHP script    foo   123  echo   lt script type   text javascript   gt  n   echo  var foo     foo   n   echo  alert  value is     foo   n   echo   lt  script gt  n     Most web pages nowadays use a combination of the two

User · Answer

It depends on what type of PHP variable you want to use in Javascript. For example, entire PHP objects with class methods cannot be used in Javascript. You can, however, use the built-in PHP JSON (JavaScript Object Notation) functions to convert simple PHP variables into JSON representations. For more information, please read the following links:

You can generate the JSON representation of your PHP variable and then print it into your Javascript code when the page loads. For example:

<script type="text/javascript">
  var foo = <?php echo json_encode($bar); ?>;
</script>

User · Answer

Update  I completely rewrote this answer  The old code is still there  at the bottom  but I don t recommend it     There are two main ways you can get access GET variables    Via PHP s   GET array  associative array   Via JavaScript s location object    With PHP  you can just make a  template   which goes something like this    lt script type  text javascript  gt  var   GET   JSON parse   lt  php echo json encode   GET     gt      lt  script gt    However  I think the mixture of languages here is sloppy  and should be avoided where possible  I can t really think of any good reasons to mix data between PHP and JavaScript anyway   It really boils down to this    If the data can be obtained via JavaScript  use JavaScript  If the data can t be obtained via JavaScript  use AJAX  If you otherwise need to communicate with the server  use AJAX    Since we re talking about   GET here  or at least I assumed we were when I wrote the original answer   you should get it via JavaScript   In the original answer  I had two methods for getting the query string  but it was too messy and error-prone  Those are now at the bottom of this answer   Anyways  I designed a nice little  class  for getting the query string  actually an object constructor  see the relevant section from MDN s OOP article    function QuerystringTable  url          private     var url      url          table            function buildTable            getQuerystring   split   amp    filter validatePair  map parsePair              function parsePair pair           var splitPair   pair split                   key         decodeURIComponent splitPair 0                value       decodeURIComponent splitPair 1             table key    value             function validatePair pair           var splitPair   pair split                return   splitPair 0   amp  amp    splitPair 1              function validateUrl            if typeof url      string                throw  QuerystringTable       lt string url gt   expected string  got     typeof url                     if url                     throw  QuerystringTable      Empty string given for argument  lt string url gt                            public     function getKeys            return Object keys table              function getQuerystring            var string           validateUrl            string   url split      1            if  string               string   url                     return string             function getValue key           var match   table key     null           if  match               return  undefined                      return match             buildTable        this getKeys          getKeys      this getQuerystring   getQuerystring      this getValue         getValue      JSFiddle demo   x000D   x000D  function main    x000D      var imaginaryUrl    http   example com webapp  search how 20to 20use 20Google amp the answer 42   x000D          qs   new QuerystringTable imaginaryUrl   x000D   x000D      urlbox innerHTML    url      imaginaryUrl  x000D       x000D      logButton  x000D           qs getKeys     x000D          qs getKeys   x000D           map arrowify  x000D           join   n   x000D         x000D       x000D      logButton  x000D           qs getValue  search     x000D          qs getValue  search   x000D           arrowify   x000D         x000D       x000D      logButton  x000D           qs getValue  the answer     x000D          qs getValue  the answer   x000D           arrowify   x000D         x000D       x000D      logButton  x000D           qs getQuerystring     x000D          qs getQuerystring   x000D           arrowify   x000D         x000D    x000D   x000D  function arrowify str   x000D      return    - gt      str  x000D    x000D   x000D  String prototype arrowify   function    x000D      return arrowify this   x000D    x000D   x000D  function log msg   x000D      txt value    msg     n   x000D      txt scrollTop   txt scrollHeight  x000D    x000D   x000D  function logButton name  output   x000D      var el   document createElement  button    x000D       x000D      el innerHTML   name  x000D       x000D      el onclick   function    x000D          log name   x000D          log output   x000D          log  - - - -    x000D        x000D       x000D      buttonContainer appendChild el   x000D    x000D   x000D  function QuerystringTable  url   x000D         private x000D      var url    url  x000D          table       x000D   x000D      function buildTable    x000D          getQuerystring   split   amp    filter validatePair  map parsePair   x000D        x000D   x000D      function parsePair pair   x000D          var splitPair   pair split       x000D              key         decodeURIComponent splitPair 0    x000D              value       decodeURIComponent splitPair 1    x000D   x000D          table key    value  x000D        x000D   x000D      function validatePair pair   x000D          var splitPair   pair split       x000D   x000D          return   splitPair 0   amp  amp    splitPair 1   x000D        x000D   x000D      function validateUrl    x000D          if typeof url      string    x000D              throw  QuerystringTable       lt string url gt   expected string  got     typeof url  x000D            x000D   x000D          if url         x000D              throw  QuerystringTable      Empty string given for argument  lt string url gt    x000D            x000D        x000D   x000D         public x000D      function getKeys    x000D          return Object keys table   x000D        x000D   x000D      function getQuerystring    x000D          var string  x000D   x000D          validateUrl    x000D          string   url split      1   x000D   x000D          if  string   x000D              string   url  x000D            x000D   x000D          return string  x000D        x000D   x000D      function getValue key   x000D          var match   table key     null  x000D   x000D          if  match   x000D              return  undefined   x000D            x000D   x000D          return match  x000D        x000D   x000D      buildTable    x000D      this getKeys          getKeys  x000D      this getQuerystring   getQuerystring  x000D      this getValue         getValue  x000D    x000D   x000D  main    x000D   urlbox  x000D      width  100   x000D      padding  5px  x000D      margin  10px auto  x000D      font  12px monospace  x000D      background   fff  x000D      color   000  x000D    x000D   x000D   txt  x000D      width  100   x000D      height  200px  x000D      padding  5px  x000D      margin  10px auto  x000D      resize  none  x000D      border  none  x000D      background   fff  x000D      color   000  x000D      displaY block  x000D    x000D   x000D  button  x000D      padding  5px  x000D      margin  10px  x000D      width  200px  x000D      background   eee  x000D      color   000  x000D      border 1px solid  ccc  x000D      display  block  x000D    x000D   x000D  button hover  x000D      background   fff  x000D      cursor  pointer  x000D    x000D   lt p id  urlbox  gt  lt  p gt  x000D   lt textarea id  txt  disabled  true  gt  lt  textarea gt  x000D   lt div id  buttonContainer  gt  lt  div gt  x000D   x000D   x000D    It s much more robust  doesn t rely on regex  combines the best parts of both the previous approaches  and will validate your input  You can give it query strings other than the one from the url  and it will fail loudly if you give bad input  Moreover  like a good object module  it doesn t know or care about anything outside of the class definition  so it can be used with anything    The constructor automatically populates its internal table and decodes each string such that     foo 3F bar 20baz amp ampersand this 20thing 3A 20 26  for example  will internally become          foo           bar baz        ampersand     this thing   amp       All the work is done for you at instantiation   Here s how to use it   var qst   new QuerystringTable location href   qst getKeys             returns an array of keys qst getValue  foo       returns the value of foo  or  undefined  if none  qst getQuerystring      returns the querystring   That s much better  And leaving the url part up to the programmer both allows this to be used in non-browser environments  tested in both node js and a browser   and allows for a scenario where you might want to compare two different query strings   var qs1   new QuerystringTable    url  1          qs2   new QuerystringTable    url  2       if  qs1 getValue  vid       qs2 getValue  vid            Do something       As I said above  there were two messy methods that are referenced by this answer  I m keeping them here so readers don t have to hunt through revision history to find them  Here they are      1  Direct parse by function  This just grabs the url and parses it directly with RegEx    GET function key def       try          return RegExp     amp     key        amp         exec location href  1       catch e           return def                   Easy peasy  if the query string is  ducksays quack amp bearsays growl  then   GET  ducksays   should return quack and   GET  bearsays   should return growl      Now you probably instantly notice that the syntax is different as a result of being a function  Instead of   GET key   it is   GET key   Well  I thought of that         Here comes the second method       2  Object Build by Loop  onload function          GET     the lack of  var  makes this global     str location search split   amp     not      this will be dealt with later     for i in str           REG RegExp       amp            amp         exec str i             GET REG 1   REG 2                Behold    GET is now an object containing an index of every object in the url  so now this is possible     GET  ducksays    returns  quack        AND this is possible  for i in   GET       document write i        GET i    lt hr gt            This is definitely not possible with the function      Again  I don t recommend this old code  It s badly written

User · Answer

lt  php   j 1    gt   lt script gt  var i     lt  php echo  j    gt      Do something  lt  script gt   lt  php echo  j    gt    This is the easiest way of passing a php variable to javascript without Ajax   You can also use something like this   var i     lt  php echo json encode  j     gt      This said to be safer or more secure  i think

User · Answer

You can pass PHP Variables to your JavaScript by generating it with PHP    lt  php  someVar   1    gt    lt script type  text javascript  gt      var javaScriptVar     lt  php echo  someVar    gt     lt  script gt

User · Answer

I think the easiest route is to include the jQuery javascript library in your webpages  then use JSON as format to pass data between the two   In your HTML pages  you can request data from the PHP scripts like this     getJSON  http   foo bar php     num1   12   num2   27   function e        alert  Result from PHP      e result         In bar php you can do this    num1     GET  num1     num2     GET  num2    echo json encode array  result    gt   num1    num2      This is what s usually called AJAX  and it is useful to give web pages a more dynamic and desktop-like feel  you don t have to refresh the entire page to communicate with PHP    Other techniques are simpler   As others have suggested  you can simply generate the variable data from your PHP script    foo   123  echo   lt script type   text javascript   gt  n   echo  var foo     foo   n   echo  alert  value is     foo   n   echo   lt  script gt  n     Most web pages nowadays use a combination of the two

User · Answer

Update  I completely rewrote this answer  The old code is still there  at the bottom  but I don t recommend it     There are two main ways you can get access GET variables    Via PHP s   GET array  associative array   Via JavaScript s location object    With PHP  you can just make a  template   which goes something like this    lt script type  text javascript  gt  var   GET   JSON parse   lt  php echo json encode   GET     gt      lt  script gt    However  I think the mixture of languages here is sloppy  and should be avoided where possible  I can t really think of any good reasons to mix data between PHP and JavaScript anyway   It really boils down to this    If the data can be obtained via JavaScript  use JavaScript  If the data can t be obtained via JavaScript  use AJAX  If you otherwise need to communicate with the server  use AJAX    Since we re talking about   GET here  or at least I assumed we were when I wrote the original answer   you should get it via JavaScript   In the original answer  I had two methods for getting the query string  but it was too messy and error-prone  Those are now at the bottom of this answer   Anyways  I designed a nice little  class  for getting the query string  actually an object constructor  see the relevant section from MDN s OOP article    function QuerystringTable  url          private     var url      url          table            function buildTable            getQuerystring   split   amp    filter validatePair  map parsePair              function parsePair pair           var splitPair   pair split                   key         decodeURIComponent splitPair 0                value       decodeURIComponent splitPair 1             table key    value             function validatePair pair           var splitPair   pair split                return   splitPair 0   amp  amp    splitPair 1              function validateUrl            if typeof url      string                throw  QuerystringTable       lt string url gt   expected string  got     typeof url                     if url                     throw  QuerystringTable      Empty string given for argument  lt string url gt                            public     function getKeys            return Object keys table              function getQuerystring            var string           validateUrl            string   url split      1            if  string               string   url                     return string             function getValue key           var match   table key     null           if  match               return  undefined                      return match             buildTable        this getKeys          getKeys      this getQuerystring   getQuerystring      this getValue         getValue      JSFiddle demo   x000D   x000D  function main    x000D      var imaginaryUrl    http   example com webapp  search how 20to 20use 20Google amp the answer 42   x000D          qs   new QuerystringTable imaginaryUrl   x000D   x000D      urlbox innerHTML    url      imaginaryUrl  x000D       x000D      logButton  x000D           qs getKeys     x000D          qs getKeys   x000D           map arrowify  x000D           join   n   x000D         x000D       x000D      logButton  x000D           qs getValue  search     x000D          qs getValue  search   x000D           arrowify   x000D         x000D       x000D      logButton  x000D           qs getValue  the answer     x000D          qs getValue  the answer   x000D           arrowify   x000D         x000D       x000D      logButton  x000D           qs getQuerystring     x000D          qs getQuerystring   x000D           arrowify   x000D         x000D    x000D   x000D  function arrowify str   x000D      return    - gt      str  x000D    x000D   x000D  String prototype arrowify   function    x000D      return arrowify this   x000D    x000D   x000D  function log msg   x000D      txt value    msg     n   x000D      txt scrollTop   txt scrollHeight  x000D    x000D   x000D  function logButton name  output   x000D      var el   document createElement  button    x000D       x000D      el innerHTML   name  x000D       x000D      el onclick   function    x000D          log name   x000D          log output   x000D          log  - - - -    x000D        x000D       x000D      buttonContainer appendChild el   x000D    x000D   x000D  function QuerystringTable  url   x000D         private x000D      var url    url  x000D          table       x000D   x000D      function buildTable    x000D          getQuerystring   split   amp    filter validatePair  map parsePair   x000D        x000D   x000D      function parsePair pair   x000D          var splitPair   pair split       x000D              key         decodeURIComponent splitPair 0    x000D              value       decodeURIComponent splitPair 1    x000D   x000D          table key    value  x000D        x000D   x000D      function validatePair pair   x000D          var splitPair   pair split       x000D   x000D          return   splitPair 0   amp  amp    splitPair 1   x000D        x000D   x000D      function validateUrl    x000D          if typeof url      string    x000D              throw  QuerystringTable       lt string url gt   expected string  got     typeof url  x000D            x000D   x000D          if url         x000D              throw  QuerystringTable      Empty string given for argument  lt string url gt    x000D            x000D        x000D   x000D         public x000D      function getKeys    x000D          return Object keys table   x000D        x000D   x000D      function getQuerystring    x000D          var string  x000D   x000D          validateUrl    x000D          string   url split      1   x000D   x000D          if  string   x000D              string   url  x000D            x000D   x000D          return string  x000D        x000D   x000D      function getValue key   x000D          var match   table key     null  x000D   x000D          if  match   x000D              return  undefined   x000D            x000D   x000D          return match  x000D        x000D   x000D      buildTable    x000D      this getKeys          getKeys  x000D      this getQuerystring   getQuerystring  x000D      this getValue         getValue  x000D    x000D   x000D  main    x000D   urlbox  x000D      width  100   x000D      padding  5px  x000D      margin  10px auto  x000D      font  12px monospace  x000D      background   fff  x000D      color   000  x000D    x000D   x000D   txt  x000D      width  100   x000D      height  200px  x000D      padding  5px  x000D      margin  10px auto  x000D      resize  none  x000D      border  none  x000D      background   fff  x000D      color   000  x000D      displaY block  x000D    x000D   x000D  button  x000D      padding  5px  x000D      margin  10px  x000D      width  200px  x000D      background   eee  x000D      color   000  x000D      border 1px solid  ccc  x000D      display  block  x000D    x000D   x000D  button hover  x000D      background   fff  x000D      cursor  pointer  x000D    x000D   lt p id  urlbox  gt  lt  p gt  x000D   lt textarea id  txt  disabled  true  gt  lt  textarea gt  x000D   lt div id  buttonContainer  gt  lt  div gt  x000D   x000D   x000D    It s much more robust  doesn t rely on regex  combines the best parts of both the previous approaches  and will validate your input  You can give it query strings other than the one from the url  and it will fail loudly if you give bad input  Moreover  like a good object module  it doesn t know or care about anything outside of the class definition  so it can be used with anything    The constructor automatically populates its internal table and decodes each string such that     foo 3F bar 20baz amp ampersand this 20thing 3A 20 26  for example  will internally become          foo           bar baz        ampersand     this thing   amp       All the work is done for you at instantiation   Here s how to use it   var qst   new QuerystringTable location href   qst getKeys             returns an array of keys qst getValue  foo       returns the value of foo  or  undefined  if none  qst getQuerystring      returns the querystring   That s much better  And leaving the url part up to the programmer both allows this to be used in non-browser environments  tested in both node js and a browser   and allows for a scenario where you might want to compare two different query strings   var qs1   new QuerystringTable    url  1          qs2   new QuerystringTable    url  2       if  qs1 getValue  vid       qs2 getValue  vid            Do something       As I said above  there were two messy methods that are referenced by this answer  I m keeping them here so readers don t have to hunt through revision history to find them  Here they are      1  Direct parse by function  This just grabs the url and parses it directly with RegEx    GET function key def       try          return RegExp     amp     key        amp         exec location href  1       catch e           return def                   Easy peasy  if the query string is  ducksays quack amp bearsays growl  then   GET  ducksays   should return quack and   GET  bearsays   should return growl      Now you probably instantly notice that the syntax is different as a result of being a function  Instead of   GET key   it is   GET key   Well  I thought of that         Here comes the second method       2  Object Build by Loop  onload function          GET     the lack of  var  makes this global     str location search split   amp     not      this will be dealt with later     for i in str           REG RegExp       amp            amp         exec str i             GET REG 1   REG 2                Behold    GET is now an object containing an index of every object in the url  so now this is possible     GET  ducksays    returns  quack        AND this is possible  for i in   GET       document write i        GET i    lt hr gt            This is definitely not possible with the function      Again  I don t recommend this old code  It s badly written

User · Answer

I think the easiest route is to include the jQuery javascript library in your webpages  then use JSON as format to pass data between the two   In your HTML pages  you can request data from the PHP scripts like this     getJSON  http   foo bar php     num1   12   num2   27   function e        alert  Result from PHP      e result         In bar php you can do this    num1     GET  num1     num2     GET  num2    echo json encode array  result    gt   num1    num2      This is what s usually called AJAX  and it is useful to give web pages a more dynamic and desktop-like feel  you don t have to refresh the entire page to communicate with PHP    Other techniques are simpler   As others have suggested  you can simply generate the variable data from your PHP script    foo   123  echo   lt script type   text javascript   gt  n   echo  var foo     foo   n   echo  alert  value is     foo   n   echo   lt  script gt  n     Most web pages nowadays use a combination of the two

User · Answer

You can pass PHP Variables to your JavaScript by generating it with PHP    lt  php  someVar   1    gt    lt script type  text javascript  gt      var javaScriptVar     lt  php echo  someVar    gt     lt  script gt

User · Answer

You can print the PHP variable into your javascript while your page is created    lt script type  text javascript  gt      var MyJSStringVar     lt  php Print  MyPHPStringVar     gt        var MyJSNumVar    lt  php Print  MyPHPNumVar     gt    lt  script gt    Of course this is for simple variables and not objects

User · Answer

You can pass PHP Variables to your JavaScript by generating it with PHP    lt  php  someVar   1    gt    lt script type  text javascript  gt      var javaScriptVar     lt  php echo  someVar    gt     lt  script gt

User · Answer

You can print the PHP variable into your javascript while your page is created    lt script type  text javascript  gt      var MyJSStringVar     lt  php Print  MyPHPStringVar     gt        var MyJSNumVar    lt  php Print  MyPHPNumVar     gt    lt  script gt    Of course this is for simple variables and not objects

User · Answer

You can pass PHP Variables to your JavaScript by generating it with PHP    lt  php  someVar   1    gt    lt script type  text javascript  gt      var javaScriptVar     lt  php echo  someVar    gt     lt  script gt

User · Answer

You can print the PHP variable into your javascript while your page is created    lt script type  text javascript  gt      var MyJSStringVar     lt  php Print  MyPHPStringVar     gt        var MyJSNumVar    lt  php Print  MyPHPNumVar     gt    lt  script gt    Of course this is for simple variables and not objects

User · Answer

It depends on what type of PHP variable you want to use in Javascript. For example, entire PHP objects with class methods cannot be used in Javascript. You can, however, use the built-in PHP JSON (JavaScript Object Notation) functions to convert simple PHP variables into JSON representations. For more information, please read the following links:

You can generate the JSON representation of your PHP variable and then print it into your Javascript code when the page loads. For example:

<script type="text/javascript">
  var foo = <?php echo json_encode($bar); ?>;
</script>

User · Answer

lt  php   j 1    gt   lt script gt  var i     lt  php echo  j    gt      Do something  lt  script gt   lt  php echo  j    gt    This is the easiest way of passing a php variable to javascript without Ajax   You can also use something like this   var i     lt  php echo json encode  j     gt      This said to be safer or more secure  i think

[php] Get variable from PHP to JavaScript

Examples related to php

Examples related to javascript