| | |
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 |
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 ...
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 ...
An oversimplified example would be:
The code in itself is self explanatory but feel free to ask for explanations.
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>
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>
The code in itself is self explanatory but feel free to ask for explanations.
I don't accept change; I don't deserve to live.
![]() |
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Two Javascripts clashing on one web page.
- Next Thread: Iframe / firefox issue
| Thread Tools | Search this Thread |
acid2 ajax ajaxexample ajaxjspservlets array beta browser captchaformproblem cart checkbox child class close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming prototype redirect runtime safari scale scriptlets scroll search security select shopping size software toggle unicode w3c web windowofwords wysiwyg \n






