Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 14393

Apr 14th, 2008

Using a popup to fill an input field

Expand Post »

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

Reputation Points: 108

Solved Threads: 7

Posting Whiz in Training

Offline

256 posts
since May 2004

Permalink

Apr 15th, 2008

Re: Using a popup to fill an input field

An oversimplified example would be:

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>

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>

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

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 720

Failure as a human

Offline

8,872 posts
since Jun 2006

Permalink

Apr 16th, 2008

Re: Using a popup to fill an input field

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

FireNet

Reputation Points: 108

Solved Threads: 7

Posting Whiz in Training

Offline

256 posts
since May 2004

Permalink

Mar 12th, 2010

Re: Using a popup to fill an input field

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):

html Syntax (Toggle Plain Text)
<a href="javascript:Pickvalue(#code#)">#code#</a>
 
function Pickvalue(picked) {
<cfoutput>
self.opener.document.yourform.#url.fieldname#.value = picked;
</cfoutput>
window.close();
}
<a href="javascript<b></b>: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?

Last edited by Ezzaral; Mar 15th, 2010 at 8:14 pm. Reason: Added code tags. Please use them to format any code that you post.

kareem.ramos

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Mar 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Date calculation

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: AJAX noob question

DaniWeb Message

Cancel Changes

User Name
Password