Tutorial :How do I modify my code to collect form input from a popup and insert it into a textarea at cursor location on original page using JavaScript?



Question:

The JavaScript shown below inserts form input into a textarea at the current cursor position. The textarea id=mbentry. This works if all code is on the same page.

I want to have a hypertext link on page1.php open a little popup window (page2.php for example) so the user can enter text in the popup, close the window and have the input from the window appear in the textarea (id=mbentry) on the original page. (Note: I currently use GreyBox to create my popup windows.)

How do I accomplish this? (See code below)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      <html xmlns="http://www.w3.org/1999/xhtml">      <head>      <title>Page 1</title>        <script type="text/javascript">      window.onload = function()      {              btn = document.getElementById("btnInsertText");              myText = document.getElementById("myTextArea");              title = document.getElementById("insTitle");              url = document.getElementById("insUrl");              ltext = document.getElementById("insLText");              btn.onclick = function()              {                  insertAtCursor(myText, title.value, url.value, ltext.value);              }      }        function insertAtCursor(myField, title, url, ltext)      {           //IE support           if (document.selection)          {               myField.focus();              sel = document.selection.createRange();               sel.text = '<a href="'+url+'" title="'+title+'" target="_blank">'+ltext+'</a>';           }            //Mozilla/Firefox/Netscape 7+ support           else if (myField.selectionStart || myField.selectionStart == '0')          {                var startPos = myField.selectionStart;              var endPos = myField.selectionEnd;               myField.value = myField.value.substring(0, startPos)+ '<a href="'+url+'" title="'+title+'" target="_blank">'+ltext+'</a>' + myField.value.substring(endPos, myField.value.length);          }            else          {               myField.value += myValue;           }       }             </script>    </head>  <body>  url: <input type="text" id="insUrl" /><br />  title: <input type="text" id="insTitle" /><br />  linked text: <input type="text" id="insLText" /><br />  <input type="button" id="btnInsertText" value="Insert Link" /><br /><br />  <textarea id="myTextArea" rows="6" cols="50"></textarea>  </body>  </html>  


Solution:1

From the popup you can call window.parent.insertAtCursor(...)


Solution:2

Thank you for your help.

I wasn't able to get it working using window.parent or top.window (the GreyBox method). After much research I decided to use a hidden div that contains my form input elements. The div appears when an "Insert URL" button is clicked. Because the div is on the same page as the textarea, I don't need to pass the info. back to the parent window anymore. I think showing and hiding a div with the input fields will suffice for now. If I come up with a better method using the GreyBox popup I'll share. Thanks again!


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »