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

Question

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        lt table border 0  id  hor-minimalist-a  gt     lt tr gt   lt th valign bottom gt KVI lt  th gt   lt th valign bottom gt PACK CODE lt  th gt   lt th valign bottom width 250 gt DESCRIPTION lt  th gt   lt th valign bottom width 40 gt WHSE lt  th gt   lt th valign bottom width 25 gt SU lt  th gt    lt  tr gt   lt tr id  r1  gt         lt td gt           lt input type checkbox name kvi1 id kvi1 value 1 gt       lt  td gt       lt td gt           lt input size 10  type number id sku1 name sku1 onchange  showUser 1  this value   gt           lt 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     gt        lt  td gt       lt td gt           lt div align  left  id  txtHint1  gt  amp nbsp  lt  div gt       lt  td gt       lt td gt           lt div align  left  id  whse1  gt  amp nbsp  lt  div gt       lt  td gt       lt td gt           lt div align  left  id  su1  gt  amp nbsp  lt  div gt       lt  td gt   lt  tr gt   lt tr id  r2  gt         lt td gt           lt input type checkbox name kvi2 id kvi2 value 2 gt       lt  td gt       lt td gt           lt input size 10  type number id sku2 name sku2 onchange  showUser 2  this value   gt  lt img src q png gt       lt  td gt       lt td gt           lt div align  left  id  txtHint2  gt  amp nbsp  lt  div gt       lt  td gt       lt td gt           lt div align  left  id  whse2  gt  amp nbsp  lt  div gt       lt  td gt       lt td valign bottom gt           lt div align  left  id  su2  gt  amp nbsp  lt  div gt       lt  td gt   lt  tr gt   lt tr id  r3  gt         lt td gt           lt input type checkbox name kvi3 id kvi3 value 3 gt       lt  td gt       lt td gt           lt input size 10  type number id sku3 name sku3 onchange  showUser 3  this value   gt  lt img src q png gt       lt  td gt       lt td gt           lt div align  left  id  txtHint3  gt  amp nbsp  lt  div gt       lt  td gt       lt td gt           lt div align  left  id  whse3  gt  amp nbsp  lt  div gt       lt  td gt       lt td gt           lt div align  left  id  su3  gt  amp nbsp  lt  div gt       lt  td gt   lt  tr gt   lt tr id  r4  gt         lt td gt           lt input type checkbox name kvi4 id kvi4 value 4 gt       lt  td gt       lt td gt           lt input size 10  type number id sku4 name sku4 onchange  showUser 4  this value   gt  lt img src q png gt       lt  td gt       lt td gt           lt div align  left  id  txtHint4  gt  amp nbsp  lt  div gt       lt  td gt       lt td gt           lt div align  left  id  whse4  gt  amp nbsp  lt  div gt       lt  td gt       lt td gt           lt div align  left  id  su4  gt  amp nbsp  lt  div gt       lt  td gt   lt  tr gt   lt  table gt   lt  form gt      the popup page code and image is below    lt       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        gt    lt SCRIPT LANGUAGE  JavaScript  gt   lt  -- Begin function sendValue  s   var selvalue   s value  window opener document getElementById  details   value   selvalue  window close          End -- gt   lt  script gt    lt form name  selectform  gt                    lt table border 0 width 1000 id  hor-minimalist-a  gt                       lt tr gt                           lt th gt Pack Code lt  th gt                                                 lt th gt  amp nbsp  lt  th gt                            lt th gt Category lt  th gt                             lt th gt Product Description lt  th gt                           lt th gt Grouping lt  th gt                           lt th gt Pack Config lt  th gt                            lt th gt SU lt  th gt                            lt th gt Points lt  th gt                        lt  tr gt   lt  php     while  rows mysql fetch array  resultsku      gt                       lt tr gt                           lt td gt  lt input name details size 5 value   lt  php echo  rows  packcode      gt   gt  lt  td gt                           lt td gt  lt input type button value  Select  onClick  sendValue this form details    lt  td gt                           lt td gt  lt  php echo  rows  category      gt  lt  td gt                           lt td gt  lt center gt  lt  php echo  rows  description      gt  lt  td gt                           lt td gt  lt center gt  lt  php echo  rows  grouping      gt  lt  td gt                           lt td gt  lt center gt  lt  php echo  rows  packconfig      gt  lt  td gt                           lt td gt  lt center gt  lt  php echo  rows  sellingunits      gt  lt  td gt                           lt td gt  lt center gt  lt  php echo  rows  eottpoints      gt  lt  td gt                       lt  tr gt                                       lt  php         gt                       lt  table gt      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    lt html gt   lt head gt   lt title gt Unilever Sales Portal lt  title gt   lt style gt   import url  style css     lt  style gt   lt script type  text javascript  gt      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  amp  amp  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           lt  script gt    lt script type  text javascript  gt    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        lt  script gt    lt  head gt    SKU PHP   lt        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       gt    lt script type  text javascript  gt   function sendValue value          var parentId    lt  php echo json encode   GET  id       gt        window opener updateValue parentId  value        window close         lt  script gt      lt form name  selectform  gt                     lt table border 0 width 1000 id  hor-minimalist-a  gt                        lt tr gt                            lt th gt Pack Code lt  th gt                                                  lt th gt  amp nbsp  lt  th gt                             lt th gt Category lt  th gt                              lt th gt Product Description lt  th gt                            lt th gt Grouping lt  th gt                            lt th gt Pack Config lt  th gt                             lt th gt SU lt  th gt                             lt th gt Points lt  th gt                         lt  tr gt    lt  php     while  rows mysql fetch array  result      gt                        lt tr gt                            lt td gt  lt input name details size 5 value   lt  php echo  rows  packcode      gt   gt  lt  td gt                            lt td gt  lt input type button value  Select  onClick  sendValue this form details    lt  td gt                            lt td gt  lt  php echo  rows  category      gt  lt  td gt                            lt td gt  lt center gt  lt  php echo  rows  description      gt  lt  td gt                            lt td gt  lt center gt  lt  php echo  rows  grouping      gt  lt  td gt                            lt td gt  lt center gt  lt  php echo  rows  packconfig      gt  lt  td gt                            lt td gt  lt center gt  lt  php echo  rows  sellingunits      gt  lt  td gt                            lt td gt  lt center gt  lt  php echo  rows  eottpoints      gt  lt  td gt                        lt  tr gt                                        lt  php           gt                        lt  table gt     Here is the images to show the workings  parent page     Popup Page     Parent Page after popup    Thanks again for the help  Regards  Ryan

User · Accepted Answer

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.

User · Answer

use  opener document  lt id of document gt  innerHTML   xmlhttp responseText

User · Answer

From your code   lt input type button value  Select  onClick  sendValue this form details      Im not sure that your this form details valid or not    IF it s valid  have a look in window opener document getElementById  details   value   selvalue    I can t found an input s id contain details I m just found only id sku1  recommend you to add   like id  sku1      And  from your id it s hardcode  Let s see how to do with dynamic when a child has callback to update some textbox on the parent  Take a look at here   First page    lt html gt   lt head gt   lt script gt      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     amp dummy avoid            window open URL  mywindow   menubar 1 resizable 1 width 350 height 250          lt  script gt   lt  head gt   lt body gt   lt input id  tbFirst  type  text    gt   lt button onclick  choose  tbFirst    gt choose lt  button gt   lt input id  tbSecond  type  text    gt   lt button onclick  choose  tbSecond    gt choose lt  button gt   lt  body gt   lt  html gt    Look in function choose I m sent an id of textbox to the popup window  don t forget to add dummy data at last of URL param like  amp dummy avoid    Popup Page   lt html gt   lt head gt   lt script gt      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   amp             for var i   0  i  lt  hashes length  i                          hash   hashes i  split                   vars push hash 0                vars hash 0     hash 1                     return vars         lt  script gt   lt  head gt   lt body gt   lt a href     onclick  goSelect  Car    gt Car lt  a gt   lt br   gt   lt a href     onclick  goSelect  Food    gt Food lt  a gt   lt br   gt   lt  body gt   lt  html gt    I have add function getUrlVars for get URL param that the parent has pass to child   Okay  when select data in the popup  for this case it s will call function goSelect  In that function will get URL param to sent back   And when you need to sent back to the parent just use window opener and the name of function like window opener callFromDialog  By fully is window opener callFromDialog idFromCallPage data    Or if you want to use window opener document getElementById idFromCallPage  value   data  It s ok too

User · Answer

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    lt html gt    lt head gt       lt script type  text javascript  src  http   code jquery com jquery min js  gt  lt  script gt       lt script type  text javascript  gt            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                                  lt  script gt   lt  head gt    lt body gt    lt div class  divform  gt       lt input type  checkbox  name  kvi1  id  kvi1  value  1  gt       lt label gt Field 1   lt  label gt       lt input size  10  type  number  id  sku1  name  sku1  gt       lt button id  choice1  class  btnChoice  gt   lt  button gt       lt br gt       lt input type  checkbox  name  kvi2  id  kvi2  value  2  gt       lt label gt Field 2   lt  label gt       lt input size  10   type  number  id  sku2  name  sku2  gt       lt button id  choice2  class  btnChoice  gt   lt  button gt   lt  div gt    lt div id  divChoices  gt      Select something        lt br gt       lt input size  10  type  number  id  ch1  name  ch1  value  11  gt       lt button id  btnsel1  class  btnselect  gt Select lt  button gt       lt label for  ch1  gt bla bla bla lt  label gt       lt br gt       lt input size  10  type  number  id  ch2  name  ch2  value  22  gt       lt button id  btnsel2  class  btnselect  gt Select lt  button gt       lt label for  ch2  gt ble ble ble lt  label gt   lt  div gt    lt  body gt    lt  html gt    clean and simple

User · Answer

parent window     lt html gt    lt script language  javascript  gt   function openWindow        window open  target html    blank   height 200 width 400  status yes toolbar no menubar no location no         lt  script gt    lt body gt    lt form name frm gt    lt input id text1 type text gt    lt input type button onclick  javascript openWindow    value  Open window    gt    lt  form gt    lt  body gt    lt  html gt     child window     lt html gt    lt script language  javascript  gt   function changeParent        window opener document getElementById  text1   value  Value changed       window close        lt  script gt    lt body gt    lt form gt    lt input type button onclick  javascript changeParent    value  Change opener s textbox s value    gt    lt  form gt    lt  body gt    lt  html gt    http   www codehappiness com post access-parent-window-from-child-window-or-access-child-window-from-parent-window-using-javascript aspx

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

Examples related to javascript

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

Examples related to javascript

Examples related to popup