How to Populate Fields from New Windows Using JavaScript

By Jonathan Fenocchi

It isn’t uncommon for users to have difficulty filling out forms on web pages. A lot of the time, they need help with filling out various fields with headings such as: “Where is that number on my check?” “Why do I need to give you my email address?” “What is a URL?” These questions and more are usually answered by clicking a little question mark next to a field, which opens a popup window providing more information and/or an illustration. In this article, I’ll show you how to enhance the functionality of these popup windows by allowing the person to fill out the information there. This will enhance the user experience for a number of reasons:

    1. They don’t have to close the window by clicking that tiny little “X” (or circle if they’re on a Mac).

    2. They don’t have to remember where they left off before the popup opened.

    3. They receive help and at the same time, learn what to put into the field.

Let’s begin with two documents: a page with a form and a linked popup window. For this article, I am assuming you understand the code in the page with a form, which only opens a new window. If you don’t have this understanding, please take some time to learn more about opening new windows in JavaScript. Now, let’s examine the source of that popup window:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>JavaScript Example &raquo; Filling in Form Values from a New Window.</title>
      <script type="text/javascript"><!--
      function input(formName, obj, val){
         opener.document.forms[formName].elements[obj].value = val;
         self.close();
      }
      function select(formName, obj, idx){
         opener.document.forms[formName].elements[obj].selectedIndex = idx;
         self.close();
      }
      function checkRadio(formName, obj, choice){
         opener.document.forms[formName].elements[obj][choice].checked = true;
         self.close();
      }
      function check(formName, obj, choice){
         opener.document.forms[formName].elements[obj].checked = choice;
         self.close();
      }
      //--></script>
   </head>
   <body>
      <h1>Help</h1>
      <h2 id="input1">Input #1</h2>
         <p>In the input field labeled "Input #1," please put any information you like. This is not
      a required field.</p>
      <script type="text/javascript"><!--
         document.write ('<form onsubmit="return false">');
         document.write ('<label>Fill in input #1: <input type="text" name="myInput" value="Text."></'+'label>');
         document.write ('<input type="button" onclick="input(\'myForm\', \'input1\', this.form.myInput.value)" value="Update">');
         document.write ('</'+'form>');
         //--></script>
        <h2 id="input2">Input #2</h2>
        <p>Like <a href="#input1" title="Help on input #1.">input #1</a>, input #2 is not a required
   field, and you can put any information you want into it.</p>
      <script type="text/javascript"><!--
         document.write ('<form onsubmit="return false">');
         document.write ('<label>Fill in input #2: <input type="text" name="myOtherInput" value="Text."></'+'label>');
         document.write ('<input type="button" onclick="input(\'myForm\', \'input2\', this.form.myOtherInput.value)" value="Update">');
         document.write ('</'+'form>');
         //--></script>
        <h2 id="input3">Input #3</h2>
        <p>Input #3 is a required field. You must select one of the three available options.
        <script type="text/javascript"><!--
        document.write ('[Select an option: <a href="#" onclick="select(\'myForm\', \'input3\', 1); return false">Option A<'
    +'/a>, <a href="#" onclick="select(\'myForm\', \'input3\', 2); return false">Option B<'
    +'/a>, <a href="#" onclick="select(\'myForm\', \'input3\', 3); return false">Option C<'+'/a>]');
         --></script>
         <h2 id="input4">Input #4</h2>
         <p>Input #4 is a radio button. You can pick <em>either</em> this one <em>or</em> you can pick
         <a href="#input5" title="Help on input #5.">input #5</a>, but you <em>cannot</em> pick both. This
    field is not required.</p>
         <script type="text/javascript"><!--
           document.write ('[<a href="#" onclick="checkRadio(\'myForm\', \'inputRadio\', 0); return false">Choose '
         +'input #4<'+'/a>]');
         //--></script>
         <h2 id="input5">Input #5</h2>
         <p>Input #5 is a radio button. Like <a href="#input4" title="Help on input #4.">input #4</a>, you can
    pick <em>either</em> this radio button <em>or</em> you can pick <a href="#input4" title="Help on input #4.">
          input #4</a>, but you <em>cannot</em> pick both of them. This field is not required.</p>
         <script type="text/javascript"><!--
         document.write ('[<a href="#" onclick="checkRadio(\'myForm\', \'inputRadio\', 1); return false">Choose '
         +'input #5<'+'/a>]');
         //--></script>
        <h2 id="input6">Input #6</h2>
        <p>Input #6 is a checkbox. You can click it to check it and click it again to uncheck it. These are used
    for "yes or no" questions, where you can only choose yes (and check it) or no (and uncheck it).</p>
         <script type="text/javascript"><!--
           if(opener.document.myForm.inputCheck.checked){
            document.write('[<a href="#" onclick="check(\'myForm\', \'inputCheck\', false);'
               +' return false">Deselect input #6<'+'/a>]');
           } else {
           document.write ('[<a href="#" onclick="check(\'myForm\', \'inputCheck\', true);'
           +' return false">Choose input #6<'+'/a>]');
           }
          //--></script>
         <h2 id="input7">Input #7</h2>
         <p>Input #7 is a text area. This is a large area where you can type in any text you like. This field
    is not required.</p>
         <script type="text/javascript"><!--
          document.write ('<form onsubmit="return false">');
          document.write ('<label>Fill in input #7: <textarea name="myTextarea" value="Text goes here."></textarea></'+'label>');
          document.write ('<input type="button" onclick="input(\'myForm\', \'input7\', this.form.myTextarea.value)" value="Update">');
           document.write ('</'+'form>');
        //--></script>
     </body>
   </html>

Let’s take each scenario and analyze it individually. Each form element has its own function paired with it. This is to easily identify and modify any code in the future. Let’s begin with input #1.

The JavaScript that is used for all TEXT inputs is:

    function input(formName, obj, val){
      opener.document.forms[formName].elements[obj].value = val;
      self.close();
    }

 




Page 1 of 3

 
1 2 3
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •