Member Avatar for FireNet

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

  • 3 Contributors
  • 3 Replies
  • 2K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by kareem.ramos
Member Avatar for ~s.o.s~

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.

commented: Thanks for the javascript code, works for my needs +5
Member Avatar for FireNet

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

Member Avatar for kareem.ramos

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?

Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.