How do I get browser autocomplete on a login form

[tieTYT]

Hello,

I'm trying to replicate browser autocomplete on a login form. For
example, every time you go to the login page, I'd like the username
and password field to be prepopulated with the username/password you
used last. Not only that, but if you clear the username and double
click the field, the list of previous usernames you've entered should
show up. If you select one, the password field gets populated with
that.

Fortunately, with normal HTML the browser handles all of this for
you. But I can't figure out how to get this to work on IE6/7 on an
GWT app. In these browsers, it doesn't offer to save the usernames.
I'll provide the code I have so far (this works in FF):

public class Sandbox implements EntryPoint, ClickListener,
KeyboardListener {

private Label label;
private FormPanel formPanel;

/**
* This is the entry point method.
*/
public void onModuleLoad() {

formPanel = new FormPanel();
final VerticalPanel basePanel = new VerticalPanel();
formPanel.add(basePanel);

TextBox loginTB = new TextBox();
//without this, FF doesn't know where to place the data
loginTB.setName("name");
basePanel.add(loginTB);


PasswordTextBox passTB = new PasswordTextBox();
//without this, FF doesn't know where to place the data
passTB.setName("password");
basePanel.add(passTB);

Button loginBT = new Button("Submit");
basePanel.add(loginBT);


RootPanel.get("slot1").add(formPanel);

loginTB.addKeyboardListener(this);
passTB.addKeyboardListener(this);
loginBT.addClickListener(this);

label = new Label();
RootPanel.get("slot2").add(label);
}

public void onClick(Widget sender) {
//Without this, FF doesn't offer to remember the data
formPanel.submit();
if (label.getText().equals("")) {
SandboxService.App.getInstance().getMessage("Hello,
World!", new MyAsyncCallback(label));
} else
label.setText("");
}

public void onKeyDown(Widget sender, char keyCode, int modifiers)
{
}

public void onKeyPress(Widget sender, char keyCode, int modifiers)
{
}

public void onKeyUp(Widget sender, char keyCode, int modifiers) {
// If enter is pressed lets forward the request to onClick
method
if (keyCode == '\r') {
onClick(sender);
}
}

static class MyAsyncCallback implements AsyncCallback {
public void onSuccess(Object object) {
DOM.setInnerHTML(label.getElement(), (String) object);
}

public void onFailure(Throwable throwable) {
label.setText("Failed to receive answer from server!");
}

Label label;

public MyAsyncCallback(Label label) {
this.label = label;
}
}
}

[Reinier Zwitserloot]

These features generally only work if the textbox and passwordbox are
in the initial HTML.

In GWT's normal modus operandi, the boxes are added dynamically by the
javascript.

The solution is to have the boxes in the static HTML file that
bootstraps GWT (normally auto-generated by the applicationCreator), in
a div that makes them hidden (use visibility and not display: none).
From GWT, re-visibilize them if you need em. That should work.

[tieTYT]

I saw a faq that made the same recommendation. The problem is, I need
to capture the onKeyUp and onClick events of the input's inside the
form. I could only figure out how to "bind" to the form OR bind to
its children. I couldn't figure out how to bind to both. GWT threw a
variety of exceptions over the issue. Could you show me some sample
code that does this?

[Reinier Zwitserloot]

You can wrap existing elements in GWT 1.5:

new TextBox(DOM.getElementById("loginUsernameBox"));
new PasswordTextBox(DOM.getElementById("loginPasswordBox"));

then you can do the usual GWT shenanigans and add whatever listener
you like.

If you don't have GWT 1.5.... Then, obviously, shame on you.

[tieTYT]

I've already tried doing this and it doesn't solve the problem at
hand. IE(s) don't seem to ask you to save the username/password when
you do this. Here are the things I've tried with your idea:
Wrapping these inputs in a form in the HTML
Wrapping these inputs in a form in AJAX
Submitting the HTML/AJAX form when the login button is clicked.
Adding a submit button to the form in HTML
Clicking that submit button via js when the form is submitted
Lots of other things I can't really remember (I've been trying for a
few days) and all sorts of combination's of what's mentioned above.

IE(s) are very particular about when they allow autocomplete. The
only way I've been able to do it is when my form has no dom
manipulation whatsoever. If you've actually gotten this to work,
could you show a full example?

Thanks a lot,
Dan

> > > > I'm trying to replicate browserautocompleteon a login form.  For

[Reinier Zwitserloot]

I'm just going off of what I've heard elsewhere.

[Thomas Broyer]

On 23 nov, 10:57, tieTYT <tie...@gmail.com> wrote:
> I've already tried doing this and it doesn't solve the problem at
> hand.  IE(s) don't seem to ask you to save the username/password when
> you do this.  Here are the things I've tried with your idea:
> Wrapping these inputs in a form in the HTML
> Wrapping these inputs in a form in AJAX
> Submitting the HTML/AJAX form when the login button is clicked.
> Adding a submit button to the form in HTML
> Clicking that submit button via js when the form is submitted
> Lots of other things I can't really remember (I've been trying for a
> few days) and all sorts of combination's of what's mentioned above.

The form and the two inputs (username + password) have to exist in the
HTML page, and you have to actually submit the form (i.e. do not
"return false" in the onsubmit to make your own AJAX request).
I'm not sure but I guess the form's submission might also have to be
done by the user (i.e. not by any javascript code, be it form.submit()
or submitBtn.click()).

> IE(s) are very particular about when they allow autocomplete.  The
> only way I've been able to do it is when my form has no dom
> manipulation whatsoever.  If you've actually gotten this to work,
> could you show a full example?

Have you tried the app attached to
http://groups.google.fr/group/Google-Web-Toolkit-Contributors/msg/9bcebfb17cf914ba
It worked for me in IE.
I'm also using this technique on a project at work, without a problem.

[tieTYT]

Thanks, that helped. For some reason adding a submit handler works
but formPanel.submit() didn't. Also, I didn't know you could define
the type of a button tag. That may have made all the difference.

> Have you tried the app attached tohttp://groups.google.fr/group/Google-Web-Toolkit-Contributors/msg/9bc...