You are viewing limited content. For full access, please sign in.

Question

Question

Hide submit button if no checkboxes are selected

asked on February 27, 2024

I am struggling with this one a bit because my javascript skills are lacking.

 

Essentially I have a form that I do not want submitted, if a citizen does not select a tool to rent.  Making the checkbox a required field won't work as some will be unchecked always.

 

My current JS hides the submit button quite well, but does not unhide it after the DB lookups (for current inventory)

.toolInventory is the table 

.checkMe is the checkboxes themselves

$(document).ready(function() {
    $('.Submit').hide();

    $('.toolInventory .checkMe').click(function () {
        var anyChecked = false;
        $('.toolInventory .checkMe').each(function() {
            if ($(this).is(':checked') && $(this).val() === 'Check_Out') {
                anyChecked = true;
                return false; // Exit early if any checkbox is slected
            }
        });

        if (anyChecked) {
            $('.Submit').show();
        } else {
            $('.Submit').hide();
        }
    });
});
 

What it currently does:

 

I appreciate any insight/advice.  My backup plan is to have the workflow determine if no values were selected, and then dump the process.  But that just seems unnecessary if I can control it from the front end.

 

Thank you.

0 0

Answer

SELECTED ANSWER
replied on February 27, 2024

You're really close - you're actually just missing one word in your code.

Side note - you can use the "{...} code" button in this editor to make your code easier to read.

$(document).ready(function() {
    $('.Submit').hide();

    $('.toolInventory .checkMe').click(function () {
        var anyChecked = false;
        $('.toolInventory .checkMe input').each(function() {
            if ($(this).is(':checked') && $(this).val() === 'Check_Out') {
                anyChecked = true;
                return false; // Exit early if any checkbox is slected
            }
        });

        if (anyChecked) {
            $('.Submit').show();
        } else {
            $('.Submit').hide();
        }
    });
});

 

The only change I made to your code was on line 6 - I added the word "input". 

If you examine the structure of the fields within your form, you'll see that the fields are actually a div element which contains a lot of other components such as labels, error containers, text above and below the field, etc.  The class name (in this case checkMe) is applied to that top-level div element.  We need to find and focus specifically on the input element(s) within the checkMe div, not on the div itself.

Hope this helps, and have a good day!

0 0

Replies

replied on February 27, 2024

This is why programming drives me nuts!

 

Thank you Matthew for the correction and explanation.  And you're right, i need to stop pasting my code that way.  I'll use the other method in the future (which I am sure I will be back here soon)

1 0
replied on February 27, 2024

FYI - If you prefer no-code solutions, the new designer can do this kind of behavior via Field Rules instead of scripting it.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.