How to block or auto-fill a field given another field's radio button choice?

9a48g6hmm@mozmail.com

Hello everyone!

I wanted to know if there's any information in the manuals that could allow you to auto-fill a field given another one's options?

I have a radio field with 3 options: "Yes", "No", "Both" ... in the case of No, or Both, another field, which is numeric, is automatically invalid or unusable and there's no need for it. I would like to have this kind of interaction auto-filling (setting it to 0 for the sake of my table's data), and blocking-out the field that is no longer needed.

The other option I believe would be good and I have yet to find, is have such field appear. If the answer is "Yes", i'd like the field to pop up, but haven't found anything in the examples about this either.

If there's nothing in the documentation, does anyone know how to do this?

kthorngren

If you are using the Editor then maybe dependent() is what you are looking for.

Kevin

rf1234

Kevin's suggestion is great. I am using this all the time. My users love it: They fill out a form from top to bottom (with many different field types) and the following fields to fill out are (sometimes) filled, shown or hidden automatically.

Here is an example ... lots of dependencies You can use it on one field or an array of fields. Don't forget the callback.

ctrVATEditor
    .dependent(['ctr.VAT_checklist', 'ctr.annual_cost_income'], 
        function ( val, data, callback ) {
        if ( this.val('ctr.VAT_checklist') == '1' && 
             this.val('ctr.annual_cost_income').substr(0, 1) == '-' ) {
            $('.vat-hint').removeClass("hidden");
        } else {
            $('.vat-hint').addClass("hidden");
        }
        if ( this.val('ctr.VAT_checklist') == '1' ) {
            $('.vat-fields').addClass("bg-info");
            this.show( ['ctr.with_payment'] )
                .hide( ['ctr.legal_basis', 'ctr.competitive',  
                        'ctr.VAT_exempt', 'ctr.revenue_over_threshold'] );
        } else {
            $('.vat-fields').removeClass("bg-info");
            this.set( { 'ctr.with_payment': 0, 'ctr.legal_basis': 0,
                        'ctr.competitive': 0 , 'ctr.VAT_exempt': 0,
                        'ctr.revenue_over_threshold': 0,} )
                .hide( ['ctr.with_payment', 'ctr.legal_basis', 
                        'ctr.competitive', 'ctr.VAT_exempt',
                        'ctr.revenue_over_threshold'] );
        }
        callback({});
    })
    .dependent(['ctr.input_tax_checklist', 'ctr.annual_cost_income'], 
        function ( val, data, callback ) {
        if ( this.val('ctr.input_tax_checklist') == '1' && 
             this.val('ctr.annual_cost_income').substr(0, 1) != '-' ) {
            $('.input-tax-hint').removeClass("hidden");
        } else {
            $('.input-tax-hint').addClass("hidden");
        }
        if ( this.val('ctr.input_tax_checklist') == '1' ) {
            $('.input-tax-fields').addClass("bg-warning");
            this.show( ['ctr.service_usage'] );
        } else {
            $('.input-tax-fields').removeClass("bg-warning");
            this.set( { 'ctr.service_usage': '' } )
                .hide( ['ctr.service_usage'] );
        }
        callback({});
    })
    .dependent('ctr.with_payment', function ( val, data, callback ) {
        if (this.val('ctr.with_payment') == '1') {            
            this.show( ['ctr.legal_basis'] );
        } else {
            this.set( { 'ctr.legal_basis': 0 } )
                .hide( ['ctr.legal_basis'] );
        }
        callback({});
    })
    .dependent(['ctr.legal_basis', 'ctr.competitive', 'ctr.VAT_exempt'], function ( val, data, callback ) {
        //"competitive" only relevant for contracts under public law 
        // legal basis: 0 = no reply, 1 = civil law, 2 = public law
        if (this.val('ctr.legal_basis') == '2') {            
            this.show( ['ctr.competitive'] );
        } else {
            this.set( { 'ctr.competitive': 0 } )
                .hide( ['ctr.competitive'] );
        }
        if (this.val('ctr.competitive') == '1' ||
            this.val('ctr.legal_basis') == '1'    ) {        
            this.show( ['ctr.VAT_exempt'] );
        } else {
            this.set( { 'ctr.VAT_exempt': 0 } )
                .hide( ['ctr.VAT_exempt'] );
        }
        if (this.val('ctr.competitive') == '1' && this.val('ctr.VAT_exempt') == '0' ) {
            this.show( ['ctr.revenue_over_threshold'] );
        } else {
            this.set( { 'ctr.revenue_over_threshold': 0 } )
                .hide( ['ctr.revenue_over_threshold'] );
        }
        callback({});
    })
    .dependent('ctr.VAT_decision', function ( val, data, callback ) {
        if (val == '1') {
            $('.vat-final-fields').addClass("bg-success");
            this.show( ['ctr.VAT_charged', 'ctr.input_tax_deductible', 
                        'ctr.VAT_start_date', 'ctr.VAT_comment'] );
        } else {
            $('.vat-final-fields').removeClass("bg-success");
            this.set( { 'ctr.VAT_charged': 0, 'ctr.input_tax_deductible': 0, 
                        'ctr.VAT_start_date': '', 'ctr.VAT_comment': '',
                        'ctr.VAT_rate': 0, 'ctr.input_tax_rate': 0,
                        'ctr.VAT_mixed_rate': '', 'ctr.input_tax_mixed_rate': ''} )
                .hide( ['ctr.VAT_charged', 'ctr.input_tax_deductible', 
                        'ctr.VAT_start_date', 'ctr.VAT_comment',
                        'ctr.VAT_rate', 'ctr.input_tax_rate',
                        'ctr.VAT_mixed_rate', 'ctr.input_tax_mixed_rate'] );
        }
        callback({});
    })
    .dependent('ctr.VAT_charged', function ( val, data, callback ) {
        if (val == '1') {
            this.show( ['ctr.VAT_rate'] );
        } else {
            this.set( { 'ctr.VAT_rate': 0 } )
                .hide( ['ctr.VAT_rate'] );
        }
        callback({});
    })
    .dependent('ctr.VAT_rate', function ( val, data, callback ) {
        if (val == '3') {
            this.show( ['ctr.VAT_mixed_rate'] );
        } else {
            this.set( { 'ctr.VAT_mixed_rate': '' } )
                .hide( ['ctr.VAT_mixed_rate'] );
        }
        callback({});
    })
    .dependent('ctr.input_tax_deductible', function ( val, data, callback ) {
        if (val == '1') {
            this.show( ['ctr.input_tax_rate'] );
        } else {
            this.set( { 'ctr.input_tax_rate': 0 } )
                .hide( ['ctr.input_tax_rate'] );
        }
        callback({});
    })
    .dependent('ctr.input_tax_rate', function ( val, data, callback ) {
        if (val == '3') {
            this.show( ['ctr.input_tax_mixed_rate'] );
        } else {
            this.set( { 'ctr.input_tax_mixed_rate': '' } )
                .hide( ['ctr.input_tax_mixed_rate'] );
        }
        callback({});
    });

This is how my users get started:

Then after a few clicks it may look like this: