AJAX

Using a popup to fill an input field

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2004

Posts: 256

Reputation: FireNet will become famous soon enough

Solved Threads: 6

FireNet

Offline

Posting Whiz in Training

Using a popup to fill an input field

Apr 14th, 2008

Hi,

I am looking for a way to use minimal javascript to open a popup window when the user clicks on an input field and allow them to choose one string inside the pop up window (like click on a radio button) and get the input box in the parent window filled with the value of the string.

I know it's kinda standard, but I dont know much about using javascript ... so I dont know exactly what to search for ....

I've seen hotmail allows you to populate your recipient input box using a popup ... I am looking to do something similar ...

See what you can, remember what you need

Fourzon | Earn via Coding

•

Join Date: Jun 2006

Posts: 7,610

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: Using a popup to fill an input field

Apr 15th, 2008

An oversimplified example would be:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
Parent.html
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Parent</title>
    <script type="text/javascript">
    targetElement = null;
    function makeSelection(frm, id) {
      if(!frm || !id)
        return;
      targetElement = frm.elements[id];
      var handle = window.open('Child.html');
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <span>Name: </span><input name="txtName" id="txtName">
    <input type="button" value="Select Name" onclick="makeSelection(this.form, 'txtName');">
  </form>
</body>
</html>
Parent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Parent</title>
    <script type="text/javascript">
    targetElement = null;
    function makeSelection(frm, id) {
      if(!frm || !id)
        return;
      targetElement = frm.elements[id];
      var handle = window.open('Child.html');
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <span>Name: </span><input name="txtName" id="txtName">
    <input type="button" value="Select Name" onclick="makeSelection(this.form, 'txtName');">
  </form>
</body>
</html>

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
Child.html
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function makeSelection(frm, id) {
      if(!frm || !id)
        return;
      var elem = frm.elements[id];
      if(!elem)
        return;
      var val = elem.options[elem.selectedIndex].value;
      opener.targetElement.value = val;
      this.close();
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <span>Names: </span>
    <select name="nameSelection">
      <option value="holly">Holly</option>
      <option value="golly">Golly</option>
      <option value="molly">Molly</option>
    </select>
    <input type="button" value="Select Name" onclick="makeSelection(this.form, 'nameSelection');">
  </form>
</body>
</html>
Child.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv"Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Expires" content="0"> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function makeSelection(frm, id) {
      if(!frm || !id)
        return;
      var elem = frm.elements[id];
      if(!elem)
        return;
      var val = elem.options[elem.selectedIndex].value;
      opener.targetElement.value = val;
      this.close();
    }
    </script>
</head>
<body>
  <form id="frm" name="frm" action="#">
    <span>Names: </span>
    <select name="nameSelection">
      <option value="holly">Holly</option>
      <option value="golly">Golly</option>
      <option value="molly">Molly</option>
    </select>
    <input type="button" value="Select Name" onclick="makeSelection(this.form, 'nameSelection');">
  </form>
</body>
</html>