How to Populate Fields from New Windows Using JavaScript, Page 2	1.9/5.0 (78 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
Jonathan Fenocchi February 17, 2006

Here’s the HTML that is used for input #1:

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

The H2 heading has a specific ID for one purpose only; so that we can link to help.html#input1 and have the document automatically scroll to this heading. This is normally where you would place the name of the element, and (in the P tags) you would describe how the form element is used. You can also provide image illustrations, where necessary.

The next part is what does the cool stuff. This page will be accessible to those without JavaScript (although it won’t open in a new window) because the way we opened our windows in the “forms.html” file. If it’s not in a new window, the code won’t operate properly. This is why we’re putting everything into document.write() statements. First, we create a form tag that cannot be submitted. This prevents users from doing anything malicious and allows us to refer to one element from another element within the same form. In this first case, we’re going to group a text field with a button. Next, we create our text field and give it a name for the user to fill in. The last line is where things get a little complicated. The onclick function is going to run our “input” function, but we need to send the function three values: the form name of the “forms.html” file we want to access, the name of the field in “forms.html” we want to alter, and the value necessary for altering that field. Let’s have a closer look at the “input” function:

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

Remember that formName is the name of the form in “forms.html” we want to access, “obj” is the name of the text field in the formName form in “forms.html,” and “val” is the new value that we will put into that field.

Now, “opener” refers to the window that opened the current window. Since this popup window was opened by “forms.html,” we know that the “opener” will refer to the window containing “forms.html.” Now that we have the opener in focus, we can refer to its document, its forms array and its elements array. By referring to forms[formName].elements[elementName] we can avoid using the eval function. Using the eval function would require more processing time than is necessary. The next step is to update the value attribute of the form element in the new window to the new value string we sent to the function (val). That last line, “self.close()” is just telling the new window that we’re done and to close itself. Since the window was opened by JavaScript from the “forms.html” file JavaScript has permission to also close the window.

Let’s review a little so you get the hang of the idea by trying this again with a new text field, named input #2. We already analyzed the function, so we’ll just look at the HTML:

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

1. H2 has an ID so that it can be automatically scrolled to when you link to “help.html#input2.”
2. The paragraph should be a description of the form field.
3. We use JavaScript to output our JavaScript-aware HTML, since this same file will be accessible to non-JavaScript users, it just won’t open in a new window.
4. We don’t want anyone to try anything malicious, so we don’t allow the form to submit.
5. We tell the user to fill out the field now that he knows how it will be used.
6. We name the field so that we can access it via the button.
7. In the button, we call the “input” function which will update the value in the “forms.html” file and close the current window.
8. We pass the name of the form we want to access, the name of the element we want to access, and the value we want that specific element to have.

Now we’ll move on to select boxes. Below is the JavaScript function that belongs in the HEAD of your document, and following it is the example HTML that you would use for a select box:

    function select(formName, obj, idx){
      opener.document.forms[formName].elements[obj].selectedIndex = idx;
      self.close();
    }

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

Let’s run through the HTML first. Since you already understand the purpose of the H2 and paragraph, I don’t need to explain that further. The code is essentially the same with some content modifications. The part we need to look at is the document.write statements. You’ll notice that we aren’t using a FORM tag this time. We don’t need to, since we can just use text links. This will make it easier since you can list the options that they might select. All three of these links that we use for JavaScript-only users run the select function. This function, like the input function, requires that three things are passed to it: the name of the form you want to access in the opener document (“forms.html”), the name of the select box in that form that you want to alter, and which option to select (the first one, the second one, the third one, and so on). Let’s look at the select function to see how this plays out:

    function select(formName, obj, idx){
      opener.document.forms[formName].elements[obj].selectedIndex = idx;
      self.close();
    }

The variables: formName is the name of the form in “forms.html,” “obj” is the name of the select box in “forms.html,” and “idx” is the index that we will change the select box. We refer to the form element the same way we did in the input function: opener (“forms.html”), document (the document element of “forms.html” – the same thing as “document” if you’re writing code inside “forms.html”), forms[formName] (reference to the specific form we want to find the element in), elements[obj] (reference to the element inside of formName that we want to alter).

We have a new twist this time: “selectedIndex.” We do not need to change the value of the form element because the value is hidden. The text of the OPTION tags is hidden as well, until you click the arrow that displays the rest of the options in the select box. The first option available in the select box has an index number. This index number is simply known as the “index” of the option. The options within a select box are handled the same way an array would be handled. This means that “document.myForm.input3.options[1]” would yield the “Option A” option object. However, we don’t want to alter the value or text of any given option, we just want to select that option.

Every select box element has a property called the “selectedIndex,” as I mentioned before. You can read from or write to this property. In our case, we’re only writing to it. The selected index of a select box element is the current option that is displayed in the selection box. In our first link that JavaScript output, “Option A,” we passed “1” to the function, giving “idx” a value of 1. This means that the selection box element in “forms.html” will jump to option two (remember that options are handled just like arrays, so in order to jump to option one, you would have to pass zero to the function instead of one). As for the “self.close()” part, it closes the “help.html” popup window.

Now let’s continue on to radios. This might becomes a bit more complex, since we’re dealing with a group of two radio boxes, only one of which can be selected at a time. Here, we’re going to analyze the HTML of both radios:

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

Have a look at the first SCRIPT part, just after input #4’s description. Here, we’re going to output a link with JavaScript, which will let you check the first radio button. We’ve got an onclick, and we’re going to pass three values to it this time: the form name in “forms.html,” the name of the radio box in that form, and the option we want to select. You’ll notice that the end of the second SCRIPT (for input #5) is identical to the code we used for input #4, with one minor exception: we sent a one (1) to the function. Let’s have a look at that function now:

    function checkRadio(formName, obj, choice){
      opener.document.forms[formName].elements[obj][choice].checked = true;
      self.close();
    }

--Next page--