javascript - 将选定的值从弹出窗口传递到父窗口输入框

Question

我正在使用 PHP 和 MySQL 构建一个订单表单。

PHP 表单有一个输入框，用户可以在其中输入产品代码。如果用户不知道产品代码，我希望他们单击​​输入框旁边的图像或按钮，这将打开一个弹出窗口，其中包含所有产品代码的列表。然后，他们可以单击所需的产品，产品代码就会从弹出窗口传递到该表格行上的输入框。

下面有我的页面的代码及其创建的页面的图像，以便您可以感受到我想要实现的目标。

父页面

<table border=0  id="hor-minimalist-a"> 

<tr>
<th valign=bottom>KVI</th>
<th valign=bottom>PACK CODE</th>
<th valign=bottom width=250>DESCRIPTION</th>
<th valign=bottom width=40>WHSE</th>
<th valign=bottom width=25>SU</th>

</tr>
<tr id="r1">  
    <td>
        <input type=checkbox name=kvi1 id=kvi1 value=1>
    </td>
    <td>
        <input size=10  type=number id=sku1 name=sku1 onchange="showUser(1, this.value)">
        <input type="button" name="choice" onClick="window.open('sku.php','popuppage','width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');" value="?">

    </td>
    <td>
        <div align="left" id="txtHint1">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse1">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="su1">&nbsp;</div>
    </td>
</tr>
<tr id="r2">  
    <td>
        <input type=checkbox name=kvi2 id=kvi2 value=2>
    </td>
    <td>
        <input size=10  type=number id=sku2 name=sku2 onchange="showUser(2, this.value)"><img src=q.png>
    </td>
    <td>
        <div align="left" id="txtHint2">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse2">&nbsp;</div>
    </td>
    <td valign=bottom>
        <div align="left" id="su2">&nbsp;</div>
    </td>
</tr>
<tr id="r3">  
    <td>
        <input type=checkbox name=kvi3 id=kvi3 value=3>
    </td>
    <td>
        <input size=10  type=number id=sku3 name=sku3 onchange="showUser(3, this.value)"><img src=q.png>
    </td>
    <td>
        <div align="left" id="txtHint3">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse3">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="su3">&nbsp;</div>
    </td>
</tr>
<tr id="r4">  
    <td>
        <input type=checkbox name=kvi4 id=kvi4 value=4>
    </td>
    <td>
        <input size=10  type=number id=sku4 name=sku4 onchange="showUser(4, this.value)"><img src=q.png>
    </td>
    <td>
        <div align="left" id="txtHint4">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="whse4">&nbsp;</div>
    </td>
    <td>
        <div align="left" id="su4">&nbsp;</div>
    </td>
</tr>
</table>
</form>

弹出页面代码和图片如下:

<?

  $con = mysql_connect('localhost', 'dbuser', 'dbpass');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }
   mysql_select_db("databasename", $con);

 $skusql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode"; 
$resultsku=mysql_query($skusql); 

 ?>
 <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function sendValue (s){
var selvalue = s.value;
window.opener.document.getElementById('details').value = selvalue;
window.close();
}
//  End -->
</script>
 <form name="selectform">

                <table border=0 width=1000 id="hor-minimalist-a">
                    <tr>
                        <th>Pack Code</th>                      
                        <th>&nbsp;</th> 
                        <th>Category</th>  
                        <th>Product Description</th>
                        <th>Grouping</th>
                        <th>Pack Config</th> 
                        <th>SU</th> 
                        <th>Points</th> 
                    </tr>
<?php
    while($rows=mysql_fetch_array($resultsku)){
?>
                    <tr>
                        <td><input name=details size=5 value="<?php echo $rows['packcode']; ?>"></td>
                        <td><input type=button value="Select" onClick="sendValue(this.form.details);"</td>
                        <td><?php echo $rows['category']; ?></td>
                        <td><center><?php echo $rows['description']; ?></td>
                        <td><center><?php echo $rows['grouping']; ?></td>
                        <td><center><?php echo $rows['packconfig']; ?></td>
                        <td><center><?php echo $rows['sellingunits']; ?></td>
                        <td><center><?php echo $rows['eottpoints']; ?></td>
                    </tr>                                   

<?php
    }
?>
                    </table>

我正在尝试将产品代码的值从选定的弹出窗口行传递到“打包代码”的父窗口输入框

我试图改编我遇到的一个脚本，但没有成功。一如既往地感谢任何帮助!

问候，瑞安

<小时/>

更新问题:

父页面:

<html>
<head>
<title>Unilever Sales Portal</title>
<style>
@import url("style.css");
</style>
<script type="text/javascript">  
  function showUser(userNumber, str)  
  {  
    if (str=="")  
    {  
      document.getElementById("txtHint" + userNumber).innerHTML="";  
      return;  
    }    
    if (window.XMLHttpRequest)  
    {// code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
    }  

    xmlhttp.onreadystatechange=function()  
    {  
      if (xmlhttp.readyState==4 && xmlhttp.status==200)  
      {  
        //document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText; 
        var responseText = xmlhttp.responseText; 
        var description = responseText; 
        var warehouse = ""; 
        var sellingUnits = ""; 
        if (responseText.indexOf("NOT A VALID") == -1) 
        { 
          description = responseText.substring(12, responseText.indexOf(",Warehouse:"));  
          warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:"));  
          sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+15);  
        } 

        document.getElementById("whse" + userNumber).innerHTML = warehouse;  
        document.getElementById("txtHint" + userNumber).innerHTML = description;  
        document.getElementById("su" + userNumber).innerHTML = sellingUnits; 

      }  
    }  
    xmlhttp.open("GET","getdata1.php?q="+str,true);  
    xmlhttp.send(); 
  } 
</script> 
<script type="text/javascript">  
function selectValue(id) 
{ 
    // open popup window and pass field id 
    window.open('sku.php?id=' + encodeURIComponent(id),'popuppage', 
      'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100'); 
} 

function updateValue(id, value) 
{ 
    // this gets called from the popup window and updates the field with a new value 
    document.getElementById(id).value = value; 
} 

</script> 
</head>

SKU.PHP

<? 

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

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


$sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
$result=mysql_query($sql);

 ?> 
<script type="text/javascript"> 
function sendValue(value) 
{ 
    var parentId = <?php echo json_encode($_GET['id']); ?>; 
    window.opener.updateValue(parentId, value); 
    window.close(); 
} 
</script> 

 <form name="selectform"> 

                <table border=0 width=1000 id="hor-minimalist-a"> 
                    <tr> 
                        <th>Pack Code</th>                       
                        <th>&nbsp;</th>  
                        <th>Category</th>   
                        <th>Product Description</th> 
                        <th>Grouping</th> 
                        <th>Pack Config</th>  
                        <th>SU</th>  
                        <th>Points</th>  
                    </tr> 
<?php 
   while($rows=mysql_fetch_array($result)){
?> 
                    <tr> 
                        <td><input name=details size=5 value="<?php echo $rows['packcode']; ?>"></td> 
                        <td><input type=button value="Select" onClick="sendValue(this.form.details);"</td> 
                        <td><?php echo $rows['category']; ?></td> 
                        <td><center><?php echo $rows['description']; ?></td> 
                        <td><center><?php echo $rows['grouping']; ?></td> 
                        <td><center><?php echo $rows['packconfig']; ?></td> 
                        <td><center><?php echo $rows['sellingunits']; ?></td> 
                        <td><center><?php echo $rows['eottpoints']; ?></td> 
                    </tr>                                    

<?php 
    } 
?> 
                    </table> 

这是显示工作原理的图像。父页面:

弹出页面:

弹出后的父页面

再次感谢您的帮助。问候，瑞安

Answer 1

如果您想要一个弹出窗口而不是 <div /> ，我建议采用以下方法。

在您的父页面中，您调用一个小帮助器方法来显示弹出窗口:

<input type="button" name="choice" onClick="selectValue('sku1')" value="?">

添加以下 JS 方法:

function selectValue(id)
{
    // open popup window and pass field id
    window.open('sku.php?id=' + encodeURIComponent(id),'popuppage',
      'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}

function updateValue(id, value)
{
    // this gets called from the popup window and updates the field with a new value
    document.getElementById(id).value = value;
}

您的sku.php通过 $_GET['id'] 接收选定的字段并使用它来构造父回调函数:

?>
<script type="text/javascript">
function sendValue(value)
{
    var parentId = <?php echo json_encode($_GET['id']); ?>;
    window.opener.updateValue(parentId, value);
    window.close();
}
</script>

对于弹出窗口中的每一行，将代码更改为:

<td><input type=button value="Select" onClick="sendValue('<?php echo $rows['packcode']; ?>')" /></td>

采用这种方法，弹出窗口不需要知道如何更新父表单中的字段。