Help! I have a deadline

[kordsmen]

I have a registration form, when a registrant chooses "no" in a yes/no combo box or a yes/no radio button, I need to require a textfield to be filled in. I have searched the forums and can't find any examples of this functionality. I would like to have the field hidden untill It is required but just required if the other field is negative is good enough.

[oshcha]

I have a registration form, when a registrant chooses "no" in a yes/no combo box or a yes/no radio button, I need to require a textfield to be filled in. I have searched the forums and can't find any examples of this functionality. I would like to have the field hidden untill It is required but just required if the other field is negative is good enough.

Hi,

I am just a newbie with Ext Js. But using simple JS it could be done like this I guess:

1) add onChange action to your checkbox. Name it like myCheckAction or whatever you like

2) in that function check if checkbox is checked then Ext.get('yourHiddenInputField') and make it visible else make it hidden

3) when submiting form add validation that check if checkbox is checked then field shoud be mandatory.


I hope this helps.

[dj]

add a change listener to your checkbox and connect both fields via an id attribute:

                new Ext.form.Checkbox({
                    fieldLabel: 'Checkbox',
                    name: 'checkbox',
                    linkedField:"idOfLinkedField",
                    listeners:{
                        change:function(field, value){
                            var linkedField = Ext.ComponentMgr.get(field.linkedField);
                            linkedField.allowBlank = value===true||value=="true";
                            linkedField.clearInvalid();
                        }
                    }
                })
                ...
                new Ext.form.TextField({
                    fieldLabel: 'OptionalField',
                    name: 'optional',
                    id:"idOfLinkedField"
                }) 

I haven't tested the code above. I have used something slightly different in my code.


Dynamically hide or show a field is - as far as I know - not possible in Ext. But it can be easily added:

Ext.apply(Ext.form.Form.prototype, {
    renameFieldLabel:function(field, label){
        if (typeof field == "string"){
            field = this.findField(field);
        }
        var wrap = field.el.findParent(".x-form-item");
        Ext.fly(wrap).child('label').update(label);
    },
    setFieldVisibility: function(field, visibility){
        if (typeof field == "string"){
            field = this.findField(field);
        }
        var wrap = field.el.findParent(".x-form-item");
        Ext.fly(wrap).setDisplayed(visibility);
    }
}); 

(in Ext 2.0 replace Ext.form.Form with Ext.FormPanel)




PS: a better thread title would probably attract much more people that can actually help you and not only people that want to see a post of a possibly desperate person

[kordsmen]

PS: a better thread title would probably attract much more people that can actually help you and not only people that want to see a post of a possibly desperate person

Thank you for the advice but I ask the same/a similar question a weak ago with the title "Dependent form Field" and got no responses. What should I have called it?

[kordsmen]

add a change listener to your checkbox and connect both fields via an id attribute:

Thank you for your help?

where is the reference to linkedField it isn't part of checkbox or form as far as I can see?

[dj]

Thank you for the advice but I ask the same/a similar question a weak ago with the title "Dependent form Field" and got no responses. What should I have called it?

Don't know, IMHO that was a pretty good subject. I must have missed that topic otherwise I would have answered that.

Thank you for your help?

where is the reference to linkedField it isn't part of checkbox or form as far as I can see?

You are right, it isn't part of any Ext component. But anything that you put in the config-object in the constructor will be applied to the object. So it's the same as writing

                var f =  new Ext.form.Checkbox({
                    fieldLabel: 'Checkbox',
                    name: 'checkbox',
                    listeners:{
                        change:function(field, value){
                            var linkedField = Ext.ComponentMgr.get(field.linkedField);
                            linkedField.allowBlank = value===true||value=="true";
                            linkedField.clearInvalid();
                        }
                    }
                });
                f.linkedField = "idOfLinkedField"; 

The call to Ext.ComponentMgr.get converts the string-id into the real Ext.form.TextField object.


If all that linkField stuff confuses you, a normal - Web 1.0 - way would be to directly address the TextField via a variable in the change listener:

                var c,t;
                c = new Ext.form.Checkbox({
                    fieldLabel: 'Checkbox',
                    name: 'checkbox',
                    listeners:{
                        change:function(field, value){
                            t.allowBlank = value===true||value=="true";
                            t.clearInvalid();
                        }
                    }
                });
                ...
                t = new Ext.form.TextField({
                    fieldLabel: 'OptionalField',
                    name: 'optional'
                }) ; 

[kordsmen]

                var f =  new Ext.form.Checkbox({
                    fieldLabel: 'Checkbox',
                    name: 'checkbox',
                    listeners:{
                        change:function(field, value){
                            var linkedField = Ext.ComponentMgr.get(field.linkedField);
                            linkedField.allowBlank = value===true||value=="true";
                            linkedField.clearInvalid();
                        }
                    }
                });
                f.linkedField = "idOfLinkedField"; 

Can anyone show me an example of a using a combo box instead of a check box? I can't think of the proper logic to only require the text field to be required when the anser is negitive.

IE:
do you live in the usa? if the answer is no file in a textfield with the country you live in.

[dj]

IE:
do you live in the usa? if the answer is no file in a textfield with the country you live in.

I don't understand. What should be a TextField, what a Combo, what a Checkbox?

[kordsmen]

I don't understand. What should be a TextField, what a Combo, what a Checkbox?

I am sorry I copied the wrong portion of code.

Here is the original I would like to change from using a checkbox to using a combo box.

new Ext.form.Checkbox({ 
                    fieldLabel: 'Checkbox', 
                    name: 'checkbox', 
                    linkedField:"idOfLinkedField", 
                    listeners:{ 
                        change:function(field, value){ 
                            var linkedField = Ext.ComponentMgr.get(field.linkedField); 
                            linkedField.allowBlank = value===true||value=="true"; 
                            linkedField.clearInvalid(); 
                        } 
                    } 
                }) 
                ... 
                new Ext.form.TextField({ 
                    fieldLabel: 'OptionalField', 
                    name: 'optional', 
                    id:"idOfLinkedField" 
                })

can someone show me/lead me in the right direction on how to make the OptionalField required like in the code above using a combo box in stead of the checkbox?

Here is my combo box

new Ext.formComboBox({
     fieldLabel: 'Does your organization operat in USA?',
     labeSeparator: '',
     hiddenName: 'in_usa',
     store: new Ext.dataSimleStor({
          fields: ['id', 'yesno'],
          data:   Ext.combodata.yes_no
     }),
     displayField: 'yesno",
     valueField: 'id',
     typeahead: true,
     mode: 'local',
     triggerAction: 'all',
     selectOnFocus: true,
     emptyText: 'Make a Selection...',
     width: 190,
     allowBlank: false,
     editable: false,
     linkedField: 'idOfLinkedField',
     listeners:{ 
                      change:function(field, value){ 
                            if (field.value == "1") {
                            var linkedField = Ext.ComponentMgr.get(field.linkedField); 
                            linkedField.allowBlank = value===true||value=="true"; 
                            linkedField.clearInvalid();
                      } else {
                            return;
                        }
                    } 
                }), 

               new Ext.form.TextField({ 
                    fieldLabel: 'OptionalField', 
                    name: 'optional', 
                    id:"idOfLinkedField" 
                })

[Overlord]

new Ext.formCoboBox({

Well, for one, you have many typos. Change the above to new "Ext.form.ComboBox".