Submit Form with Enter

[drieraf]

Hi, I have this login form

How I can simulate a "Validar" click on ??? (keys part) to submit the form when enter is pressed ?

[CODE]
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.form.FormPanel({
labelWidth:80,
url:'?m=login',
frame:true,
title:'Acceso a la Intranet de EMSER',
defaultType:'textfield',
monitorValid:true,
keys{
key: Ext.EventObject.ENTER ,
fn: ???,
scope: this
}),
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Usuario',
name:'loginUsuario',
id:'loginUsuario',
allowBlank:false
},{
fieldLabel:'Clave',
name:'loginClave',
inputType:'password',
allowBlank:false
}],

// All the magic happens after the user clicks the button
buttons:[{
text:'Validar',
id:'go',
type:'submit',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Conectando',
waitMsg:'Enviando los datos ...',

// Functions that fire (success or failure) when the server responds.
// The one that executes is determined by the
// response that comes from login.asp as seen below. The server would
// actually respond with valid JSON,
// something like: response.write "{ success: true}" or
// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
// depending on the logic contained within your server script.
// If a success occurs, the user is notified with an alert messagebox,
// and when they click "OK", they are redirected to whatever page
// you define as redirect.

success:function(){
var redirect = '?m=inicio';
window.location = redirect;
},

// Failure function, see comment above re: success and failure.
// You can see here, if login fails, it throws a messagebox
// at the user telling him / her as much.

failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Ha fallado la validaci

[dlbjr]

Add to your form config:

keys: [{key : [10,13],fn: function(){
          var bt = Ext.get('go'); 
          bt.focus();
          bt.fireEvent("click", bt);
     }
}] 

[drieraf]

Just now I tried your code and

- In Safari I got: "Value undefined (result of expression bt.fireEvent) is not object."
- In Firefox : "Error: bt.fireEvent is not a function"

[Condor]

You could use a SubmitButton (example).

[drieraf]

I tried this code but is do nothing.

Really I like more the "keys" situation, because I want to configure the ESCape key to close a window and warn if some data is changed. But this is more secundary, the most problematic for my users now is send the form pressing the Enter key.

[CODE]
// Ext.SubmitButton borrowed from Animal
Ext.SubmitButton = Ext.extend(Ext.Button, {
template: new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="x-btn-left"><i>&amp;#160;</i></td><td class="x-btn-center"><input type="submit" class="x-btn-text" name="{1}" value="{0}></td><td class="x-btn-right"><i>&amp;#160;</i></td>',
"</tr></tbody></table>"),
onRender: function(ct, position){
var btn, targs = [this.text || ' ', this.name];
if(position){
btn = this.template.insertBefore(position, targs, true);
}else{
btn = this.template.append(ct, targs, true);
}
var btnEl = btn.child("input:first");
btnEl.on('focus', this.onFocus, this);
btnEl.on('blur', this.onBlur, this);
this.initButtonEl(btn, btnEl);
btn.un(this.clickEvent, this.onClick, this);
Ext.ButtonToggleMgr.register(this);
}
});
Ext.reg('submit', Ext.SubmitButton);


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.form.FormPanel({
labelWidth:80,
url:'?m=login',
frame:true,
title:'Acceso a la Intranet de EMSER',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Usuario',
name:'loginUsuario',
id:'loginUsuario',
allowBlank:false
},{
fieldLabel:'Clave',
name:'loginClave',
inputType:'password',
allowBlank:false
}],

// All the magic happens after the user clicks the button
buttons:[{
text:'Validar',
id:'go',
type:'submit',
xtype:'submit',
formBind: true,
// Function that fires when user clicks the button
handler:function(){
login.getForm().submit({
method:'POST',
waitTitle:'Conectando',
waitMsg:'Enviando los datos ...',

// Functions that fire (success or failure) when the server responds.
// The one that executes is determined by the
// response that comes from login.asp as seen below. The server would
// actually respond with valid JSON,
// something like: response.write "{ success: true}" or
// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
// depending on the logic contained within your server script.
// If a success occurs, the user is notified with an alert messagebox,
// and when they click "OK", they are redirected to whatever page
// you define as redirect.

success:function(){
var redirect = '?m=inicio';
window.location = redirect;
},

// Failure function, see comment above re: success and failure.
// You can see here, if login fails, it throws a messagebox
// at the user telling him / her as much.

failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Ha fallado la validaci

[Condor]

Unfortunately, buttons of a FormPanel are not inside the <form> tag.
You'll have to set the FormPanel to layout:'fit' and include extra panel with layout:'form' that holds the fields and the buttons.

[Animal]

Yes, I don't think the move to using a <form> for the body in the 2.2 release was enough.

The <form> should be the main Element: http://extjs.com/forum/showthread.ph...612#post236612

[dVyper]

If anyone else encounters this, I was able to get around this by adding this code to the Form:

keys: new Ext.KeyMap(document, {
      key: Ext.EventObject.ENTER,
      fn: function() {
            [form name].getForm().submit({url:'whatever.php'})
      },
      scope: this
}),

[drieraf]

Thanks dVyper your solution was nice, but not like I answered. But you give me the idea to reach the goal!

It's not elegant, but adding this code:

		keys: new Ext.KeyMap(document, {
		      key: Ext.EventObject.ENTER,
		      fn: function() {
		      		login.buttons[0].focus();
		      },
		      scope: this
		}),

Now when the user press Enter the form is submitted like if the submit button was clicked!

Thanks for all people help!

Dani

[Animal]

What's needed is a domsubmit event to be fired whenever the BasicForm stops the DOM form from doing a proper submit:

    onSubmit: function(e) {
        e.stopEvent();
        this.fireEvent("domsubmit", this, e);
    },

Then, if you include a button with type:'submit' anywhere in the form*, you can add a handler for this event, and perform programmatic submission.

* You'll have to wrap a border:false, layout:'form' Panel inside the FormPanel containing the Button.**

** Unless you go the step I have proposed in my feature request thread: http://extjs.com/forum/showthread.ph...612#post236612 where the overall FormPanel's el is the <form> not the body.