javascript - pass selected value from popup window to parent window input box

I am building an order form with PHP and MySQL.

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.

parent page

<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

the popup page code and image is below:

<?

  $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

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!

Regards, Ryan

UPDATE TO QUESTION:

PARENT PAGE:

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

Here is the images to show the workings. parent page:

enter image description here

Popup Page:

enter image description here

Parent Page after popup

enter image description here

Thanks again for the help. Regards, Ryan

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="?">

Add the following JS methods:

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

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.

(parent window)

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

(child window)

<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

My approach: use a div instead of a pop-up window.

See it working in the jsfiddle here: http://jsfiddle.net/6RE7w/2/

Or save the code below as test.html and try it locally.

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

clean and simple.

javascript - pass selected value from popup window to parent window input box

Related

Recent Posts