web-dev-qa-db-ja.com

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">&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>

parent page

ポップアップページのコードと画像は以下のとおりです

<?

  $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>

popup window

選択したポップアップウィンドウ行の製品コードの値を、「パックコード」の親ウィンドウ入力ボックスに渡そうとしています。

私は出会ったスクリプトを適応させようとしていましたが、それをやってのけていません。いつものように感謝します！

よろしく、ライアン

質問の更新：

親ページ：

<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>

これが動作を示す画像です。 親ページ：

enter image description here

ポップアップページ：

enter image description here

ポップアップ後の親ページ

enter image description here

助けてくれてありがとう。よろしく、ライアン

javascriptpopup
26
Smudger

<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>

このアプローチに従えば、ポップアップウィンドウは親フォームのフィールドを更新する方法を知る必要がありません。

25
Ja͢ck

（親ウィンドウ）

<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

15
earlonrails

私のアプローチ：ポップアップウィンドウの代わりに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>

きれいでシンプル。

9
RASG

あなたのコードから

_<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_を確認してください。ポップアップウィンドウにtextboxのidが送信されます（_&dummy=avoid#_のようなURLパラメーターの最後にダミーデータを追加することを忘れないでください）

ポップアップページ

_<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とfunctionlikewindow.opener.callFromDialog

完全にwindow.opener.callFromDialog(idFromCallPage,data);です

または、window.opener.document.getElementById(idFromCallPage).value = data;を使用する場合も問題ありません。

6
OammieR

つかいます： opener.document.<id of document>.innerHTML = xmlhttp.responseText;

0
Anudeep Sharma