Loading PHP variable in Javascript function

Question

Edit: Entire page (HTML)

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax Test</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // select all the links with class="lnk", when one of them is clicked, get its "href" value
  // load the content from that URL and place it into the tag with id="content"
  $('a.lnk').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
    return false;
  });
});
--></script>

<script type="text/javascript">
 function foo(bar) {
      if(bar == "all-all-all-all-") {
          $('#content').load('extern.php');
      }
  }
</script>

<meta name="robots" content="index, follow, noarchive" />
        <link rel="stylesheet" href="style.css" type="text/css" />

        <!-- This includes the ImageFlow CSS and JavaScript -->
        <link rel="stylesheet" href="imageflow.packed.css" type="text/css" />
        <script type="text/javascript" src="imageflow.packed.js"></script>

        <style type="text/css">
            p.flip {
            z-index: 1000;
            position:absolute;
            right: 0;
            color: #fff;
            }
            div.panel,p.flip
            {
            margin:0px;
            text-align:center;
            }
            div.panel
            {
            height:110px;
            display:none;
            background: #000;
            border-bottom: 1px solid #333;
            margin: 0;
            width: 100%;
            position:absolute;
            z-index: 999;
            padding-top: 10px;
            }
            div.panel a {
            display: block;
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #333;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            text-decoration: none;
            }
            div.panel a:hover {
            color: #ccc;
            }
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

        <script type="text/javascript"> 
        $(document).ready(function(){
        $(".flip").click(function(){
            $(".panel").slideToggle("slow");
          });
        });
        </script>
</head>
<body>

    <p class="flip" style="display: block; padding: 10px;"><img src="menu.png"/></p>
    <div class="panel">
        <h2>Coverflow View</h2>

        <div class="form">
        <form action="/CSpace/coverflowview/test4/index.php" method="post">

        <select name="projects">

            <!-- Sticky dropdown -->

            <option value="all" selected="selected">All Projects</option><option value="" disabled="disabled"> ---------- </option>                        
            <option value="all">All Projects</option><option value="Ducks and ducklings" >Ducks and ducklings</option>
<option value="Oil Spill" >Oil Spill</option>
<option value="carrots and sticks" >carrots and sticks</option>
<option value="NewProject" >NewProject</option>
<option value="Test2" >Test2</option>
<option value="Test1" >Test1</option>
<option value="ASIST" >ASIST</option>
        </select>

        <select id="objects" name="objects">

            <!-- Sticky dropdown -->
                            <option value="all" selected="selected">All Objects</option><option value="" disabled="disabled"> ---------- </option>                        
            <option value="all">All Objects</option>
            <option value="pages" >Webpages</option>
            <option value="saved" >Bookmarks</option>
            <option value="queries" >Searches</option>
            <option value="snippets" >Snippets</option>
            <option value="annotations" >Annotations</option>
        </select>

        <select id="years" name="years">

            <!-- Sticky dropdown -->

            <option value="all" selected="selected">All Years</option><option value="" disabled="disabled"> ---------- </option>                        
            <option value="all">All Years</option>
            </OPTION></OPTION><OPTION VALUE=2011>2011<OPTION VALUE=2009>2009        </select>

        <select id="months" name="months">

            <!-- Sticky dropdown -->

            <option value="all" selected="selected">All Months</option><option value="" disabled="disabled"> ---------- </option>                        
            <option value="all">All Months</option>
            <option value=05>May</option><option value=06>Jun</option><option value=07>Jul</option><option value=10>Oct</option><option value=11>Nov</option><option value=12>Dec</option>        </select>

        <input type="checkbox" name="userOnly" value="Yes"  /> <span style="font-size: 12px;">My stuff only</span>

        <input type="submit" name="formSubmit" value="Submit" />
        </form>
        </div>

        <div style="clear:both;"></div>

        <div class="details">Viewing <b>All Objects</b> from <b>All Projects</b> from <b>All Months</b> <b>All Years</b></div>"all-all-all-all-"                

                <script type="text/javascript">
  foo("all-all-all-all-" ) ;
</script>';
        </div>
    </div>


<a href="extern.php" title="Get extern" class="lnk">Get extern</a>
<div id="content">Initial content in test.html</div>
</body>
</html>

Edit: Entire page (PHP)

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax Test</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // select all the links with class="lnk", when one of them is clicked, get its "href" value
  // load the content from that URL and place it into the tag with id="content"
  $('a.lnk').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
    return false;
  });
});
--></script>

<script type="text/javascript">
 function foo(bar) {
      if(bar == "all-all-all-all-") {
          $('#content').load('extern.php');
      }
  }
</script>

<meta name="robots" content="index, follow, noarchive" />
        <link rel="stylesheet" href="style.css" type="text/css" />

        <!-- This includes the ImageFlow CSS and JavaScript -->
        <link rel="stylesheet" href="imageflow.packed.css" type="text/css" />
        <script type="text/javascript" src="imageflow.packed.js"></script>

        <style type="text/css">
            p.flip {
            z-index: 1000;
            position:absolute;
            right: 0;
            color: #fff;
            }
            div.panel,p.flip
            {
            margin:0px;
            text-align:center;
            }
            div.panel
            {
            height:110px;
            display:none;
            background: #000;
            border-bottom: 1px solid #333;
            margin: 0;
            width: 100%;
            position:absolute;
            z-index: 999;
            padding-top: 10px;
            }
            div.panel a {
            display: block;
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: #333;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            text-decoration: none;
            }
            div.panel a:hover {
            color: #ccc;
            }
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

        <script type="text/javascript"> 
        $(document).ready(function(){
        $(".flip").click(function(){
            $(".panel").slideToggle("slow");
          });
        });
        </script>
</head>
<body>
    <?php 
    // Connecting to database
    $userID=2;

    $getPage="SELECT * FROM pages,thumbnails WHERE thumbnails.thumbnailID=pages.thumbnailID AND pages.userID=".$userID." AND pages.projectID='8'";
    $pageResult = mysql_query($getPage) or die(" ". mysql_error());
    ?>

    <p class="flip" style="display: block; padding: 10px;"><img src="menu.png"/></p>
    <div class="panel">
        <h2>Coverflow View</h2>

        <div class="form">
        <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">

        <select name="projects">

            <!-- Sticky dropdown -->
            <?php
            if(isset($_POST['formSubmit'])) 
            {?>

            <? if($_POST['projects'] == 'all') { echo '<option value="all" selected="selected">All Projects</option>'; echo '<option value="" disabled="disabled"> ---------- </option>'; }
            else {?>
                <option value="<?php echo $_POST['projects']; ?>" selected="selected"><?php echo $_POST['projects']; ?></option>
                <option value="" disabled="disabled"> ---------- </option>
            <? } ?>
            <?php } ?>

            <?php
                echo '<option value="all">All Projects</option>';
                $query = "SELECT * FROM memberships WHERE userID='$userID'";
                $results = mysql_query($query) or die(" ". mysql_error());
                while ($line = mysql_fetch_array($results, MYSQL_ASSOC)) {  
                    $projID = $line['projectID'];
                    $query1 = "SELECT * FROM projects WHERE projectID='$projID'";
                    $results1 = mysql_query($query1) or die(" ". mysql_error());
                    $line1 = mysql_fetch_array($results1, MYSQL_ASSOC);
                    $title = $line1['title'];
                    echo "<option value=\"$title\" ";
                    if ($projID==$projectID)
                        echo "SELECTED";
                        echo ">$title</option>\n";
                }
            ?>
        </select>

        <select id="objects" name="objects">

            <!-- Sticky dropdown -->
            <?php
            if(isset($_POST['formSubmit'])) 
            {?>
                <? switch ($_POST['objects']) {
                    case 'pages':
                        echo '<option value="pages" selected="selected">Webpages</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case 'saved':
                        echo '<option value="saved" selected="selected">Bookmarks</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case 'queries':
                        echo '<option value="queries" selected="selected">Searches</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case 'snippets':
                        echo '<option value="snippets" selected="selected">Snippets</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case 'annotations':
                        echo '<option value="annotations" selected="selected">Annotations</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case 'all':
                        echo '<option value="all" selected="selected">All Objects</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                } ?>
            <? } ?>

            <option value="all">All Objects</option>
            <option value="pages" <?php if ($objects=="pages") echo "SELECTED";?>>Webpages</option>
            <option value="saved" <?php if ($objects=="saved") echo "SELECTED";?>>Bookmarks</option>
            <option value="queries" <?php if ($objects=="queries") echo "SELECTED";?>>Searches</option>
            <option value="snippets" <?php if ($objects=="snippets") echo "SELECTED";?>>Snippets</option>
            <option value="annotations" <?php if ($objects=="annotations") echo "SELECTED";?>>Annotations</option>
        </select>

        <select id="years" name="years">

            <!-- Sticky dropdown -->
            <?php
            if(isset($_POST['formSubmit'])) 
            {?>

            <? if($_POST['years'] == 'all') { echo '<option value="all" selected="selected">All Years</option>'; echo '<option value="" disabled="disabled"> ---------- </option>'; }
            else {?>
                <option value="<?php echo $_POST['years']; ?>" selected="selected"><?php echo $_POST['years']; ?></option>
                <option value="" disabled="disabled"> ---------- </option>
            <? } ?>
            <?php } ?>

            <option value="all">All Years</option>
            <? 
            $sql_year="SELECT DISTINCT date FROM actions WHERE userID=".$userID." AND (action='page' OR action='query' OR action='add-annotation' OR action='save-snippet') ORDER BY date DESC";
            $result_year=mysql_query($sql_year); 

            $options=""; 
            $y=array();

            while ($row=mysql_fetch_array($result_year)) { 
                $date=$row["date"];  
                $year = date("Y",strtotime($date));

                if (!in_array($year, $y)){ 
                    $y[] = $year;
                    $options.="<OPTION VALUE=".$year.">".$year; echo'</OPTION>';  
                }

            } 
            echo $options;
            ?>
        </select>

        <select id="months" name="months">

            <!-- Sticky dropdown -->
            <?php
            if(isset($_POST['formSubmit'])) 
            {?>

            <? switch ($_POST['months']) {
                    case '01':
                        echo '<option value="01" selected="selected">Jan</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '02':
                        echo '<option value="02" selected="selected">Feb</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '03':
                        echo '<option value="03" selected="selected">Mar</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '04':
                        echo '<option value="04" selected="selected">Apr</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '05':
                        echo '<option value="05" selected="selected">May</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '06':
                        echo '<option value="06" selected="selected">Jun</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '07':
                        echo '<option value="07" selected="selected">Jul</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '08':
                        echo '<option value="08" selected="selected">Aug</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '09':
                        echo '<option value="09" selected="selected">Sept</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '10':
                        echo '<option value="10" selected="selected">Oct</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '11':
                        echo '<option value="11" selected="selected">Nov</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case '12':
                        echo '<option value="12" selected="selected">Dec</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                    case 'all':
                        echo '<option value="all" selected="selected">All Months</option>'; echo '<option value="" disabled="disabled"> ---------- </option>';
                        break;
                } ?>
            <? } ?>

            <option value="all">All Months</option>
            <?
            $sql_month="SELECT DISTINCT date FROM actions WHERE userID=".$userID." AND (action='page' OR action='query' OR action='add-annotation' OR action='save-snippet')"; 
            $result_month=mysql_query($sql_month);

            $m=array();

            while ($row2=mysql_fetch_array($result_month)) { 
                $date2=$row2["date"]; 
                $month = date("m",strtotime($date2));

                if (!in_array($month, $m)){ 
                    if($month == 01 || $month == 02 || $month == 03 || $month == 04 || $month == 05 || $month == 06 || $month == 07 || $month == 08 || $month == 09 || $month == 10 || $month == 11 || $month == 12) {
                      $m[] = $month;
                    }
                }
            } 

            sort($m);

            for($i = 0; $i < count($m); ++$i) {
                echo "<option value=".$m[$i].">";
                if($m[$i]==01) { echo "Jan"; }
                elseif($m[$i]==02) { echo "Feb"; }
                elseif($m[$i]==03) { echo "Mar"; }
                elseif($m[$i]==04) { echo "Apr"; }
                elseif($m[$i]==05) { echo "May"; }
                elseif($m[$i]==06) { echo "Jun"; }
                elseif($m[$i]==07) { echo "Jul"; }
                elseif($m[$i]==08) { echo "Aug"; }
                elseif($m[$i]==09) { echo "Sept"; }
                elseif($m[$i]==10) { echo "Oct"; }
                elseif($m[$i]==11) { echo "Nov"; }
                elseif($m[$i]==12) { echo "Dec"; }
                echo "</option>";
            }
            ?>
        </select>

        <input type="checkbox" name="userOnly" value="Yes" <?php if (isset($_POST['userOnly']) == 'Yes') { echo 'checked="checked"'; }?> /> <span style="font-size: 12px;">My stuff only</span>

        <input type="submit" name="formSubmit" value="Submit" />
        </form>
        </div>

        <div style="clear:both;"></div>

        <?php
            if(isset($_POST['formSubmit'])) 
            {
                $varProjects = $_POST['projects'];
                $varObjects = $_POST['objects'];
                $varYears = $_POST['years'];
                $varMonths = $_POST['months'];
                $userOnly = $_POST['userOnly'];

                $str = $varProjects.'-'.$varObjects.'-'.$varYears.'-'.$varMonths.'-'.$userOnly;

                echo '<div class="details">';
                echo 'Viewing ';
                // Objects
                switch ($varObjects) {
                    case "all":
                        echo "<b>All Objects</b>";
                        break;
                    case "pages":
                        echo "<b>Webpages</b>";
                        break;
                    case "saved":
                        echo "<b>Bookmarks</b>";
                        break;
                    case "queries":
                        echo "<b>Searches</b>";
                        break;
                    case "snippets":
                        echo "<b>Snippets</b>";
                        break;
                    case "annotations":
                        echo "<b>Annotations</b>";
                        break;
                }

                echo ' from ';

                //  Projects
                if($varProjects == "all") {
                    echo "<b>All Projects</b>";
                }
                else {
                    echo "<b>".$varProjects."</b>";
                }

                echo ' from ';

                // Months
                switch ($varMonths) {
                    case "all":
                        echo "<b>All Months</b>";
                        break;
                    case 01:
                        echo "<b>Jan</b>";
                        break;
                    case 02:
                        echo "<b>Feb</b>";
                        break;
                    case 03:
                        echo "<b>Mar</b>";
                        break;
                    case 04:
                        echo "<b>Apr</b>";
                        break;
                    case 05:
                        echo "<b>May</b>";
                        break;
                    case 06:
                        echo "<b>Jun</b>";
                        break;
                    case 07:
                        echo "<b>Jul</b>";
                        break;
                    case 08:
                        echo "<b>Aug</b>";
                        break;
                    case 09:
                        echo "<b>Sept</b>";
                        break;
                    case 10:
                        echo "<b>Oct</b>";
                        break;
                    case 11:
                        echo "<b>Nov</b>";
                        break;
                    case 12:
                        echo "<b>Dec</b>";
                        break;
                }

                echo ' ';

                // Years
                if($varYears == "all") {
                    echo "<b>All Years</b>";
                }
                else {
                    echo "<b>".$varYears."</b>";
                }   
                echo '</div>';

                echo json_encode($str);
       ?>


       <script type="text/javascript">
          foo(<?php echo json_encode($str)?> ) ;
       </script>';
        <?
            }
        ?>
        </div>
    </div>


<a href="extern.php" title="Get extern" class="lnk">Get extern</a>
<div id="content">Initial content in test.html</div>
</body>
</html>

I have a series of dropdowns. I want to use the combination selected to decide what page the user will be redirected to. On submit, I combine the values selected into a PHP variable $str.

 if(isset($_POST['formSubmit'])) 
            {
                $varProjects = $_POST['projects'];
                $varObjects = $_POST['objects'];
                $varYears = $_POST['years'];
                $varMonths = $_POST['months'];
                $userOnly = $_POST['userOnly'];

                $str = $varProjects.'-'.$varObjects.'-'.$varYears.'-'.$varMonths.'-'.$userOnly;

I then call the function.

echo '<script type="text/javascript">';
                echo 'foo('.$str.')';
                echo '</script>';

Which looks like this

<script type="text/javascript">
 function foo(bar) {
      if(bar == "all-all-all-all-") {
          $('#content').load('extern.php');
      }
  }
</script>

I have tried passing variables like this on other pages and it works, maybe it's something within the function? Thanks.

@BrendanMcKenzie is right. You need to quote your string in javascript — Cfreak
– Cfreak, Commented Apr 3, 2012 at 18:08
@BrendanMcKenzie Just adding the quote is not enough, the string may contain characters that need to be escaped, see my answer — Ruan Mendes
– Ruan Mendes, Commented Apr 3, 2012 at 18:09

Ruan Mendes · Accepted Answer · 2012-04-03 19:43:59Z

4

This is what your code is producing

foo(all-all-all)

Instead of

foo("all-all-all")

It's because you're not properly encoding your string, it's missing the quotes. My suggestion is to always use json_encode when creating a variable from PHP. That will always create something that is valid for JS, whether it's a string with characters that need to be encoded, a boolean, or a number, or an array

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

edited Apr 3, 2012 at 19:43

answered Apr 3, 2012 at 18:07

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

14 Comments

user1067577 Over a year ago

unfortunately, adding the quotes didn't seem to make a difference, or the json_encode.

Ruan Mendes Over a year ago

@user1067577 "Didn't seem to make a difference" is not very helpful. Be more descriptive. What is the output of the PHP code? What is not working? I guarantee you that you're missing something...

Ruan Mendes Over a year ago

@user1067577 The code that calls echo '<script type="text/javascript">'; echo 'foo('.$str.')'; echo '</script>'; is generating some HTML, what is that output? If you've got no output, you have a different problem

Ruan Mendes Over a year ago

@user1067577 That doesn't make sense: echo '<script type="text/javascript">' has to output <script type="text/javascript">

Ruan Mendes Over a year ago

@user1067577 What is the new code that you are trying to run?

|

Collectives™ on Stack Overflow

Loading PHP variable in Javascript function

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related