Databases
StackOverflow2013
Postsdbo
POjavascript - pass selected value from popup window to parent window input box
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjavascript - pass selected value from popup window to parent window input box
    primarykey
    data
    text
    <p>I am building an order form with PHP and MySQL.</p> <p>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.</p> <p>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.</p> <p><strong>parent page</strong> </p> <pre><code>&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; </code></pre> <p><img src="https://i.stack.imgur.com/sLqxF.jpg" alt="parent page"></p> <p><strong>the popup page code and image is below:</strong></p> <pre><code>&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; </code></pre> <p><img src="https://i.stack.imgur.com/n30FM.jpg" alt="popup window"></p> <p>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'</p> <p>I was trying to adapt a script I came across but am not pulling it off. Any help appreciated as always!</p> <p>Regards, Ryan</p> <hr> <p>UPDATE TO QUESTION:</p> <p><strong>PARENT PAGE:</strong></p> <pre><code>&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; </code></pre> <p><strong>SKU.PHP</strong></p> <pre><code>&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; </code></pre> <p>Here is the images to show the workings. <strong>parent page:</strong></p> <p><img src="https://i.stack.imgur.com/F9vfp.jpg" alt="enter image description here"></p> <p><strong>Popup Page:</strong></p> <p><img src="https://i.stack.imgur.com/MNBiA.jpg" alt="enter image description here"></p> <p><strong>Parent Page after popup</strong></p> <p><img src="https://i.stack.imgur.com/T933x.jpg" alt="enter image description here"></p> <p>Thanks again for the help. Regards, Ryan</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSmudger
    1. USSmudger
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjavascript - pass selected value from popup window to parent window input box
      1. USSmudger
      1. VTBountyStart
    2. VO
      singulars
      1. POjavascript - pass selected value from popup window to parent window input box
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjavascript - pass selected value from popup window to parent window input box
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload