transparente - ventana emergente php javascript

javascript: pase el valor seleccionado de la ventana emergente al cuadro de entrada de la ventana principal

Question

Estoy construyendo un formulario de pedido con PHP y MySQL.

El formulario PHP tiene un cuadro de entrada donde el usuario escribe un código de producto. En caso de que el usuario no conozca el código del producto, quiero que haga clic en una imagen o botón al lado del cuadro de entrada, que abre una ventana emergente con una lista de todos los códigos de producto. luego pueden hacer clic en el producto que deseen y el código del producto pasa del cuadro emergente al cuadro de entrada en esa fila de la tabla.

Tengo el código de mi página a continuación y la imagen de la página que crea para que pueda tener una idea de lo que quiero lograr.

página principal

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

El código de la página emergente y la imagen están debajo:

<?

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

Estoy tratando de pasar el valor del código del producto de la fila de la ventana emergente seleccionada al cuadro de entrada de la ventana principal para ''código del paquete''

Estaba tratando de adaptar un guión que encontré pero no lo estoy logrando. Cualquier ayuda apreciada como siempre!

Saludos, Ryan

ACTUALIZACIÓN A LA PREGUNTA:

PÁGINA DE PADRES:

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

Aquí están las imágenes para mostrar el funcionamiento. página principal:

Página emergente:

Página principal después de la ventana emergente

Gracias de nuevo por la ayuda. Saludos, Ryan

Answer 1

(ventana principal)

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

(ventana secundaria)

<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

Answer 2

Desde tu codigo

<input type=button value="Select" onClick="sendValue(this.form.details);"

No estoy seguro de que su this.form.details válido o no.

SI es válido, eche un vistazo en window.opener.document.getElementById(''details'').value = selvalue;

No puedo encontrar la identificación de una entrada que contenga details , solo encontré id=sku1 (te recomiendo que agregues " like id="sku1" ).

Y a partir de su identificación es hardcode. Veamos cómo hacerlo con Dynamic cuando un niño tiene devolución de llamada para actualizar algún cuadro de texto en el padre. Eche un vistazo aquí.

Primera página.

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

Busque en la function choose Me enviaron un ID de cuadro de texto a la ventana emergente (no se olvide de agregar datos ficticios al final de la URL param como &dummy=avoid# )

Página emergente

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

He agregado la función getUrlVars para obtener el parámetro de URL que el padre ha pasado al hijo.

Bien, cuando seleccione datos en la ventana emergente, para este caso se llamará la function goSelect

En esa función obtendremos la parametrización de URL para enviarla de vuelta.

Y cuando necesite volver a enviar al padre, simplemente use window.opener y el nombre de la función como window.opener.callFromDialog

Por completo es window.opener.callFromDialog(idFromCallPage,data);

O si desea usar window.opener.document.getElementById(idFromCallPage).value = data; Esta bien tambien

Answer 3

Mi enfoque: usar un div lugar de una ventana emergente.

Véalo trabajando en el archivo jsfiddle aquí: http://jsfiddle.net/6RE7w/2/

O guarde el código a continuación como test.html y pruébelo localmente.

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

limpio y sencillo

Answer 4

Si desea una ventana emergente en lugar de un <div /> , sugeriría el siguiente enfoque.

En tu página principal, llamas a un pequeño método auxiliar para mostrar la ventana emergente:

<input type="button" name="choice" onClick="selectValue(''sku1'')" value="?">

Agregue los siguientes métodos 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;
}

Su sku.php recibe el campo seleccionado a través de $_GET[''id''] y lo usa para construir la función de devolución de llamada principal:

?>
<script type="text/javascript">
function sendValue(value)
{
    var parentId = <?php echo json_encode($_GET[''id'']); ?>;
    window.opener.updateValue(parentId, value);
    window.close();
}
</script>

Para cada fila en su ventana emergente, cambie el código a esto:

<td><input type=button value="Select" onClick="sendValue(''<?php echo $rows[''packcode'']; ?>'')" /></td>

Siguiendo este enfoque, la ventana emergente no necesita saber cómo actualizar los campos en el formulario principal.

Answer 5

use: opener.document.<id of document>.innerHTML = xmlhttp.responseText;