Is there an alternative to conditional display:none

Question

I inherited an application where display:none was used to control conditional display of input elements based the values of other input elements.

The way this was handled is by running some pretty ugly code to evaluate field values and reset the display property in the during page load. Every time.

Isn't there a better way?

Answer 1

Using display: none in conjunction with JavaScript and CSS is the easiest way of simply showing or hiding DOM elements on the fly. That said, you could manipulate the DOM itself by adding or removing elements rather than simply showing / hiding them (with jQuery, for example).

Answer 2

Maybe your should just redesign the form that uses all the display: none fields or rewrite/refactor the script that does this checking? If the form is too large split it into several pieces - this will help the user too. I personally don't like if the form changes often whenever I am trying to fill in everything.

Answer 3

If you are not showing and hiding elements dynamically as the user interacts with the form, then there's no need to use CSS/Javascript. Just use your server-side language (PHP/JSP/whatever) to not output the hidden fields. You'll use less bandwidth, and the form will work even with Javascript disabled.

Answer 4

Is the idea to reshape the form on every POST or reorder fields before submitting. If the first then the fields shown should be removed on the server-side before page get to the user. If you are talking about changing on the client side before a post (e.g. removing fields which are not relevant based on the input in some fields as the user types), you can use javascript to remove fields from the DOM.

The two things your solution needs are:

1. The forms must be functional without javascript (even if they feel less slick)
2. Don't submit fields the user cannot see unless they are input tags with type="hidden". You will only confuse yourself on the backend if you don't know whether a user left a field blank or could not see it because it dynamically had its styling changed by a client-side script.

Answer 5

there is an partial alternate to display:none i.e use this style in css

opacity:0;

but problem with this is it doesn't appears on canvas but it is still there. using display:none; completely delete element and creates when u apply attribute display:block;