Greasemonkey submits login form but the user and password are not filled in?

Question

I want to submit a form in a page using a Greasemonkey script. The name and pw in the form is remembered by Firefox, so when the page is loaded, the name and pw are already filled. So just want a submit to auto login.

The form code:

<form class="enableAutoFocus" method="post" id="login_form" action="http://localhost/plan/login_form">
    <div id="login-form">
        <input name="came_from" value="" type="hidden">
        <input name="next" type="hidden">
        <input name="ajax_load" type="hidden">
        <input name="ajax_include_head" type="hidden">
        <input name="target" type="hidden">
        <input name="mail_password_url" type="hidden">
        <input name="join_url" type="hidden">
        <input name="form.submitted" value="1" type="hidden">
        <input name="js_enabled" id="js_enabled" value="0" type="hidden">
        <input name="cookies_enabled" id="cookies_enabled" value="" type="hidden">
        <input name="login_name" id="login_name" value="" type="hidden">
        <input name="pwd_empty" id="pwd_empty" value="0" type="hidden">
        <div class="field">
            <label for="__ac_name">Login Name</label>

            <input style="margin-right: 0px; padding-right: 0px;" size="15" name="__ac_name" value="" id="__ac_name" type="text"><img title="Max field length is unknown" style="position:relative; z-index: 999; cursor:pointer; vertical-align: bottom; border: 0; width: 14px; height: 19px; display:none;" class="ife_marker" src="chrome://informenter/skin/marker.png" id="__ac_name_ife_marker_1">
    </div>
    <div class="field">
            <label for="__ac_password">Password</label>
            <input style="margin-right: 0px; padding-right: 0px;" size="15" name="__ac_password" id="__ac_password" type="password"><img title="Max field length is unknown" style="position:relative; z-index: 999; cursor:pointer; vertical-align: bottom; border: 0; width: 14px; height: 19px; display:none;" class="ife_marker" src="chrome://informenter/skin/marker.png" id="__ac_password_ife_marker_2">
    </div>
        <div class="formControls">
            <input class="context" name="submit" value="Log in" type="submit">
        </div>
    </div>
</form>

On the page the first form is a search form, so first I tried document.forms[0].submit();
It works.

Then I change the code to:

document.forms[1].submit(); 

The error console reports:

Error: document.forms[1].submit is not a function

Then I searched, and found the following code and tried it.

function ClicktheButton(obj) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
  0, 0, 0, 0, 0, false, false, false, false, 0, null);
 var canceled = !obj.dispatchEvent(evt);      
 }
 var StupidButton = document.querySelector('input[type="submit"][value="Log in"]');
 ClicktheButton(StupidButton);

The click function works, but the name and pw are blank, so the login is not accepted.

Could someone do some explain and help? Thanks.

Answer 1

It takes a little bit of time for the browser to fill in the username and password.
When the page first loads and the Greasemonkey script fires, they are still blank in that instant.

So you need to wait for these fields to be filled. Something like this:

var numIntervals    = 0;    
var pwFilledTimer   = setInterval ( function () {
        var usrNameInp  = document.getElementById ("__ac_name");
        if (usrNameInp  &&  usrNameInp.value != "") {

            var passWrdInp  = document.getElementById ("__ac_password");
            if (passWrdInp  &&  passWrdInp.value != "") {

                clearInterval (pwFilledTimer);

                var submitButton = document.querySelector (
                    'input[type="submit"][value="Log in"]'
                );
                var clickEvent  = document.createEvent ('MouseEvents');
                clickEvent.initEvent ('click', true, true);
                submitButton.dispatchEvent (clickEvent);
            }
        }
        numIntervals++;
        if (numIntervals > 10) {
            /*--- Stop the timer after about 2 seconds so it doesn't 
                interfere with manual logins.
            */
            clearInterval (pwFilledTimer);
        }
    },
    200
);