How to know if Acceptance Field is checked?

Hello @mjunes,

The acceptance fields are special fields, that at least in the current version of the plugin cannot be used in the equations and dependencies, so, the solution would require some of code.

For example, assuming the acceptance field is the fieldnamen1, and the button has assigned the class names: my-button and hide

hide is a predefined class used to hide the field where is used, and my-button is a custom class name that I’ll use only to identify the field.

Note: the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords”

Note 2: to assign multiple class to a field separate them by a blank character.

Now, insert a “HTML Content” field in the form with the following piece of code as its content:

<script>
jQuery(document).on('change', '[id*="fieldname1_"]', function(){
jQuery('.my-button')[(this.checked)?'removeClass':'addClass']('hide');
}).change();
</script>

and that’s all.
Best regards.

Hello Codepeople,

Thank you very much for the code. But this totally hides the button if the checkbox isn’t checked. Is there a way to just grey out the button making it unclickable until the checkbox is checked?

Thank you.

Hello @mjunes,

In this case, assign only the my-button class to the button (and not hide one), and then replace the code into the “HTML Content” field with the following one:

<script>
jQuery(document).on('change', '[id*="fieldname1_"]', function(){
jQuery('.my-button input').prop('disabled',(this.checked)?false:true);
}).change();
fbuilderjQuery(document).one('showHideDepEvent', function(){
fbuilderjQuery('.my-button input').prop('disabled', true);
});
</script>

and that’s all.
Best regards.

Hello again,

The code didn’t work. The button is still clickable if the checkbox is unchecked. I’m using an animated button from the CP Blocks plugin. Would that be the issue?

This is the code I have inside the HTML field (CP Block):

<button name="submit btn" type="button" id="foo" class="btn20170714174252 calculate-button" onclick="">Submit</button>
<style>
    @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

    .btn20170714174252 {
        background-color: #000000 !important;
        border: none !important;
        color: #ffffff !important;
        cursor: pointer !important;
        display: inline-block !important;
        font-family: "Rajdhani", "Roboto", "Arial", sans-serif !important;
        width: 100%;
        font-size: 1em !important;
        font-size: 22px !important;
        line-height: 1em !important;
        outline: none !important;
        padding: 12px 40px 10px !important;
        position: relative !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }

    .btn20170714174252:before,
    .btn20170714174252:after {
        border-color: transparent !important;
        -webkit-transition: all 0.25s !important;
        transition: all 0.25s !important;
        border-style: solid !important;
        border-width: 0 !important;
        content: "" !important;
        height: 24px !important;
        position: absolute !important;
        width: 24px !important;
    }

    .btn20170714174252:before {
        border-color: #0f95e2 !important;
        border-right-width: 2px !important;
        border-top-width: 2px !important;
        right: -5px !important;
        top: -5px !important;
    }

    .btn20170714174252:after {
        border-bottom-width: 2px !important;
        border-color: #0f95e2 !important;
        border-left-width: 2px !important;
        bottom: -5px !important;
        left: -5px !important;
    }

    .btn20170714174252:hover,
    .btn20170714174252.hover {
        background-color: #0f95e2 !important;
    }

    .btn20170714174252:hover:before,
    .btn20170714174252.hover:before,
    .btn20170714174252:hover:after,
    .btn20170714174252.hover:after {
        height: 100% !important;
        width: 100% !important;
    }
</style>
<script>
    fbuilderjQuery(document).on('click', '#fbuilder button.calculate-button.btn20170714174252', function() {
        var $ = fbuilderjQuery,
            f = $(this).closest('form'),
            i, j, s, t;
        if (f.length) {
            i = f.attr('id');
            if ((s = i.match(/_\d+$/)) != null && (t = $.fbuilder['forms'][s]) != null) {
                t = t.getItems();
                $.fbuilder['calculator'].defaultCalc('#' + i);
                for (j in t)
                    if (t[j].ftype == 'fsummary') t[j].update();
            }
        }
    });
    
</script>

Thanks.

Hello,

I’ve found a workaround. I used regular checkbox (I hope there isn’t much difference between this and acceptance box) and wrote the below code in the button onclick event to just display an alert. It’s not perfect but does the job.

if($('input[type="checkbox"]').is(":checked")){
               //code
            }
 else if($('input[type="checkbox"]').is(":not(:checked)")){
                //code
            }

I have one more doubt, does the acceptance check box store the consent somewhere? If not, isn’t it the same as a regular checkbox?

Thanks for the help so far Much appreciated.

Hello,

Sorry, this did work.

$('.my-button').prop('disabled', true);

Hello @mjunes,

Thank you very much for letting me know you have found a solution, however, your code is compatible too with the acceptance fields, because they are checkboxes too.

The Acceptance fields are checkboxes whose values are stored, similar to the other checkbox fields, in the database when the form is submitted. You can check the information collected by the form pressing the “Messages” button corresponding to it, from the settings page of the plugin.

The particularities of Acceptance fields are:

– The field is required by default, the user cannot submit the form without tick it first (the checkbox fields can be configured as required or not)
– They restricted to only one choice (the checkboxes accept multiple choices)
– Does not accepts dependencies, because this is not its role.
– Allows to associate an URL or long text with the “Consent and Acknowledgement” to the field.

Best regards.