Update Field in Form from Another Field

Hi Everyone,
I created an HTML element that includes a checkbox as part of a form. Is there any way to require that the checkbox be marked in order to submit the form? If not, can someone share an idea or code to update another field on the form to mirror the action in the HTML allowing me to require the other field to be marked in order for the form to be submitted?

Hi @Effy

Welcome to our community!

It sounds like you could benefit from the built in Form Validation Rules.

First, create a new field in your table that is any “option” type field. Radio, select, decision box, etc.

Then, inside your Form - navigate to Rules/Validation Rules to begin configuring your requirements.

You can learn more about Validation Rules here and here.

Hi @tim.young ,
Thank you for your warm welcome and help.
I am familiar with the validation rules that are available on the form component. However, I wanted to validate the form based on a checkbox that I had placed in a custom HTML component within the form and wasn’t sure how to do that.

Effy, assuming you have a checkbox that looks like this:

<p><input id="accept" name="terms" type="checkbox" value="terms" />&nbsp;Accept Terms</p>

You can do something like this:

TB.render('component_8', function(data) {

    $('#x_element_page_7_8 .af-form-submit').prop("disabled",true);
   
    $('#accept').change(
        function (){
            if ($(this).is(':checked')) {
                $('#x_element_page_7_8 .af-form-submit').prop("disabled",false);
            } else {
                $('#x_element_page_7_8 .af-form-submit').prop("disabled",true);
            }
    });
    
});

Be sure to change the component_8 id plus the form id: “x_element_page_7_8”

1 Like

Awesome Moe. Thanks

1 Like