Javascript not pulling value from form

Question

userName = Global.getComponent('centerRegion').UserName.getValue();

That code pops up with the error

 {"browserEvent":"'Global.getComponent(...).UserName' is null or not an object","button":-1,"ctrlKey":false,"xy":[0,0]}

When I run it on this form:

Using Form As New WebControls.Forms.Form
                With Form
                    .ID = "Test"
                    .ItemName = "connector"
                    With .Toolbar
                        .UseDefaultButtons = False
                        .AddButton(Forms.FormToolbar.ButtonType.Save)
                        .AddButton(Forms.FormToolbar.ButtonType.Cancel)
                        .AddButton("Test Connection", "testConnection", "icon-button-testconnection", , "Test")
                    End With

                    With .CenterRegion
                        .Id = "centerRegion"
                        With .AddFieldSet("Activate Service")
                            .Id = "activate"
                            .LabelWidth = 0
                            Dim cb As New Forms.Control("IsActive", "", "", Model.IsActive, Forms.Control.ControlType.CheckBox)
                            cb.BoxLabel = "Activate Service"
                            .AddControl(cb)
                        End With

                        With .AddFieldSet("Connection Parameters")
                            .Id = "params"
                            .LabelWidth = 150
                            .AddControl(New Forms.Control("UserName", "", "User Name", Model.UserName, Forms.Control.ControlType.TextField))
                            .AddControl(New Forms.Control("Password", "", "Password", Model.Password, Forms.Control.ControlType.Password))
                            .AddControl(New Forms.Control("LoginUrl", "", "URL", Model.LoginUrl))
                        End With
                    End With
                    Response.Write(.ToString)
                End With
            End Using

Everything shows up and saves correctly from the form on the screen, so the value IS there, but I think my Javascript is wrong to pull it.

Edit:

Generated HTML:

xtype:'fieldset'
,title:'Connection Parameters'
,id:'params',autoHeight:true
,titleCollapse:true
,border:true
,collapsible:false
,labelWidth:139
,anchor:'100%'
,items:[
{xtype:'textfield',validationEvent:'blur',enableKeyEvents:true,anchor:'100%',value:'IDWSSample',fieldLabel:'User Name',itemId:'UserName',name:'UserName',allowDecimals:false,decimalPrecision:0,validator:function(value){var isCustomValid = true;if (this.ux_isInitialized == true) {isCustomValid = function(value){if (value.match(/<[a-zA-Z!\/]{1}/)) return 'If using the "<" character, it must not be followed by "!" or "/" or any letter.';if (value.match(/.*&#.*/)) return 'If using the "&" character, it must not be followed by "#".';return true;}(value);if (typeof(isCustomValid) == 'string') return isCustomValid;}if (isCustomValid == null) isCustomValid = true;return isCustomValid;}}
,
{xtype:'textfield',validationEvent:'blur',enableKeyEvents:true,anchor:'100%',value:'TcYg7m*a',fieldLabel:'Password',itemId:'Password',name:'Password',allowDecimals:false,decimalPrecision:0,inputType:'password'
}
,
{xtype:'textfield',validationEvent:'blur',enableKeyEvents:true,anchor:'100%',value:'http://sample.idws.syndication.kbb.com/VehicleInformationService2008R2.svc?wsdl',fieldLabel:'URL',itemId:'LoginUrl',name:'LoginUrl',allowDecimals:false,decimalPrecision:0,validator:function(value){var isCustomValid = true;if (this.ux_isInitialized == true) {isCustomValid = function(value){if (value.match(/<[a-zA-Z!\/]{1}/)) return 'If using the "<" character, it must not be followed by "!" or "/" or any letter.';if (value.match(/.*&#.*/)) return 'If using the "&" character, it must not be followed by "#".';return true;}(value);if (typeof(isCustomValid) == 'string') return isCustomValid;}if (isCustomValid == null) isCustomValid = true;return isCustomValid;}}
,
{xtype:'combo_transform',validationEvent:'blur',enableKeyEvents:true,anchor:'100%',fieldLabel:'Market Value',id:'ddlMarketValues',itemId:'ddlMarketValues',name:'ddlMarketValues',allowDecimals:false,decimalPrecision:0,id:'EXT_ddlMarketValues'
,el:null
,typeAhead:true
,triggerAction:'all'
,transform:'ddlMarketValues'
,forceSelection:true
,selectOnFocus:true
,lazyRender:true
,resizable:true
,editable:false

Answer 1

Not sure where the Global.getComponents method is from, but my guess is you have a typo there OR you are not properly accessing the field value. Try finding the field with regular javascript or even easier with jQuery.

try:

var userName = document.getElementById('UserName').value;

or with jQuery:

var userName = $("#UserName").val();

...assuming 'centerRegion' and 'UserName' are id values of elements on your page.

If you're not using jQuery, then you can try the asp.net way:

var userName = $find('UserName','centerRegion').value;

Answer 2

View the resulting source code and check the name being generated by ASP.NET for centerRegion. Depending on your version of ASP.NET, there may be automatically-generated suffixes added to the name.

If that is the case, update the name to match that being generated and see if this fixes it.