변수를 자바 스크립트 팝업 폼에 전달하는 방법은 무엇입니까?

Question

javascript/css 팝업 창이 열리는 버튼이있는 양식이 있습니다. 팝업 창에서 데이터베이스 필드에 주석을 추가하는 데 사용할 텍스트 영역이 있습니다. 문제는 업데이트 할 데이터베이스의 항목을 식별하는 기본 페이지 (팝업을 호출하는 값)에서 값을 전달해야한다는 것입니다. 그러나 나는 그것을 작동 시키려고 노력하고있다. 여기 내 코드가있다. 변수를 update.php 페이지로 보내야합니다. 도와주세요.

<?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'); 
?> 

자바 스크립트 코드 시작

// 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 자바 스크립트 코드

CSS 코드 시작

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 코드 END

Answer 1

JS/CSS 팝업을 사용하고 있으므로 popup_show() (JS 함수를 수정하거나 과부하 할 수 있다고 가정)에 $row['job']을 전달한 다음 팝업 HTML의 숨겨진 필드에 Javascript로 채 웁니다. 당신이 지금하고있는 방식으로, 당신은 결과 테이블의 각 행에 대해 Popup HTML 블록을 한 번 복제해야 작동 할 수 있습니다.