Hide form elements easily with conditionize.js

David Carr

Tools Development

When working with forms it’s common to hide or show form elements based on a condition, this involved writing javascript to check for a change on the chosen element once detected then activate a show or hide code snippet. Whilst that works well it can be time consuming and tedious when doing multiple conditions. 

This is where a conditionize.js comes in.

“A small jQuery plugin for handling showing and hiding things conditionally based on input - typically groups of form fields. It works using data attributes to keep all of the name/values for inputs directly in the markup and saves you the trouble of having to manually show/hide a bunch of stuff through JS, as well as improving maintenance if you need to change the name or value of an input you were listening to.”

Using this library it’s easy to have multiple conditions or complex nested blocks shown or hidden using nothing more than classes and data attributes!

See this brilliant demo created by Renee Vrantsidis

See the Pen conditionize.js - Conditional Form Fields w/ Data Attributes by Renee Vrantsidis (@renvrant) on CodePen.

Fathom Analytics $10 discount on your first invoice using this link

David Carr - Laravel Developer

Hi, I’m David Carr

A Senior Developer at Vivedia
I love to use the TALL stack (Tailwind CSS, Alpine.js, Laravel, and Laravel Livewire)

I enjoy writing tutorials and working on Open Source packages.

I also write books. I'm writing a new book Laravel Testing Cookbook, This book focuses on testing coving both PestPHP and PHPUnit.

Sponsor me on GitHub

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Laravel Testing Cookbook

Help support the blog so that I can continue creating new content!

Fathom Analytics $10 discount on your first invoice using this link

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2006 - 2023 DC Blog. All code MIT license. All rights reserved.