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

本文介绍了javascript - 将弹出窗口中的选定值传递给父窗口输入框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我正在使用PHP和MySQL构建订单。I am building an order form with PHP and MySQL. PHP表单有一个输入框，用户可以在其中键入产品代码。如果用户不知道产品代码，我希望他们点击输入框旁边的图像或按钮，这会打开一个包含所有产品代码列表的弹出窗口。然后他们可以点击他们想要的产品，产品代码从弹出窗口传递到该表格行的输入框。The PHP Form has an input box where the user types in a product code. In the event that the user does not know the product code, I want them to click on an image or button next to the input box, which opens a popup with a list of all product codes. they can then click on the product they want and the product code is passed from the popup to the input box on that table row.我的页面代码如下以及它创建的页面图像，这样你就能感受到我想要实现的目标。I have the code of my page below and the image of the page it creates so you can get a feel for what I am wanting to acheive. 父页面<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"> </div> </td> <td> <div align="left" id="whse1"> </div> </td> <td> <div align="left" id="su1"> </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"> </div> </td> <td> <div align="left" id="whse2"> </div> </td> <td valign=bottom> <div align="left" id="su2"> </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"> </div> </td> <td> <div align="left" id="whse3"> </div> </td> <td> <div align="left" id="su3"> </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"> </div> </td> <td> <div align="left" id="whse4"> </div> </td> <td> <div align="left" id="su4"> </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"></script> <form name="selectform"> <table border=0 width=1000 id="hor-minimalist-a"> <tr> <th>Pack Code</th> <th> </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>我试图将产品代码的值从选定的弹出窗口行传递到'包装代码的父窗口输入框'I am trying to pass the value of the product code from the selected popup window row, to the parent window input box for 'pack code'我试图调整我遇到的脚本但是没有把它拉下来。任何帮助一如既往地赞赏！I was trying to adapt a script I came across but am not pulling it off. Any help appreciated as always!问候， RyanRegards,Ryan更新问题：父母页面：<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> </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>以下是显示工作情况的图片。父页面：Here is the images to show the workings.parent page: 弹出页面父页后popup再次感谢您的帮助。问候， RyanThanks again for the help.Regards,Ryan推荐答案如果你想要一个弹出窗口而不是< div /> ，我建议采用以下方法。If you want a popup window rather than a <div />, I would suggest the following approach.在您的父页面中，您调用一个小助手方法来显示弹出窗口：In your parent page, you call a small helper method to show the popup window:<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'] 接收所选字段，并使用它来构建父回调函数：Your sku.php receives the selected field via $_GET['id'] and uses it to construct the parent callback function:?><script type="text/javascript">function sendValue(value){ var parentId = <?php echo json_encode($_GET['id']); ?>; window.opener.updateValue(parentId, value); window.close();}</script>对于弹出窗口中的每一行，请将代码更改为：For each row in your popup, change code to this:<td><input type=button value="Select" onClick="sendValue('<?php echo $rows['packcode']; ?>')" /></td>按照这种方法，弹出窗口不需要知道如何更新父表单中的字段。Following this approach, the popup window doesn't need to know how to update fields in the parent form. 这篇关于javascript - 将弹出窗口中的选定值传递给父窗口输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！