Problem with getElementById

I am creating a dialog box with some form elements:

HTML Code:

---

this.pView = new DwtListView({parent:this.getShell(), noMaximize:false});
    this.pView.setSize("500","500");
    this.pView.getHtmlElement().innerHTML = this._createPreferenceView();
    this.pbDialog = this._createDialog({title:"Zimlet Preference", view:this.pView, standardButtons: [DwtDialog.OK_BUTTON]});
    this.pbDialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this,this._okBtnListenerpref));
    this.pbDialog.popup();
};

---

HTML Code:

---

com_zimbra_om.prototype._createPreferenceView =
    function() {
        var html = new Array();
        var i = 0;
        html[i++] = "<div>";
        html[i++] = "Server 1"
        html[i++] = "baseurl";
        html[i++] = "<input type = 'text' id = 'server1_baseurl'/>";
        html[i++] = "username";
        html[i++] = "<input type = 'text' id = 'server1_username'/>";
        html[i++] = "password";
        html[i++] = "<input type = 'text' id = 'server1_password'/>";
        html[i++] = "</div>"
        html[i++] = "<div>";
        return html.join("");
    };

---

And when I try to get the input values using the following code it returns null.

HTML Code:

---

com_zimbra_om.prototype._okBtnListenerpref =
    function(){
      server1_baseurl =  document.getElementById('server1_baseurl');
      server1_username= document.getElementById('server1_username');
      server1_password = document.getElementById('server1_password');

---

Where am I wrong??