如何将变量从表单传递到javascript弹出表单？

Question

I have a form with a button which opens a javascript/css popup window. On the popup window I have a textarea which will be used to add a comment to a database field. The problem is that I need to pass it a value from the main page (the one that calls the popup) which will identify which entry in the database to update. But I am stuck trying to get it to work. Here is my code. I need to have the variable sent to the update.php page. Please help.

    <?php
ini_set('display_errors',1); 
error_reporting(E_ALL);

if(isset($_GET['sort']) && isset($_GET['col']) ){
   $order = $_GET['sort'];
   $column = $_GET['col'];
}
else{
   $order = 'ASC';
   $column = 'cron_id';
}

$page = 'Testing Site';
require_once('includes/head.php');
require_once('includes/mysql.php');
require_once('includes/class.tdcron.php');
require_once('includes/class.tdcron.entry.php');
date_default_timezone_set('America/Los_Angeles');

$result = mysql_query("SELECT * FROM cron WHERE active=1 ORDER BY $column $order") or die (mysql_error());
mysql_close();

$pass = "<img src='images/Checked.png' alt='Pass' width='16' height='16'/>";
$fail = "<img src='images/Stop.png' alt='Failed' width='16' height='16'/>";
$warn = "<img src='images/Warning.png' alt='Warning' width='16' height='16' />";
$com = "<img src='images/pencil.png' alt='Warning' width='16' height='16' />";

echo "<div id='tableContainer' class='tableContainer'>";
echo "<table width='100%' border='0' padding='0' cellpadding='0' cellspacing='0' class='scrollTable'>";
echo "<thead class='fixedHeader'>";
echo "<tr>";

if ($order=="ASC") { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=DESC&col=ok\" title=\"Sort the records in descending order\">Status</a></th>"; }
else { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=ASC&col=ok\" title=\"Sort the records in ascending order\">Status</a></th>"; }

echo '<th><a href="#">Schedule</a></th>';

if ($order=="ASC") { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=DESC&col=job\" title=\"Sort the records in descending order\">Job</a></th>"; }
else { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=ASC&col=job\" title=\"Sort the records in ascending order\">Job</a></th>"; }

echo '<th><a href="#">Description</a></th>';

if ($order=="ASC") { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=DESC&col=destination\" title=\"Sort the records in descending order\">Destination</a></th>"; }
else { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=ASC&col=destination\" title=\"Sort the records in ascending order\">Destination</a></th>"; }

echo '<th><a href="#">Errors</a></th>';

if ($order=="ASC") { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=DESC&col=jobtype\" title=\"Sort the records in descending order\">Job Type</a></th>"; }
else { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=ASC&col=jobtype\" title=\"Sort the records in ascending order\">Job Type</a></th>"; }

if ($order=="ASC") { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=DESC&col=catagory\" title=\"Sort the records in descending order\">Category</a></th>"; }
else { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=ASC&col=catagory\" title=\"Sort the records in ascending order\">Category</a></th>"; }

if ($order=="ASC") { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=DESC&col=ran_at\" title=\"Sort the records in descending order\">Last Ran</a></th>"; }
else { echo "<th><a href=\"" . $_SERVER["PHP_SELF"] . "?sort=ASC&col=ran_at\" title=\"Sort the records in ascending order\">Last Ran</a></th>"; }

echo '<th><a href="#">Next Run</a></th>';
echo '<th><a href="#">Log</a></th>';
echo '</tr></thead><tbody class="scrollContent">';

while($row = mysql_fetch_array($result)){

   if($row['ok'] == 1){$status = $pass;}
   elseif($row['ok'] == 0){$status = $fail;}
   else{$status = $warn;}
   echo '<tr>';
   echo
      '<td>
         **<form name="frm_comment" action="" onsubmit="return false;" >' . $status . '&nbsp;' .
         '<input type="image" src="images/pencil.png" onclick="popup_show(\'popup\', \'popup_drag\', \'popup_exit\', \'mouse\', -10, -5);" width=\'16\' height=\'16\' />
         </form>**
      </td>';
   echo '<td>' . $row['schedule'] . '</td>';
   echo '<td>' . $row['job'] . '</td>';
   echo '<td>' . $row['description'] . '</td>';
   echo '<td>' . $row['destination'] . '</td>';
   echo '<td>' . $row['errormsgs'] . '</td>';
   echo '<td>' . $row['jobtype'] . '</td>';
   echo '<td>' . $row['catagory'] . '</td>';
   echo '<td>' . date('D M d @ g:i A', $row['ran_at']) . '</td>';
   echo '<td>' . date('D M d @ g:i A',  tdCron::getNextOccurrence($row['mhdmd'])) . '</td>';
   echo "<td><a href='log/" . $row['log'] . "' target='_blank' >View Log</a></td>";
   echo '</tr>';

}

echo '</tbody>';
echo "</table>";
echo "</div>";

// ***** Popup Window ****************************************************

echo'<div class="sample_popup" id="popup" style="display: none;">

<div class="menu_form_header" id="popup_drag">
<img class="menu_form_exit" id="popup_exit" src="images/form_exit.png" alt="Close Form" />&nbsp;&nbsp;&nbsp;Comments
</div>

<div class="menu_form_body">
<form name="up" action="update.php" onsubmit="return validateForm()" method="post" >
<input type="hidden" name="' . $row['job'] . '" />
<table>
  <tr>
      <td><textarea class="field" onfucus="select();" name="comment" rows="8" cols="44"></textarea>
   </tr>
  <tr>
      <td align="right" ><br /><input class="btn" type="submit" name="submit" value="Submit" /></td>
  </tr>

</table>
</form>
</div>

</div>';

require_once('includes/footer.php');
?>

Javascript code start

// Copyright (C) 2005-2008 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Re-distribute this code or any part of it.
//     Instead, you may link to the homepage of this code:
//     http://www.php-development.ru/javascripts/popup-window.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as part of another product.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind.
// You expressly acknowledge and agree that use of this code is at your own risk.

// USAGE
//
// function popup_show(id, drag_id, exit_id, position, x, y, position_id)
//
// id          - id of a popup window;
// drag_id     - id of an element within popup window intended for dragging it
// exit_id     - id of an element within popup window intended for hiding it
// position    - positioning type:
//               "element", "element-right", "element-bottom", "mouse",
//               "screen-top-left", "screen-center", "screen-bottom-right"
// x, y        - offset
// position_id - id of an element relative to which popup window will be positioned


// ***** Variables *************************************************************

var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;

// ***** popup_mousedown *******************************************************

function popup_mousedown(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";

  popup_mouseposX = ie ? window.event.clientX : e.clientX;
  popup_mouseposY = ie ? window.event.clientY : e.clientY;
}


// ***** popup_mousedown_window ************************************************

function popup_mousedown_window(e)
{
  var ie = navigator.appName == "Microsoft Internet Explorer";

  if ( ie && window.event.button != 1) return;
  if (!ie && e.button            != 0) return;

  popup_dragging = true;
  popup_target   = this['target'];
  popup_mouseX   = ie ? window.event.clientX : e.clientX;
  popup_mouseY   = ie ? window.event.clientY : e.clientY;

  if (ie)
       popup_oldfunction = document.onselectstart;
  else popup_oldfunction = document.onmousedown;

  if (ie)
       document.onselectstart = new Function("return false;");
  else document.onmousedown   = new Function("return false;");
}


// ***** popup_mousemove *******************************************************

function popup_mousemove(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);
  var mouseX  = ie ? window.event.clientX : e.clientX;
  var mouseY  = ie ? window.event.clientY : e.clientY;

  if (!popup_dragging) return;

  element.style.left = (element.offsetLeft+mouseX-popup_mouseX)+'px';
  element.style.top  = (element.offsetTop +mouseY-popup_mouseY)+'px';

  popup_mouseX = ie ? window.event.clientX : e.clientX;
  popup_mouseY = ie ? window.event.clientY : e.clientY;
}

// ***** popup_mouseup *********************************************************

function popup_mouseup(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);

  if (!popup_dragging) return;

  popup_dragging = false;

  if (ie)
       document.onselectstart = popup_oldfunction;
  else document.onmousedown   = popup_oldfunction;
}

// ***** popup_exit ************************************************************

function popup_exit(e)
{
  var ie      = navigator.appName == "Microsoft Internet Explorer";
  var element = document.getElementById(popup_target);

  popup_mouseup(e);
  element.style.display = 'none';
}


// ***** popup_show ************************************************************

function popup_show(id, drag_id, exit_id, position, x, y, position_id)
{
  var element      = document.getElementById(id);
  var drag_element = document.getElementById(drag_id);
  var exit_element = document.getElementById(exit_id);

  var width        = window.innerWidth  ? window.innerWidth  : document.documentElement.clientWidth;
  var height       = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;

  element.style.position = "absolute";
  element.style.display  = "block";

  if (position == "element" || position == "element-right" || position == "element-bottom")
  {
    var position_element = document.getElementById(position_id);

    for (var p = position_element; p; p = p.offsetParent)
      if (p.style.position != 'absolute')
      {
        x += p.offsetLeft;
        y += p.offsetTop;
      }

    if (position == "element-right" ) x += position_element.clientWidth;
    if (position == "element-bottom") y += position_element.clientHeight;

    element.style.left = x+'px';
    element.style.top  = y+'px';
  }

  if (position == "mouse")
  {
    element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +popup_mouseposY+y)+'px';
  }

  if (position == "screen-top-left")
  {
    element.style.left = (document.documentElement.scrollLeft+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +y)+'px';
  }

  if (position == "screen-center")
  {
    element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )/2+x)+'px';
    element.style.top  = (document.documentElement.scrollTop +(height-element.clientHeight)/2+y)+'px';
  }

  if (position == "screen-bottom-right")
  {
    element.style.left = (document.documentElement.scrollLeft+(width -element.clientWidth )  +x)+'px';
    element.style.top  = (document.documentElement.scrollTop +(height-element.clientHeight)  +y)+'px';
  }

  drag_element['target']   = id;
  drag_element.onmousedown = popup_mousedown_window;

  exit_element.onclick     = popup_exit;
}


// ***** Attach Events *********************************************************

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousedown', popup_mousedown);
else document.addEventListener('mousedown', popup_mousedown, false);

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmousemove', popup_mousemove);
else document.addEventListener('mousemove', popup_mousemove, false);

if (navigator.appName == "Microsoft Internet Explorer")
     document.attachEvent   ('onmouseup', popup_mouseup);
else document.addEventListener('mouseup', popup_mouseup, false);

END Javascript CODE

CSS Code Start

div.sample_popup { z-index: 1; }

div.sample_popup div.menu_form_header
{
  border: 1px solid black;
  border-bottom: none;

  width: 400px;

  height:      20px;
  line-height: 19px;
  vertical-align: middle;

  background: url('../images/form_header.png') no-repeat;

  text-decoration: none;
  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:  #FFFFFF; /*#206040;*/
  cursor:  default;
}

div.sample_popup div.menu_form_body
{
  width: 400px;
  height: 200px;
  border: 1px solid black;
  background: url('../images/form.png') no-repeat left bottom;
}

div.sample_popup img.menu_form_exit
{
  float:  right;
  margin: 4px 5px 0px 0px;
  cursor: pointer;
}

div.sample_popup table
{
  width: 100%;
  border-collapse: collapse;
}

div.sample_popup th
{
  width: 1%;
  padding: 0px 5px 1px 0px;

  text-align: left;

  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #004060;
}

div.sample_popup td
{
  width: 99%;
  padding: 0px 0px 1px 0px;
}

div.sample_popup form
{
  margin:  0px;
  padding: 8px 10px 10px 10px;
}

div.sample_popup input.field
{
  width: 95%;
  border: 1px solid #808080;

  font-family: Verdana, Sans-Serif;
  font-size: 12px;
}

div.sample_popup input.btn
{
  margin-top: 2px;
  border: 1px solid #808080;

  background-color: #DDFFDD;

  font-family: Verdana, Sans-Serif;
  font-size: 11px;
}

CSS CODE END

Answer 1

You're using a JS/CSS popup, so just pass $row['job'] in your call to popup_show() (assuming you are able to modify or overload that JS function), and then populate it in the hidden field of your popup HTML with Javascript. The way you're doing it now, you'd have to duplicate the block of Popup HTML once for each row in your resultset for it to work.