javascript - 将子页面中的选定值传递回启动子弹出窗口的父行

Question

我有一个包含多行的表单，每行都有一个输入框。每个输入框旁边是一个“从列表中选择”按钮。单击后，将打开一个 javascript 弹出页面，用户可以在其中从下拉列表中进行选择，然后将其提交回父页面。

我可以很容易地为 1 行和输入框工作。问题是我希望每一行都能够选择一个值并将其返回到该行。

请以this link 为例。请查看以更好地了解我要解释的内容

我给每个人一个ID。如何修改 javascript 以将弹出页面上的值传递回父页面上调用子弹出页面的行上的输入框。

请看下面我的代码。

parent.php

<form method=post action='' name=f1>
<table>
        <tr id="r1">
        <td>
        Pack Code 1
        <input type=text name='packcode1'  size='8'>
            <a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.php","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,");>
            select pack code from list
            </a> 
        </td>
        </tr>

        <tr id="r2">
        <td>
        Pack Code 2
        <input type=text name='packcode2'  size='8'>
            <a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.php","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,");>
            select pack code from list
            </a> 
        </td>
        </tr>

        <tr id="r3">
        <td>
        Pack Code 3
        <input type=text name='packcode3'  size='8'>
            <a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.php","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,");>
            select pack code from list
            </a> 
        </td>
        </tr>
</table>
</form>

child.php

<? 

  $con = mysql_connect('localhost', 'user', 'pass'); 
 if (!$con) 
   { 
   die('Could not connect to server: ' . mysql_error()); 
   } 
   $db=mysql_select_db("db", $con); 

    if (!$db) 
   { 
   die('Could not connect to DB: ' . mysql_error()); 
   } 


$sql="select cat_id,packcode,category from skudata order by category, packcode";
$result=mysql_query($sql);

 ?> 

<script type="text/javascript"> 

  function AjaxFunction(cat_id) { 
    var httpxml; 
    try { 
      // Firefox, Opera 8.0+, Safari 
      httpxml = new XMLHttpRequest(); 
    } catch (e) { 
      // Internet Explorer 
      try { 
        httpxml = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
        try { 
          httpxml = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { 
          alert("Your browser does not support AJAX!"); 
          return false; 
        } 
      } 
    } 
    function stateck() { 
      if (httpxml.readyState == 4) { 
        var myarray = eval(httpxml.responseText); 
        // Before adding new we must remove previously loaded elements 
        for (j = document.frm.c_name.options.length - 1; j >= 0; j--) { 
          document.frm.c_name.remove(j); 
        } 
        for (i = 0; i < myarray.length; i++) { 
          var optn = document.createElement("OPTION"); 
          optn.text = myarray[i]; 
          optn.value = myarray[i]; 
          document.frm.c_name.options.add(optn); 
        }  
      } 
    } 
    var url="dd.php"; 
    url = url+"?cat_id="+cat_id; 
    url = url+"&sid="+Math.random(); 
    httpxml.onreadystatechange = stateck; 
    httpxml.open("GET",url,true); 
    httpxml.send(null); 
  } 

</script> 

 <script langauge="javascript">
function post_value(){
opener.document.f1.packcode1.value = document.frm.c_name.value;
self.close();
}
</script>



<form name="frm">
Category: &nbsp; <select name=cat id=cat onchange="AjaxFunction(this.value);" style="width=300"> <br>
<option value='' style="width=300">Select One</option> 
<br>
<? 
  $con = mysql_connect('localhost', 'user', 'pass'); 
 if (!$con) 
   { 
   die('Could not connect to server: ' . mysql_error()); 
   } 
   $db=mysql_select_db("db", $con); 

    if (!$db) 
   { 
   die('Could not connect to DB: ' . mysql_error()); 
   } 

  $q=mysql_query("select * from categories"); 
  while($n=mysql_fetch_array($q)){ 
    echo "<option value=$n[cat_id]>$n[category]</option>"; 
  } 

?> 
</select> 
 <br><br>
 Pack Code:
<select name=c_name > 
 <br><br>
</select>
<br><br>
<td><input type=button value="Select" onclick="post_value();"></td>
</form> 

所以总结一下，我想从弹出页面中选择一个pack code 1并将其传递回packcode1 in 。对于packcode 2，我想从弹出窗口中选择一个pack code并将其传递回

中的packcode3

提前感谢您的帮助，如果我可以提供更多信息，请告诉我。

感谢和问候， 瑞恩

Answer 1

您需要在弹出窗口完成时传递要更新的输入元素的名称。例如，您页面上的链接应该有不同的用于 window.open() 调用的 URL：

<a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.php?element_name=packcode1","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,");>

<a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.php?element_name=packcode2","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,");>

<a href="javascript:void(0);" NAME="My Window Name" title=" My title here " onClick=window.open("child.php?element_name=packcode3","Ratting","width=550,height=170,left=150,top=200,toolbar=1,status=1,");>

最后，你的 child.php Javascript 函数应该是这样的：

function post_value(){
    opener.document.f1.<?php echo $_GET["element_name"]; ?>.value = document.frm.c_name.value;
    self.close();
}

这有意义吗？