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

【问题标题】：javascript - pass selected value from popup window to parent window input boxjavascript - 将选定值从弹出窗口传递到父窗口输入框
【发布时间】：2012-04-17 03:47:00
【问题描述】：

我正在使用 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>

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

弹出页面：

弹出后的父页面

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

【问题讨论】：

标签： javascript popup

【解决方案1】：

使用： opener.document.<id of document>.innerHTML = xmlhttp.responseText;

【讨论】：

【解决方案2】：

（父窗口）

<html> 
<script language="javascript"> 
function openWindow() { 
  window.open("target.html","_blank","height=200,width=400, status=yes,toolbar=no,menubar=no,location=no"); 
} 
</script> 
<body> 
<form name=frm> 
<input id=text1 type=text> 
<input type=button onclick="javascript:openWindow()" value="Open window.."> 
</form> 
</body> 
</html>

（子窗口）

<html> 
<script language="javascript"> 
function changeParent() { 
  window.opener.document.getElementById('text1').value="Value changed..";
  window.close();
} 
</script> 
<body> 
<form> 
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value.."> 
</form> 
</body> 
</html>

http://www.codehappiness.com/post/access-parent-window-from-child-window-or-access-child-window-from-parent-window-using-javascript.aspx

【讨论】：

+1。奇迹般有效。只是需要 Jack's 的 window.close。
根据您的要求添加了关闭功能。阿努金

【解决方案3】：

如果你想要一个弹出窗口而不是<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>

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

【讨论】：

嗨@Jack，感谢您为回答这个问题所做的努力。我已经按照您上面的建议进行了更改，但是从弹出窗口返回到我的输入框的值是[object]。你能帮忙吗，我将编辑原始问题以显示输出的更新代码和图像。谢谢，瑞安
已修改问题以显示当前输出，感谢您的帮助。
那是因为你没有复制我回答中的最后一段代码onclick="sendValue('<?php echo $rows['packcode']; ?>')"
抱歉，我的错。 100% 工作，非常感谢您抽出时间提供帮助。

【解决方案4】：

我的方法：使用div 而不是弹出窗口。

在这里查看它在 jsfiddle 中的工作：http://jsfiddle.net/6RE7w/2/

或者将下面的代码另存为test.html，在本地试试。

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $('.btnChoice').on('click', function(){
                $('#divChoices').show()
                thefield = $(this).prev()
                $('.btnselect').on('click', function(){
                    theselected = $(this).prev()
                    thefield.val( theselected.val() )
                    $('#divChoices').hide()
                })
            })

            $('#divChoices').css({
                'border':'2px solid red',
                'position':'fixed',
                'top':'100',
                'left':'200',
                'display':'none'
            })
        });
    </script>
</head>

<body>

<div class="divform">
    <input type="checkbox" name="kvi1" id="kvi1" value="1">
    <label>Field 1: </label>
    <input size="10" type="number" id="sku1" name="sku1">
    <button id="choice1" class="btnChoice">?</button>
    <br>
    <input type="checkbox" name="kvi2" id="kvi2" value="2">
    <label>Field 2: </label>
    <input size="10"  type="number" id="sku2" name="sku2">
    <button id="choice2" class="btnChoice">?</button>
</div>

<div id="divChoices">
    Select something: 
    <br>
    <input size="10" type="number" id="ch1" name="ch1" value="11">
    <button id="btnsel1" class="btnselect">Select</button>
    <label for="ch1">bla bla bla</label>
    <br>
    <input size="10" type="number" id="ch2" name="ch2" value="22">
    <button id="btnsel2" class="btnselect">Select</button>
    <label for="ch2">ble ble ble</label>
</div>

</body>

</html>

干净简单。

【讨论】：

谢谢你，
怎么能包含来自mysql的数据呢？我有 1600 种产品可供选择？我还需要弹出窗口出现在现有行上方，因为我的表单将有 100 行，并且当用户位于第 47 行时，弹出窗口不能出现在顶部或底部？谢谢，瑞安

【解决方案5】：

来自您的代码

<input type=button value="Select" onClick="sendValue(this.form.details);"

我不确定您的 this.form.details 是否有效。

如果有效，请查看window.opener.document.getElementById('details').value = selvalue;

我找不到包含details 的输入ID，我只找到id=sku1（建议您添加"，如id="sku1"）。

根据您的 ID，它是硬编码。让我们看看当孩子有回调来更新父母上的某些文本框时如何处理动态 Take a look at here.

首页。

<html>
<head>
<script>
    function callFromDialog(id,data){ //for callback from the dialog
        document.getElementById(id).value = data;
        // do some thing other if you want
    }

    function choose(id){
        var URL = "secondPage.html?id=" + id + "&dummy=avoid#";
        window.open(URL,"mywindow","menubar=1,resizable=1,width=350,height=250")
    }
</script>
</head>
<body>
<input id="tbFirst" type="text" /> <button onclick="choose('tbFirst')">choose</button>
<input id="tbSecond" type="text" /> <button onclick="choose('tbSecond')">choose</button>
</body>
</html>

查看function choose，我将文本框的 id 发送到弹出窗口（不要忘记在 URL 参数的最后添加虚拟数据，如 &dummy=avoid#）

弹出页面

<html>
<head>
<script>
    function goSelect(data){
        var idFromCallPage = getUrlVars()["id"];
        window.opener.callFromDialog(idFromCallPage,data); //or use //window.opener.document.getElementById(idFromCallPage).value = data;
        window.close();
    }


    function getUrlVars(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
</script>
</head>
<body>
<a href="#" onclick="goSelect('Car')">Car</a> <br />
<a href="#" onclick="goSelect('Food')">Food</a> <br />
</body>
</html>

我为 get URL param 添加了函数 getUrlVars ，父级已将其传递给子级。

好的，当在弹出窗口中选择 data 时，在这种情况下它会调用function goSelect

在该函数中将获取 URL 参数以发送回。

当您需要返回给父级时，只需使用 window.opener 和 function 的名称，例如 window.opener.callFromDialog

完全是window.opener.callFromDialog(idFromCallPage,data);

或者如果你想使用window.opener.document.getElementById(idFromCallPage).value = data;也可以。

【讨论】：