Using a popup to fill an input field

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

FireNet

Posting Whiz in Training

258 posts since May 2004

Reputation Points: 108

Solved Threads: 7

4 Years Ago

Show Comments

An oversimplified example would be:

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>

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>

The code in itself is self explanatory but feel free to ask for explanations.

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

4 Years Ago

Yea, I can see how it works. Thank you.

FireNet

Posting Whiz in Training

258 posts since May 2004

Reputation Points: 108

Solved Threads: 7

2 Years Ago

I have similar code to this; but my popup window shows a list of items pulled from a database table. each item is marked with 'a href'.

My problem is that only the numeric items work with the code. Nothing happens when I click on an item in the list that begins with a letter.

Here is the code that should transfer the selected item to the input text field on the form (html/coldfusion):

<a href="javascript:Pickvalue(#code#)">#code#</a>

function Pickvalue(picked) {
<cfoutput>
self.opener.document.yourform.#url.fieldname#.value = picked;
</cfoutput>
window.close();
}

Why does this happen? Is it a javascript deficiency?

kareem.ramos

Newbie Poster

1 post since Mar 2010

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You