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

Question

I have a form with multiple rows, each with an input box. Next to each input box is a 'select from list' button. when clicked, a javascript popup page opens where the user can select from a drop down list, then submit that back to the parent page.

I can get this working for 1 row and input box quite easily. the problem is I want each row to be able to select a value and return it to that row.

Please view this link as an example. Please view to get a better idea of what I am trying to explain

I have given each an id. how can I modify the javascript to pass the value on the popup page back to the input box on the row on the parent page that called the child popup page.

Please see my code below.

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> 

So to summarize, I want to select a pack code 1 from the popup page and pass it back to packcode1 in . for packcode 2, I want to select a pack code from the popup and pass it back to packcode3 in

Thanks in advance for the assistance, please let me know if I can assist with anymore information.

Thanks and Regards, Ryan

Answer 1

You need to pass the input element's name that you want to update when the popup completes. For example, the links on your page should have different URLs for the window.open() call:

<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,");>

In the end, your child.php Javascript function should be something like:

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

Does that make sense?