複数の行があり、それぞれに入力ボックスがあります。各入力ボックスの横には、「リストから選択」ボタンがあります。クリックすると、JavaScript ポップアップ ページが開き、ユーザーはドロップダウン リストから選択して、それを親ページに送信できます。
これを1行と入力ボックスで簡単に機能させることができます。問題は、各行で値を選択してその行に返すことができるようにすることです。
このリンクを例としてご覧ください。私が説明しようとしていることのより良いアイデアを得るために見てください
それぞれIDをつけました。ポップアップ ページの値を、子ポップアップ ページを呼び出した親ページの行の入力ボックスに戻すように JavaScript を変更するにはどうすればよいですか。
以下の私のコードを見てください。
親.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: <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>
要約すると、ポップアップ ページからパック コード 1 を選択し、それを の packcode1 に渡します。packcode 2 の場合、ポップアップからパック コードを選択し、それを packcode3 に戻します。
事前にサポートに感謝します。これ以上情報を提供できる場合はお知らせください。
ありがとう、ライアン