Update a hidden field on a ComboBox select?

[travisbell]

Hey guys,

How would I go about updating the value of a hidden field in my form when I select an option from the ComboBox?

I am not creating the hidden field with Ext at this point, still possible? Alternatively, I could… still not sure how that would look though…

Any ideas would be helpful!

[Jack9]

var cb = new Ext.form.ComboBox({
...
listeners:{
    select:function(){
       // this fires when a user changes the value of the combo
    document.getElementById('myHiddenId').value = 'test';
}
});

Give your hidden element an id, like : <input type='hidden' id='myHiddenId'>

[travisbell]

Sweet man, works great with static text.

I am loading the data from a JSON store (name, id), so you select the name… how do I pull in the id from the selected JSON item into the hidden input?

[Animal]

http://www.extjs.com/deploy/dev/docs...&member=select

[frederickd]

I am trying to do something similar, but I am missing something. Please help me. Here is my combo box.

// Create the combo box(es) to display the datastore(s) above
    var userCombo = new Ext.form.ComboBox({
        name: 'data[Distributor][user_id]',
        fieldLabel: 'User',
        store: groupStore,
        valueField : 'id',
        displayField : 'username',
        typeAhead: true,
        triggerAction: 'all',
        emptyText: '-- Select a user --',
        selectOnFocus: true,
        listeners: {
            select: function(form, record, index) {
                        Ext.Msg.alert('Message','Selected User ' +
                                        record.data.username + 
                                        ' ' +
                                        record.data.id);
            }
        }

I get the message just fine with the selection values displaying in the message. My form code looks like this:

// Create the form that will go inside the window container add_window
    var add_form = new Ext.form.FormPanel({
         frame: true,
        bodyStyle: 'padding:5px 5px 0',
        width: 425,
        labelWidth: 120,
        border: false,
        items: {
            xtype: 'tabpanel',
            activeTab: 0,
            defaults: {autoHeight: true, bodyStyle: 'padding:10px'}, 
            items:[{
                title: 'General',                        // new tab
                layout: 'form',
                defaults: {width: 230},
                defaultType: 'textfield',
                items:[
                     userCombo
                 ,{
                    name: 'data[Distributor][user_id]'
//                    hidden: true,
//                    hideLabel: 'true'
                },{
                    fieldLabel: 'Active?',
                    name: 'data[Distributor][active]',
                    inputType: 'checkbox',
                    allowBlank: true
                }]

I cannot get the value of 'id' into the form field so that I can send it back to the server when the save button is selected.

What am I missing? I've researched the forum and docs for a long time and I cannot find an answer that fits my question, or at least I am not understanding the answer. May I please have a snippet of code to analyze? Thank you very much!

[frederickd]

Solved it! Plus it was really easy... once you understand what it is that you are reading in the API Documentation for Ext.form.ComboBox.

The solution is to put a 'hiddenName' configuration element in the combo box. However, be sure to have it be a DIFFERENT name than the 'name' configuration element. Here is how it looks now:

// Create the combo box(es) to display the datastore(s) above
    var grouprCombo = new Ext.form.ComboBox({
        name: 'group_id',
        fieldLabel: 'Group',
        store: groupStore,
        valueField : 'id',
        displayField : 'name',
        typeAhead: true,
        triggerAction: 'all',
        emptyText: '-- Select a group --',
        hiddenName: 'data[User][group_id]',
        selectOnFocus: true
});

No need for the listener at all. My database updates with the value of the selected item just fine on an add and on an edit, using the value in 'hiddenName'. To make sure the edit version of the combo box received the 'name' of the appropriate element I did have to put an "autoLoad: true" on my Ext.data.Store configuration.

That was all it took. I must have read those directions six times. I had tried it, but had named the 'hiddenName' the same as the 'name'. Whew! Now on to linked combo boxes...