Question

On our login page, we have two input fields (username and password), but the second field isn’t made visible until after the first input is submitted and verified. The same button is used to submit twice, once with just the username, and once with both the usename and the password.

I would like to use different submit calls depending on which field(s) are being submitted.

The code currently looks something like this:

if($('input[name=password]').size() > 0)
    $('input[name=password]').focus();
else
    $('input[name=username]').focus();

$('#login-button').click(function() {
    $('form').submit();
});

But, for Google Analytics tracking, I would like to use a different submit call when only the username is being submitted (The 1st submission). The alternate submit would look something like this:

$('#login-button').click(function() {
    $('form').submit(function() {
     _gaq.push('_trackPageview', 'PageName');
});

Can I simply stuff the submits into the if/else somehow? I suspect there’s more to it than that though.

Answer 1

If you are wanting to check if there is only a username and no password you could check to see if the password field is visible? That is if you want to track before the password field is visible on the screen.

$('input[name=password]').is(':visible');

so:

$('#login-button').click(function() {
    $('form').submit(function() {
        if ($('input[name=username]').size() > 0 && !$('input[name=password]').is(':visible')) {
            _gaq.push('_trackPageview', 'PageName');
        }
    });
});

However if this is not the case and you mean tracking once the password field is visible on the screen you can use the comment above example with adding a (&&) clause in the (if) statement.

if ($('input[name=username]').size() > 0 && $('input[name=password]').size() < 1) {
    //do some tracking
}