javascript - 将弹出窗口中的选定值传递给父窗口输入框
我正在使用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"> </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">
<!-- 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> </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> </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>
这是显示工作情况的图像. 父页面:
弹出页面:
弹出窗口后的父页面
再次感谢您的帮助.问候,瑞恩
Ja͢*_*͢ck 25
如果你想要一个弹出窗口而不是a <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>
按照这种方法,弹出窗口不需要知道如何更新父窗体中的字段.
ear*_*ils 15
(父窗口)
<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>
- +1.奇迹般有效.就这样需要来自杰克的window.close. (2认同)
我的方法:使用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>
干净简单.
从你的代码
<input type=button value="Select" onClick="sendValue(this.form.details);"
我不确定你的this.form.details有效与否.
如果它有效,请查看 window.opener.document.getElementById('details').value = selvalue;
我找不到输入的id包含details我只是找到了id=sku1(建议你添加"像id="sku1").
从你的id,它是硬编码.让我们看看当孩子有回调来更新父母的一些文本框时如何处理动态 看看这里.
第一页.
<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>
我添加了函数getUrlVars来获取父传递给子的URL参数.
好的,当弹出窗口中的选择数据时,对于这种情况,它会调用function goSelect
在该函数中将获得发回的URL参数.
而当你需要发送回父只使用window.opener的名称,而功能类似window.opener.callFromDialog
完全是 window.opener.callFromDialog(idFromCallPage,data);
或者如果你想使用window.opener.document.getElementById(idFromCallPage).value = data;它也可以.
| 归档时间： |
|
| 查看次数： |
106859 次 |
| 最近记录： |