A better method of hiding form elements conditionally?

Hi there everyone,

For a very long time, I have used this form dependency manager. It’s pretty awesome, just by using classes, I can hide form elements depending on the action of another.

The issue I’m running into is that sometimes I need to hide more than just the form element, like text or an image relating to it as well and I can’t seem to figure out how to do it.

For instance, I’d like to hide complete divs in this form: https://wheeltastic.com/test.php

If Coupon were selected, I’d like to display only website and phone and if gift certificate were selected, I’d like only fax and address to be visible.

Is it possible to modify the javascript to do this, or does it perhaps already have that capability that I’m not utilizing correctly?

Thanks for your time!

Hi, I hope the code below gets you closer to what you need:

// you will need to assign an id to your select box
var select = document.getElementById("mySelectId");
var divs = document.querySelectorAll(".trow");
select.addEventListener("change", function(e){
	for (var i = 0; i < divs.length; i++) {
		divs[i].style.display = "none";
	}
	if (select.value === "coupon") {
		// note with this solution you will need to add a special class to those divs
		var toShow = document.querySelectorAll(".couponDiv");
		for (var i = 0; i < toShow.length; i++) {
			toShow[i].style.display = "block";
		}
	}
});

Hi there Andres and thanks very much for the help!

I’ve tried to implement your solution but it looks like I’ve messed it up somehow: https://wheeltastic.com/test.php

After adding the javascript to the head, I added an ID to the select, classes to the parent divs that I wanted to hide and changed the names in the javascript to reflect the new data. If I’m understanding it correctly, this page should have all the form elements hidden until I selected “Gift Certificate” (option value of gc).

Do you happen to see where I’ve messed up?

Thanks!

Anyone at all?

Hi @schwim,
The first problem that I see in the code is that you have put it in the head and it is not inside any onLoad function. So when it runs the HTML is not even there. To overcome this you can move your script tag to the bottom of the HTML document or even put it right after the relevant HTML.

If you wanted to leave your script in the head it will have to be wrapped in some kind of on load functionality. If you’re using jQuery then you can use $(document).ready(function() { /* code here */ }); otherwise you could use JavaScript native function window.onload = function(event){/* code here */}; but you have to be wary with this one as you could be overriding some other functionality and potentially breaking your application. For more details see https://thechamplord.wordpress.com/2014/07/04/using-javascript-window-onload-event-properly/

So after you overcome that problem then I think you could use some code like the following:

var giftDivs = document.querySelectorAll(".giftDiv");
var couponDivs = document.querySelectorAll(".couponDiv");
var setVisibility = function() {
	for (var i = 0; i < giftDivs.length; i++) {
		giftDivs[i].style.display = "none";
	}
	if (select.value === "gc") {
		for (var i = 0; i < giftDivs.length; i++) {
			giftDivs[i].style.display = "block";
		}
	} else if (select.value === "coupon") {
		for (var i = 0; i < couponDivs.length; i++) {
			couponDivs[i].style.display = "block";
		}
	}
};
var select = document.getElementById("type");
select.addEventListener("change", setVisibility);
setVisibility();

Please note I have not tested it so watch the console for any errors.

1 Like

Well you can (and obviously should) always use .addEventListener() to avoid this… but the actual equivalent to $(document).ready() would be

document.addEventListener('DOMContentLoaded', function () {
  // ...
})
1 Like

Yeah had a bit of a slip there. Thanks for pointing that out.

Hi there Andres and thanks for all your help.

I moved and modified the script and I can tell that it’s working now but there’s two oddities. First, the select box that controls the visibility shifts to the right when the hidden divs are made to be visible. The second issue is that the coupon divs always show, regardless of the select boxes state.

I looked in the console and there are no errors and I don’t notice anything in the code like mismatched or misspelled classes but perhaps you might see something I’ve done wrong while implementing it.

Thanks again for all your time and help!

Hi, maybe with the following modification it will work as you need it:

var allDivs = document.querySelectorAll(".giftDiv, .couponDiv");
var giftDivs = document.querySelectorAll(".giftDiv");
var couponDivs = document.querySelectorAll(".couponDiv");
var setVisibility = function() {
	for (var i = 0; i < allDivs.length; i++) {
		allDivs[i].style.display = "none";
	}
	if (select.value === "gc") {
		for (var i = 0; i < giftDivs.length; i++) {
			giftDivs[i].style.display = "block";
		}
	} else if (select.value === "coupon") {
		for (var i = 0; i < couponDivs.length; i++) {
			couponDivs[i].style.display = "block";
		}
	}
};
var select = document.getElementById("type");
select.addEventListener("change", setVisibility);
setVisibility();

to overcome the funny select box shifting add the following CSS (add an id to the select field container that has the class trow).

#selectContainer {
    position: relative;
    float: left;
    clear: both;
    width: 100%;
}

Cheers

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.