Here’s another little script that came in handy recently: populating a form field from a pop window. Listing 1 contains the form that will be populated and the call to the pop up. The second is a list that once i selection has been made from, closes the window and populates the field. It uses JavaScript so make sure it’s enabled!
Listing 1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> <title>js RePopulate Form From PopUp</title> </head> <body> <form name=”frm_someName” id=”frm_someName” method=”post” action=”” enctype=”application/x-www-form-urlencoded”> Name: <input type=”text” name=”name” id=”name” value=”” size=”15” /><br /> <a href=”jsRePopulateFormFromPopUp_CountryList.htm” title=”Select a country” onclick=”window.open(this.href, ‘popupwindow’, ‘width=400,height=300,scrollbars,resizable’); return false;”>Select a country</a><br /> Country: <input type=”text” name=”country” id=”country” value=”” size=”15” /><br /> <input type=”submit” name=”btnSubmit” id=”btnSubmit” value=”submit” /> </form> <p>And here is a div that we populated dynamically:</p> <div id=”someDiv”>No country selected</div> </body> </html>
Listing 2
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> <title>js RePopulate Form From PopUp - Coutry List</title> <script language=”javascript1.2” type=”text/javascript”> function rePopulate(c) { window.opener.document.frm_someName.country.value=c; window.opener.document.getElementById(‘someDiv’).innerHTML=”New country : ” + c; window.close(); } </script> </head> <body> <ul> <li><a href=”” title=”select England as the country to display” onClick=”rePopulate(‘England’);”>England</a></li> <li><a href=”” title=”select Germany as the country to display” onClick=”rePopulate(‘Germany’);”>Germany</a></li> <li><a href=”” title=”select France as the country to display” onClick=”rePopulate(‘France’);”>France</a></li> </ul> </body> </html>