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

Question

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

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

请以这个连结为例。 请查看以更好地了解我要解释的内容

我给了每个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> 

因此，总而言之，我想从弹出页面中选择一个打包代码1并将其传递回中的packcode1。 对于packcode 2，我想从弹出窗口中选择一个打包代码，然后将其传递回中的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();
}

那有意义吗？