PDA

View Full Version : Dynamically changing TextField inputType for 'Hide my Typing' text field



littlefixit
16 Dec 2010, 1:47 PM
Hello,

I am implementing a 'hide my typing' checkbox into a form where the user enters an answer to a password reset question into a textbox. I would like them to be able to click the checkbox, and then have it flip the text field (that they may have already entered text into) from 'text' to 'password' or vice-versa. I belive I've been able to change the inputType option, but I can't figure out how to get it to render at all. Any thoughts/suggestions? An excerpt from my code is below:




var resetForm = new Ext.form.FormPanel({
id: 'resetform',
url: 'process.php',
// standardSubmit: true,
frame: true,
width: '475',
items: [{
title: 'Password Reset Question',
xtype:'fieldset',
autoHeight:true,
collapsed: false,
html: question
},{
xtype:'fieldset',
autoHeight:true,
defaults: {width: 300},
defaultType: 'textfield',
collapsed: false,
items :[{
id: 'forgot_password_answer',
fieldLabel: 'Your Answer',
inputType: 'password',
name: 'answer',
allowBlank:false
},{
inputType: 'hidden',
name: 'username',
value: resetusername
},{
inputType: 'hidden',
name: 'subresetquestion',
value: '1'
}]

}]
});

var fbar_qwin = new Ext.Toolbar({
buttonAlign: 'left',
width: '400',
items: [{
xtype: 'checkbox',
boxLabel: 'Hide my typing',
id: 'hidetypecheckbox',
checked: true,
handler: function() {
// alert(this.getValue());
var field = Ext.get("forgot_password_answer");
if(field.getValue() == 1){
field.inputType: 'password'
}else{
field.inputType: 'text'
}
}
},{
xtype: 'panel',
width: '275',
border: false,
hidden: false
},{
text:'Answer',
handler: function() {
resetForm.getForm().submit({
waitMsg: 'Verifying Answer...', // Wait Message
success: function (f,a) { // When saving data success
// location.href='index.php';
},
failure: function (f,a) { // when saving data failed
Ext.MessageBox.alert (a.result.errortype,a.result.text);
}
});
}
}]
});

var qwin = new Ext.Window({
layout: 'fit',
id:'autoload-win',
width: 475,
height: 190,
autoScroll:true,
resizable: false,
closable: false,
draggable: false,
// title: 'Login',
items: [resetForm],
buttons: fbar_qwin,
keys: [{
key: [Ext.EventObject.ENTER],
handler: function(){
resetForm.getForm().submit({
waitMsg:'Verifying Answer...', // Wait Message
success: function (f,a) { // When saving data success
// location.href='index.php';
},
failure: function (f,a) { // when saving data failed
Ext.MessageBox.alert (a.result.errortype,a.result.text);
}
});
}
}]
});

qwin.show();


In fbar_qwin, I've successfully been able to use an 'alert()' to echo out the value of the checkbox within the checkbox's handler, but I just can't get it to toggle what I want.

feyyaz
16 Dec 2010, 5:06 PM
my suggestion would be to add two fields one textedit and one for password. initaly hide the password field by config, on the checkbox event i would switch visibility and copy the value field.

littlefixit
17 Dec 2010, 8:53 AM
I'll give it a try, thanks.