Submit button conditional logic

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

In a future version conditional logic on the submit button will be built into the plugin, for now it requires custom JavaScript coding.

Show the submit button depending on a Dropdown Menu choice

Add an HTML element to the form (from the “More” tab) and enter this content:

1
2
3456
78
9
10
11
<script>
    jQuery(function ($) {
        $('.iphorm_1_1').change(function () {            if ($(this).val() == 'Option 2') {                $('.iphorm-submit-wrap-1').show();            } else {
                $('.iphorm-submit-wrap-1').hide();            }
        }).change();
    });
</script>
<script>
    jQuery(function ($) {
        $('.iphorm_1_1').change(function () {
            if ($(this).val() == 'Option 2') {
                $('.iphorm-submit-wrap-1').show();
            } else {
                $('.iphorm-submit-wrap-1').hide();
            }
        }).change();
    });
</script>
  • On line 3, change iphorm_1_1 to the Dropdown Menu unique ID
  • On line 4, change Option 2 to the value of the Dropdown Menu you want to show the submit button for
  • On lines 5 and 7, change the number 1 to the form ID

Show the submit button when a value is entered into a Text Input field (Single Line Text / Paragraph Text / Email Address)

Add an HTML element to the form (from the “More” tab) and enter this content:

1
2
34
56
78
9
10
11
<script>
    jQuery(function ($) {
        $('.iphorm_1_1').bind('keyup blur', function () {            if ($(this).val() != '') {
                $('.iphorm-submit-wrap-1').show();            } else {
                $('.iphorm-submit-wrap-1').hide();            }
        }).blur();
    });
</script>
<script>
    jQuery(function ($) {
        $('.iphorm_1_1').bind('keyup blur', function () {
            if ($(this).val() != '') {
                $('.iphorm-submit-wrap-1').show();
            } else {
                $('.iphorm-submit-wrap-1').hide();
            }
        }).blur();
    });
</script>
  • On line 3, change iphorm_1_1 to the Text Input unique ID
  • On lines 5 and 7, change the number 1 to the form ID

Show the submit button when a single Checkbox is ticked

Add an HTML element to the form (from the “More” tab) and enter this content:

1
2
3
4
5
67
89
10
11
1213
14
15
16
<script>
    jQuery(function ($) {
        function checkConditions()
        {
            if ($(this).is(':checked')) {
                $('.iphorm-submit-wrap-1').show();            } else {
                $('.iphorm-submit-wrap-1').hide();            }
        }
 
        var $checkbox = $('.iphorm_1_1');        $checkbox.click(checkConditions);
        checkConditions.call($checkbox[0]);
    });
</script>
<script>
    jQuery(function ($) {
        function checkConditions()
        {
            if ($(this).is(':checked')) {
                $('.iphorm-submit-wrap-1').show();
            } else {
                $('.iphorm-submit-wrap-1').hide();
            }
        }

        var $checkbox = $('.iphorm_1_1');
        $checkbox.click(checkConditions);
        checkConditions.call($checkbox[0]);
    });
</script>
  • On lines 6 and 8, change the number 1 to the form ID
  • On line 12, change iphorm_1_1 to the Checkbox unique ID

Show the submit button when a Multiple Choice (Radio Button) is checked

Add an HTML element to the form (from the “More” tab) and enter this content:

1
2
34
5
6
789
1011
12
13
14
15
16
17
<script>
    jQuery(function ($) {
        var $choices = $('.iphorm_1_1'); 
        function checkConditions()
        {
            if ($choices.filter(':checked').val() == 'Yes') {                $('.iphorm-submit-wrap-1').show();            } else {
                $('.iphorm-submit-wrap-1').hide();            }
        }
        
        $choices.click(checkConditions);
        checkConditions();
    });
</script>
<script>
    jQuery(function ($) {
        var $choices = $('.iphorm_1_1');

        function checkConditions()
        {
            if ($choices.filter(':checked').val() == 'Yes') {
                $('.iphorm-submit-wrap-1').show();
            } else {
                $('.iphorm-submit-wrap-1').hide();
            }
        }
        
        $choices.click(checkConditions);
        checkConditions();
    });
</script>
  • On line 3, change iphorm_1_1 to the Multiple Choice element unique ID
  • On line 7, change Yes to the to the value of the option that will trigger the submit button to show
  • On lines 8 and 10, change the number 1 to the form ID
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy