title: Passing value inside JavaScript function and saving it into a PHP variable
body: <p>I am creating an application like that of Facebook photo albums having comments.</p>
  
  <p>I have a webpage, which shows the pics inside an album, when a pic is clicked, a lightbox opens up, and the caption and comments on the pic will be shown. Here's the pictures.php code</p>
  
  <pre><code>&lt;?php
  session_start();
  ob_start;
  include('connection.php');
  ?&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Photos&lt;/title&gt;
  &lt;style type="text/css"&gt;
  .wraptocenter
          {
      width: 200px;
      height: 150px;
      overflow: hidden;
          }
  
  .wraptocenter img
          {
      vertical-align: top;
          }
  
  .black_overlay
          {
              display: none;
              position: fixed;
              top: 0%;
              left: 0%;
              width: 100.7%;
              height: 100%;
              background-color: black;
              z-index: 1001;
              -moz-opacity: 0.8;
              opacity: .80;
              filter: alpha(opacity=80);
          }
  
  .white_imagebox
          {
              display: none;
              position: fixed;
              top: 5%;
              left: 6%;
              width: 900px;
              height: 500px;
              padding: 0px;
              border: 0px solid #a6c25c;
              background-color: white;
              z-index: 1002;
              overflow: visible;
  
          }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="AJAX/AjaxInsertPicComment.js"&gt;&lt;/script&gt;     
  &lt;script&gt;
  function showpic(image_path,image_id,album_id,pic_caption)
  {
  
      document.getElementById('AlbumDiv').style.display = "block";
      document.getElementById('fade').style.display = "block";
      document.getElementById('image').src = image_path; // this line added
      img = new Image();
      img.src = image_path;
      document.getElementById('t_albumid').value = album_id;
      document.getElementById('t_imageid').value = image_id;
      document.getElementById('t_albid').value = album_id;
      document.getElementById('t_picid').value = image_id;
      document.getElementById('albumid').value = album_id;
      document.getElementById('imageid').value = image_id;
      document.getElementById('t_imagepath').value = image_path;
      document.getElementById('caption_holder').value = pic_caption;
      if(img.width &gt; 500 &amp;&amp; img.height &gt; 450)
          {
                 if(img.width &gt; img.height)
                    {
  
                         document.getElementById('image').style.width = "500px";
                         document.getElementById('image').style.height = 'auto';
                         delete img;
                         return false;
                    }
                else
                    {  
                         document.getElementById('image').style.height = "450px";
                         document.getElementById('image').style.width = 'auto';
                         delete img;
                         return false;
                    }            
          }
      else if(img.height &gt; 450 &amp;&amp; img.width &lt; 500)
          {
                document.getElementById('image').style.height = "450px";
                delete img;
                return false;
          }     
      else if(img.height &lt; 450 &amp;&amp; img.width &gt; 500)
          {
               if(img.width &gt; img.height)
                    {
                         document.getElementById('image').style.width = "500px";
                         document.getElementById('image').style.height = 'auto';
                         delete img;
                         return false;
                    }
               else
                    {
                         document.getElementById('image').style.height = "450px";
                         document.getElementById('image').style.width = 'auto';
                         delete img;
                         return false;
                    }   
          }
      else if(img.width &lt; 500 &amp;&amp; img.height &lt; 450)
          {
                if(img.width &gt; img.height)
                    {
                         document.getElementById('image').style.width = "500px";
                         document.getElementById('image').style.height = 'auto';
                         delete img;
                         return false;
                    }
                else
                    {  
                         document.getElementById('image').style.height = "450px";
                         document.getElementById('image').style.width = 'auto';
                         delete img;
                         return false;
                    }            
          }                    
      delete img;
      alert("humm");
      return false;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="photo_holder"&gt;
  &lt;table width="1000px" cellpadding="0" cellspacing="0" border="0" align="center"&gt;
  &lt;tr&gt;
  &lt;td width="50px" align="center"/&gt;
  &lt;td align="center" colspan="2" background="Images/header_menu.png" style="padding-right:2px;"&gt;
  &lt;?php include('header.php');?&gt;
  &lt;/td&gt;
  &lt;td width="50px" align="center"/&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td width="50px" align="center" &gt;&lt;/td&gt;
  &lt;td width="600px" align="center"&gt;
      &lt;?php
      $album_id=$_REQUEST['txt_albumid'];
      echo $album_id;
     /* how many columns */
      $column_number='3';
      /* html table start */
      ?&gt;
      &lt;div id="photo_container" align="center" width="600px"&gt;
          &lt;table border="1px" cellspacing="5" cellpadding="0" align="left"&gt;
          &lt;?php
          $sql="SELECT * FROM candidate_pics WHERE album_id='$album_id'";
          $result=mysql_query($sql,$con);
         // $row=mysql_fetch_array($result);
          $recordcounter=1;  /* counts the records while they are in loop */
          while($row=mysql_fetch_array($result))
          { 
                                 /* decide if there will be new Table row (&lt;TR&gt;) or not ... left of division by column number is the key */
                         if($recordcounter%$column_number==1)
                             { 
                                 echo "&lt;tr&gt;"; 
                             }
                          ?&gt;                      
                          &lt;td align="center" width="200px"&gt;
                          &lt;div class="wraptocenter" align="center"&gt;
                          &lt;?php $_SESSION['pic_id']=$row[pic_id];?&gt;
                          &lt;a href="javascript:void(0)" 
                          onClick="showpic('&lt;?php echo $row[pic_path];?&gt;','&lt;?php echo $row[pic_id];?&gt;',
                          '&lt;?php echo $row[album_id];?&gt;','&lt;?php echo $row[pic_caption];?&gt;')";&gt;
                          &lt;img src="&lt;?php echo $row[pic_path];?&gt;"/&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;/td&gt;                                   
                          &lt;?php
                          /* decide if there will be end of table row */
                          if($recordcounter%$column_number==0)
                             { 
                                  echo "&lt;/tr&gt;"; 
                             }
                          $recordcounter++;  /* increment the counter */
          }
  
          if(($recordcounter%$column_number)!=1){ echo "&lt;/tr&gt;"; }  
          ?&gt;
          &lt;/table&gt;
       &lt;/div&gt;
  &lt;/td&gt;
  &lt;td width="300px" align="center" &gt;
  &lt;div id="photo_uploader"&gt;
  &lt;form method="post" action="photo_upload.php" enctype="multipart/form-data"&gt;
     &lt;table width="300px" align="center" border="0" cellspacing="0" cellpadding="0"&gt;
         &lt;tr&gt;
         &lt;td align="center" width="100px"&gt;Upload Pic::&lt;/td&gt;
         &lt;td align="center" width="200px"&gt;
             &lt;input type="file" name="file" id="file" style="width: 200px;"/&gt;
         &lt;/td&gt; 
         &lt;/tr&gt;
         &lt;tr&gt;
         &lt;td align="center" width="100px"/&gt;
         &lt;td align="center" width="200px"&gt;
             &lt;input type="submit" name="submit_pic" id="submit_pic" value="Click to upload" style="width: 200px;"/&gt;
             &lt;input name="txt_albumid" type="hidden" value="&lt;?php echo $album_id;?&gt;"/&gt;
         &lt;/td&gt; 
         &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;     
  &lt;/div&gt;
  &lt;/td&gt;
  &lt;td width="50px" align="center" &gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="AlbumDiv" class="white_imagebox"&gt;
  &lt;table align="center" cellpadding="0" cellspacing="0" border="0" width="900px"&gt;
      &lt;tr&gt;
           &lt;td colspan="2" height="25px"&gt;
           &lt;div id="close"&gt;
               &lt;a href="javascript:void(0)" 
               onclick="document.getElementById('AlbumDiv').style.display = 
               'none';document.getElementById('fade').style.display='none'"&gt;
               &lt;img src="images/close-icon.png" style="border-style: none; border-color: inherit;
               border-width: 0px; height: 17px; width: 16px;" align="right" /&gt;&lt;/a&gt;
           &lt;/div&gt;
           &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
           &lt;td width="600px" align="center"&gt;
              &lt;table width="600px" cellpadding="0" cellspacing="0" border="0"&gt;
                 &lt;tr&gt;
                     &lt;td width="50px" align="center"/&gt;
                     &lt;td align="center" width="500px"&gt;
                        &lt;div id="image_holder" style="width: 500px; height: 450px; 
                        background-color:#666666;"&gt;
                        &lt;input type="image" id="image" name="image"/&gt;
                        &lt;/div&gt;
                     &lt;/td&gt;
                     &lt;td width="50px" align="center"/&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td/&gt;
                      &lt;td&gt;
                      &lt;input type="text" id="caption_holder" name="caption_holder" 
                      style="width:500px;"/&gt;
                      &lt;/td&gt;
                  &lt;td/&gt;
                  &lt;/tr&gt;
               &lt;/table&gt;
           &lt;/td&gt;   
           &lt;td width="300px" align="center"&gt;
           &lt;table width="300px" cellpadding="0" cellspacing="0" border="0" align="top"&gt;
                 &lt;tr&gt;
                     &lt;td align="center" width="100px"&gt;
                     &lt;form method="post" action="photo_delete.php"&gt;
                     &lt;input type="submit" name="delete" id="delete" value="Delete" 
                     class="button" style="width: 100px;"/&gt;
                     &lt;input type="hidden" name="t_imageid" id="t_imageid"/&gt;
                     &lt;input type="hidden" name="t_imagepath" id="t_imagepath"/&gt;
                     &lt;input type="hidden" name="t_albumid" id="t_albumid"/&gt;
                     &lt;/form&gt;
                     &lt;/td&gt;
                     &lt;td align="center" width="100px"&gt;
                     &lt;form&gt;
                     &lt;input type="button" name="edit" id="edit" value="Edit" class="button"
                     style="width: 100px;" 
                     onclick="document.getElementById('pic_caption').style.visibility = 'visible'; 
                     document.getElementById('enter_caption').style.visibility = 'visible';"/&gt;
                     &lt;/form&gt;
                     &lt;/td&gt;
                     &lt;td align="center" width="100px"&gt;
                     &lt;form method="post" action=""&gt;
                     &lt;input type="submit" name="cover_pic" id="cover_pic" value="Set CoverPic" class="button"
                     style="width: 100px;"/&gt;
                     &lt;input type="hidden" name="t_albumname" id="t_albumname"/&gt;
                     &lt;input type="hidden" name="t_imagename" id="t_imagename"/&gt;
                     &lt;/form&gt;
                     &lt;/td&gt;   
                 &lt;/tr&gt;
                 &lt;tr&gt;
                    &lt;td height="100px" colspan="3"&gt;
                    &lt;form method="post" action="photo_edit.php"&gt;
                    &lt;input type="text" name="pic_caption" id="pic_caption" style="visibility:hidden;"/&gt;
                    &lt;input type="submit" name="enter_caption" id="enter_caption" style="visibility:hidden;"/&gt;
                    &lt;input type="hidden" name="t_picid" id="t_picid"/&gt;
                    &lt;input type="hidden" name="t_albid" id="t_albid"/&gt;
                    &lt;/form&gt;
                    &lt;/td&gt;   
                 &lt;/tr&gt;
                 &lt;tr&gt;
                     &lt;td height="300px" colspan="3"&gt;
                     &lt;div id="" style="overflow-y:scroll; height:300px;"&gt;
                        &lt;table width="282px" cellpadding="0" cellspacing="0" border="0" 
                        align="center"&gt;
                            &lt;tr&gt;
                            &lt;td&gt;
                                &lt;?php
                                 echo $_SESSION[pic_id];?&gt;
                                &lt;div id="message_report"&gt;
                                &lt;/div&gt;
                            &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;tr&gt;
                            &lt;td&gt;
                                &lt;form method="post" action=
                                "javascript:get(document.getElementById('pic_comment_form'));" name=
                                "pic_comment_form" id="pic_comment_form"&gt;
                                &lt;table width="280px" cellpadding="0" cellspacing="0" border="0" 
                                align="center" &gt;
                                &lt;tr&gt;
                                &lt;td width="100px"&gt;
                                &lt;input type="text" name="comment" id="comment" style="width:100px"/&gt;
                                &lt;/td&gt;
                                &lt;td width="80px"/&gt;
                                &lt;td width="100px"&gt;
                                &lt;input type="submit" name="comment_enter" id="comment_enter" style="width:100px"/&gt;
                                &lt;/td&gt;
                                &lt;tr&gt;
                                &lt;td&gt;
                                &lt;input type="hidden" name="albumid" id="albumid"/&gt;&lt;/td&gt;
                                &lt;td&gt;
                                &lt;input type="hidden" name="imageid" id="imageid"/&gt;&lt;/td&gt;
                                &lt;td&gt;
                                &lt;input type="hidden" name="user" id="user" 
                                value="&lt;?php echo $_SESSION[logged_user];?&gt;"/&gt;&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;/table&gt;
                                &lt;/form&gt;
                            &lt;/td&gt;
                            &lt;/tr&gt;
                        &lt;/table&gt; 
  
                     &lt;/div&gt;
                     &lt;/td&gt;
                 &lt;/tr&gt;
           &lt;/table&gt;
           &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="fade" class="black_overlay"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The code </p>
  
  <pre><code>&lt;a href="javascript:void(0)" 
                          onClick="showpic('&lt;?php echo $row[pic_path];?&gt;','&lt;?php echo $row[pic_id];?&gt;',
                          '&lt;?php echo $row[album_id];?&gt;','&lt;?php echo $row[pic_caption];?&gt;')";&gt;
                          &lt;img src="&lt;?php echo $row[pic_path];?&gt;"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>pass the album_id, pic_id to the javascript functions which is then passed to the objects in the lightbox such as id="t_albumid", id="t_imageid"</p>
  
  <p>I need to write a SQL query in the lightbox like this:</p>
  
  <pre><code>SELECT * FROM  candidate_pics_comment WHERE pic_id='$VariableHavingPicId
  </code></pre>
  
  <p>but for this I must use the variable in the JavaScript <code>image_id</code> and pass it again to the lightbox div in the JavaScript. The code:</p>
  
  <pre><code>document.getElementById('t_imageid').value = image_id;
  </code></pre>
  
  <p>assigns the object, the value as image_id, but how can we assign the image_id to a php variable so that I can use it in the sql query?</p>
  
  <p>I mean in the JavaScript can it be something like this:</p>
  
  <pre><code>function showpic(image_path,image_id,album_id,pic_caption)
  {
      &lt;?php
      $var = //assign the value image_id;?&gt;
      // rest of the code here;
  }
  </code></pre>
  
  <p>I know it's not possible, but is there some trick to achieve this?</p>
  
  <p>Moreover as I was experimenting, I did something like this:</p>
  
  <pre><code>function showpic(image_path,image_id,album_id,pic_caption)
  {
      &lt;?php
      $_SESSION[pic_id]="hmmm";?&gt;
      //rest codes;
  } 
  </code></pre>
  
  <p>Then when I used <code>echo $_SESSION[pic_id]</code> in php script, it displayed <code>hmmm</code></p>
  
  <p>So I was thinking can it be done something like this?</p>
  
  <pre><code>function showpic(image_path,image_id,album_id,pic_caption)
      {
          &lt;?php
          $_SESSION[pic_id]=//assign image_id to session variable;?&gt;
          //rest codes;
      } 
  </code></pre>
  
  <p>Besides I used AJAX application, but I saw that AJAX returns the response to the objects innerHTML, how ca it be stored in a php variable?</p>
  
  <h2>Update</h2>
  
  <p>My question is that, I am passing values from this </p>
  
  <pre><code>&lt;a href="javascript:void(0)" 
                          onClick="showpic('&lt;?php echo $row[pic_path];?&gt;','&lt;?php echo $row[pic_id];?&gt;',
                          '&lt;?php echo $row[album_id];?&gt;','&lt;?php echo $row[pic_caption];?&gt;')";&gt;
                          &lt;img src="&lt;?php echo $row[pic_path];?&gt;"/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>to the JavaScript fiunction</p>
  
  <pre><code>function showpic(image_path,image_id,album_id,pic_caption)
  </code></pre>
  
  <p>Now how can I assign image_id to a PHP variable which I can use in the div <code>AlbumDiv</code> which is used for the lightbox. If that not possible how can a session variable be assign the value of image_id, is it possible inside the JavaScript function?</p>