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

Now, we have three variables and we reference the object in almost the same way as the others. The first two variables are becoming a standard at this point: every function needs to know which form and which element to access, but each type of element will require different special settings, so our third variable is going to change every time to cater for these special needs. This third variable, “choice,” will tell us which radio button to check. Since inputs #4 and #5 are grouped, only one can be selected at a time. As a result we only need to indicate which one to check and all others will be unchecked automatically. Let’s look at this line to make sure we got it all: opener.document.forms[formName].elements[obj] (references the group of radio buttons with the same name), [choice] (references the radio button in this group with the index of “choice”), checked = true (check it, and all others in this group will automatically be unchecked).

Let’s move to checkboxes now and the HTML we need to use. From there, we’ll analyze the function:

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

The first line in the SCRIPT element is an if statement. This is where we see if the checkbox is checked or not. We reference the checkbox named “inputCheck” in the “myForm” form, which is in the “forms.html” window. The “.checked” part will return true or false depending on whether or not the checkbox has been checked. If it has been checked, we will output a link that says “Deselect input #6.” The link runs the function “check” and sends out three variables: the name of the form in “forms.html” we want to reference, the name of the checkbox we want to check or uncheck, and if the checkbox should be checked or unchecked. We ran this check up front, so we know we want to uncheck the checkbox if it has already been checked. If it hasn’t, though, the else statement comes into play. In this case, our JavaScript will output a link that says “Choose input #6.” The code for this is virtually identical, except we send “true” as the last value to the function. Let’s look at the function now:

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

The first two variables you should know by heart at this point. These are the Form name and the form element name. Here, we reference the checkbox and make it checked or unchecked, depending on the value sent to the function. If the box is unchecked and the user clicks the question mark in “forms.html,” the popup will take him to the “Input #6” H2 tag, explain to him what the field is for, and then allow him to choose whether or not to check the box. By default, this box won’t be checked. In this case, the link will say “Choose input #6.” Clicking that link will run the “check” function and send “true” as the value of choice, which means that the checkbox we referenced will be checked in the new window. If the user has checked the box but doesn’t know what it’s for, he may click the question mark in “forms.html” to find out more. If he realizes he doesn’t want the box checked after all, he’ll see the “Deselect input #6” link. When he clicks that, JavaScript will run the “check” function, but since it knows that the checkbox in “forms.html” was already checked, it will uncheck it by sending “false” as the value of the third variable, “choice.”

You’re probably curious about how textareas are created, but since they’re so similar to text fields, there was no reason to create a separate function for them. Let’s look at the HTML of the last form field, input #7:

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

This is almost identical to the first two text fields, except we use a textarea instead of an input with a text type. We send the same three variables and it updates “forms.html” accordingly.

Conclusion

This technique can be very helpful to users, but be aware that you should make the content accessible to users that do not have JavaScript enabled on their browsers. In this case, I recommend a method similar to the one I used in “forms.html” so that the same “help.html” file is available to those users. Just add a “return false” statement to your “onclick” event handlers so that users with JavaScript get a popup window instead of being redirected like non-JavaScript users. The non-JavaScript users won’t ever see the JavaScript output when you use “document.write,” so take advantage of that as well. You may also want to use a separate JavaScript include file in case you have more than one help file for more than one form page. To obtain all the documentation used in this article, please download the following zip file.