I'm trying to build a custom login form based on supplied logonAdmin.html.

| DEMO | WEBSITE | MySample.rar | Extract to C:\AwareIM\Tomcat\webapps\AwareIM

The form is functional and I was able to login but, I there is a issue with the login button which is hidden until the form input validation msg appears (tab through the blank form fields & the button appears)

1. Why is the login button hidden? How do you make it visible?

2. What is the onclick javascript code to submit the form via a default form submit button?

eg. <input type="submit" id="login" value="Log in" onclick="?????"/>

Thank you for your time.

If you download the sample from the website, below you'll find the amended HTML, CSS & Javasript code.

********* HTML index.html rename to > logonAdminCopy.html*******

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="ext-4.1.0/resources/css/ext-all.css">
	<link rel="stylesheet" type="text/css" href="aware_ext/resources/css/blue.css">
    <link rel="stylesheet" href="login/css/loginstyle.css" />
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script src="login/js/login.js"></script>
	<script type="text/javascript" src="ext-4.1.0/ext-all.js"></script>

<!-- This is where EXT stuff is done -->
<script type="text/javascript">
	Ext.onReady(function(){
	    Ext.QuickTips.init();


		// Create a variable to hold our EXT Form Panel.
		// Assign various config options as seen.
	    var login = new Ext.FormPanel({
	        fieldDefaults: { labelWidth:100 },
	        width: 235,
			height: 180,
			url:'logonOp.aw',
//		        frame:true,
        	    bodyStyle:'padding:5px 5px 0',
		        defaultType:'textfield',
//				pollForChanges:true,
				standardSubmit: true,
				renderTo: 'loginForm',
								
			// Specific attributes for the text fields for username / password.
			// The "name" attribute defines the name of variables sent to the server.
	        items:[
	        	{
	                fieldLabel: 'Business space',
	                name:       'domain',
	                id:         'domain',
					listeners:  { specialKey: function(field, e) { handleEnter (e, login); }},
	                allowBlank: false
	            },
	        	{
	                fieldLabel: 'User name',
	                name:       'userName',
					cls:		'loginForm',
					listeners:  { specialKey: function(field, e) { handleEnter (e, login); }},
	                allowBlank: false
	            },
	            {
	                fieldLabel: 'Password',
	                name:       'password',
	                inputType:  'password',
					listeners:  { specialKey: function(field, e) { handleEnter (e, login); }},
	                allowBlank: false
	            },
	            {
	                fieldLabel: 'Testing mode',
	                name:       'testingMode',
	                xtype:      'checkbox'
					
	            }
	        ],

			// All the magic happens after the user clicks the button
	        buttons:[{
	                text:'Login',
					hidden: false,
					cls: 'loginbtn',
	                formBind: true,
					renderTo: 'button',
	                // Function that fires when user clicks the button
	                handler:function(){
	                 login.getForm ().submit();
	                }
	            }]
	    });
		

		// This just creates a window to wrap the login form.
		// The login object is passed to the items collection.
	    //var win = new Ext.Window({
//		        layout:'fit',
//		        title:'Please Login',
//		        iconCls: "login-button",
//		        width:300,
//		        height:200,
//		        closable: false,
//		        resizable: false,
//		        plain: true,
//		        items: [login]
//			});

//	    win.on ("show", function () {
//		    	var f = login.getForm ().findField ('domain');
//		    	Ext.defer (f.focus, 100, f);
//		    });
//
//			win.show();
		});
//
//	function handleEnter (e, loginForm)
//		{
//			if (e.getKey () == Ext.EventObject.ENTER)
//			loginForm.submit ();
//		}

</script>
</head>

<body>

<div id="bar">
    <div id="container">
        <!-- Login Starts Here -->
        <div id="loginContainer">
            <a href="#" id="loginButton"><span>Login</span><em></em></a>
            <div style="clear:both"></div>
            <div id="loginBox">   
                         <div id="loginForm"> 
             <!--   <form id="loginForm">
                   <fieldset id="body">
                        <fieldset>
                            <label for="email">Email Address</label>
                            <input type="text" name="email" id="email" />
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password" />
                        </fieldset> 
                        <input type="submit" id="login" value="Sign in"/>
                     <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
                    </fieldset>
                    <span><a href="#">Forgot your password?</a></span>
                </form> --> <div id="button"></div>
         </div>
            </div>
        </div>
        <!-- Login Ends Here -->
    </div>
</div>

</body>
</html>

********* CSS (login/css/loginstyle.css) ********

html,body{width:100%;height:100%;padding:0;background:#fff;margin:0;font-family:arial}
a { text-decoration:none }
.container { width:262px; margin:0 auto; padding-top:200px; }

#bar { width:100%; height:50px; padding:15px 0; background:url(../images/bar.png) repeat-x; }
#container { width:960px; margin:0 auto; }

/*-------LOGIN STARTS HERE -------*/

/* Login Container (default to float:right) */
#loginContainer {
    position:relative;
    float:right;
    font-size:12px;
}

/* Login Button */
#loginButton { 
    display:inline-block;
    float:right;
    background:#d2e0ea url(../images/buttonbg.png) repeat-x; 
    border:1px solid #899caa; 
    border-radius:3px;
    -moz-border-radius:3px;
    position:relative;
    z-index:30;
    cursor:pointer;
}

/* Login Button Text */
#loginButton span {
    color:#445058; 
    font-size:14px; 
    font-weight:bold; 
    text-shadow:1px 1px #fff; 
    padding:7px 29px 9px 10px;
    background:url(../images/loginArrow.png) no-repeat 53px 7px;
    display:block
}

#loginButton:hover {
    background:url(../images/buttonbgHover.png) repeat-x;
}

/* Login Box */
#loginBox {
    position:absolute;
    top:34px;
    right:0;
    display:none;
    z-index:29;
}

/* If the Login Button has been clicked */    

#loginButton.active {
    border-radius:3px 3px 0 0;
}

#loginButton.active span {
    background-position:53px -76px;
}

/* A Line added to overlap the border */
#loginButton.active em {
    position:absolute;
    width:100%;
    height:1px;
    background:#d2e0ea;
    bottom:-1px;
}

/* Login Form */
#loginForm {
    width:248px; 
    border:1px solid #899caa;
    border-radius:3px 0 3px 3px;
    -moz-border-radius:3px 0 3px 3px;
    margin-top:-1px;
    background:#d2e0ea;
    padding:6px;
}

fieldset {
    margin:0 0 12px 0;
    display:block;
    border:0;
    padding:0;
}

fieldset#body {
    background:#fff;
    border-radius:3px;
    -moz-border-radius:3px;
    padding:10px 13px;
    margin:0;
}

#checkbox {
    width:auto;
    margin:1px 9px 0 0;
    float:left;
    padding:0;
    border:0;
    *margin:-3px 9px 0 0; /* IE7 Fix */
}

label {
    color:#3a454d;
    margin:9px 0 0 0;
    display:block;
    float:left;
}

fieldset label {
    display:block;
    float:none;
    margin:0 0 6px 0;
}

/* Default Input */
input {
    width:92%;
    border:1px solid #899caa;
    border-radius:3px;
    -moz-border-radius:3px;
    color:#3a454d;
    font-weight:bold;
    padding:8px 8px;
    box-shadow:inset 0px 1px 3px #bbb;
    -webkit-box-shadow:inset 0px 1px 3px #bbb;
    -moz-box-shadow:inset 0px 1px 3px #bbb;
    font-size:12px;
}

/* Sign In Button */
.loginbtn {
	width:auto;
	float:left;
	background:#339cdf url(../images/loginbuttonbg.png) repeat-x;
	color:#fff;
	padding:7px 10px 8px 10px;
	text-shadow:0px -1px #278db8;
	border:1px solid #339cdf;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	margin:0 12px 0 0;
	cursor:pointer;
    *padding:7px 2px 8px 2px; /* IE7 Fix */
	font-weight: bold;
}

/* Forgot your password */
span {
    text-align:center;
    display:block;
    padding:7px 0 4px 0;
}

span a {
    color:#3a454d;
    text-shadow:1px 1px #fff;
    font-size:12px;
}

input:focus {
    outline:none;
}

******** login/js/login.js *********

// Login Form

$(function() {
   var button = $('#loginButton');
    var box = $('#loginBox');
 //   var form = $('#loginForm');
    button.removeAttr('href');
    button.mouseup(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
    form.mouseup(function() { 
        return false;
    });
   // $(this).mouseup(function(login) {
    //    if(!($(login.target).parent('#loginButton').length > 0)) {
     //       button.removeClass('active');
    //        box.hide();
     //   }
  //  });
});