Question

Please go to this page real quick and hit the login at the top right:

Here’s the link: http://forums.gamesalad.com

I’m trying to pre-fill these two fields that pop up. They seem to be in some sort of frame. I am unable to access the fields using getElementByID (or any getElement for that matter). How can I access these two fields using javascript?

NOTE: (don’t worry about firing the javascript, just getting access to the fields).

Here’s my current code:

document.getElementById('login-dialog-email').value = 'the user name';

Answer 1

If you look at your HTML in a debugger, like the Chrome Debugger, you’ll see that you have two instances of the input elements with id=”login-dialog-email”.

The W3C spec says that only one instance of an id attribute can be used in a single HTML document, and browser vendors implement this spec in a manner where the behavior is considered to be undefined if more than one id attribute of the same value is on the page.

In my experience, this really only affects the second instance of the element with said id, and if you do a search for login-dialog-email and examine which element gets highlighted, you’ll see that the second instance is the one that represents your form.

Remove the first instance, or use a unique id, and then you’ll be able to target the element.

The first instance of this login field appears to be part of a template that is hidden on the page.

<div id="login-form-template" style="display: none">
    <form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
   ...

    <li class="email">
        <label for="login-dialog-email">
        Email:
          <input id="login-dialog-email" name="emailAddress" type="text" value=""></input>
        </label>
    </li>
    <li class="password">
        <label for="login-dialog-password">
        Password:
          <input id="login-dialog-password" name="password" type="password" value="">
        </label>
    ...

The second instance of this field actually appears inside the fancybox, which is where the actual HTML is located that you are trying to target.

<div id="fancybox-content" style="border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; width: 300px; height: 233px; "><div style="width:300px;height:auto;overflow: auto;position:relative;">
   <form accept-charset="UTF-8" action="https://auth.gamesalad.com/auth/signIn" class="dialog dialog-form" id="common-login-form" method="post">
   ...
   <li class="email">
       <label for="login-dialog-email">
         Email:
         <input id="login-dialog-email" name="emailAddress" type="text" value="">
       </label>
   </li>
   <li class="password">
     <label for="login-dialog-password">
       Password:
       <input id="login-dialog-password" name="password" type="password" value="">
     </label>
   <span>
...

Thus, even if the site owner were trying to target these fields from the page, he/she would have the same problem.

The solution to this problem is to use className attributes within any template. This ensures that all of the fields can be targeted via DOM methods.

However, this doesn’t mean that you can’t still target the elements:

JavaScript:

document.getElementsByClassName("email")[2].
    getElementsByTagName("input")[0].value = "[e-mail]";

jQuery:

The site is using jQuery, so you may also be able to use this:

$('input[name="emailAddress"]').val( "[e-mail]" );