Member Avatar for Sailor_Jerry

Is there a way using javascript to change the display of a form after it as been rendered?

I won’t to remove a checkbox on a form if a certain condition is true.

Since this case is not the norm, the default rendering displays the checkbox even though it’s not a valid selection.

And the check I guess would have to come when the link to display the form is clicked.

Any ideas??


Thanks

  • 2 Contributors
  • 3 Replies
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Sailor_Jerry

Dani AI

Generated

A few small refinements that build on ’s suggestion and on ’s div-wrapping approach:

Group each label and its control (or target the label by its for attribute) and toggle a CSS class instead of repeatedly setting inline styles. That keeps layout rules in CSS, avoids forcing inline elements to become blocks, and makes it easy to restore the original state. Use the element’s labels collection when available, or querySelector for a label selector fallback.

/* CSS */
.hidden { display: none !important; }
// JS (examples)
var chk = document.getElementById('myCheckbox'); // the input id
if (chk) {
  chk.classList.add('hidden');                  // hide the control
  (chk.labels || []).forEach(function(l){       // hide associated labels (if supported)
    l.classList.add('hidden');
  });
}

// fallback if you only have the input id but want to find the label:
var lbl = document.querySelector('label[for="myCheckbox"]');
if (lbl) lbl.classList.add('hidden');

Notes and best practices: use disabled to prevent submission of an invalid choice, or remove the element from the DOM with element.remove() if it must not be present. For accessibility, consider aria-hidden="true" or the HTML5 hidden attribute for semantic hiding. Always run the hide/show code after the DOM is ready (or inside the link click handler that displays the form). Never rely solely on client-side hiding — enforce the rule server-side as well.

References: MDN on classList and the labels collection are helpful starting points: classList and HTMLInputElement.labels.

Recommended Answers

All 3 Replies

Member Avatar for alpha_foobar

you can use the style property 'display' to show/hide elements in your web page. Its pretty simple, if you give content that you want to manipulate an id:

// to hide
document.getElementById("yourDivOrElementId").style.display = 'none';

// to show
document.getElementById("yourDivOrElementId").style.display = 'block';
Member Avatar for Sailor_Jerry

Thanks that worked for input element. Is there a way to hide elements that don't have an id? I have a label for the input element that looks like this

<label for"sameIDasInput">LableText</label>
Member Avatar for Sailor_Jerry

I just put everything that needed to be modified on the fly between a div tag like so

<div ID="test0" style="visibility:visible">

With the visibility set.

I used javascript to update the visibility.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.