On Selection of Option, Fieldset Should Become Visible - It Doesn't

JavaScript
1

I’ve got a form in a bog-standard HTML page. When the user clicks on the select field in the form the paragraph with the id=“accountTypeInfo” becomes visible. That’s fine and dandy. The content within fieldset id=“PaymentDetailsFieldset” is hidden by JavaScript. If the user selects the “Premium” option value then the content within the fieldset id=“PaymentDetailsFieldset” should become visible…But it’s not and I don’t know why. I’ve included the part of the HTML form below and the external JS script I’ve written (yes, I know, it’s horrible, but I’m still trying to fully grasp the basics of JavaScript before moving on to optimising the code, etc.).

Can anyone help me get it to do what I’d like it to do?


<form>
	<fieldset>
		<legend><b>Account Details</b></legend>

		<div>
			<label for="userEmail">E-Mail Address:</label>
			<input type="text" name="userEmail" id="userEmail"/>
		</div>

		<div>
			<label for="userPassword">Password:</label>
			<input type="userPassword" name="userPassword" id="userPassword"/>
		</div>

		<div>
			<label for="userAccountType">Account Type:</label>

			<select name="userAccountTypeSelection" id="userAccountTypeSelection">
				<option value=""> - Select - </option>
				<option value="Free" name="Free" index="1" id="Free">Free</option>
				<option value="Premium" name="Premium" index="2" id="Premium">Premium</option>
			</select>

			<p id="accountTypeInfo">With a Free account you can read all our English Literature titles and buy eBook
			Bundles. With a Premium account, for &pound;9.99 a month, you can access our whole library.</p>
		</div>
	</fieldset>

	<fieldset id="paymentDetailsFieldset">
			<legend><b>Payment Details</b></legend>
	</fieldset>
</form>



function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

function fnAccountInfoToolTipHidden() {
	if (!document.getElementById) return false;
	var paragraphInfo = document.getElementById("accountTypeInfo");
	paragraphInfo.style.visibility = "hidden";
	event.preventDefault();
}

function fnAccountInfoToolTipVisible() {
	if (!document.getElementById) return false;
	var paragraphInfo = document.getElementById("accountTypeInfo");
	paragraphInfo.style.visibility = "visible";
	event.preventDefault();
}

function fnOnClickAccountInfo() {
	if (!document.getElementById) return false;
	var userAccountTypeSelection = document.getElementById("userAccountTypeSelection");
	userAccountTypeSelection.onclick = fnAccountInfoToolTipVisible;
}

function fnPaymentDetailsFieldsetHidden() {
	if (!document.getElementById) return false;
	var paymentDetailsFieldset = document.getElementById("paymentDetailsFieldset");
	paymentDetailsFieldset.style.visibility = "hidden";
	event.preventDefault();
}

function fnPaymentDetailsFieldsetVisible() {
	if (!document.getElementById) return false;
	var paymentDetailsFieldset = document.getElementById("paymentDetailsFieldset");
	paymentDetailsFieldset.style.visibility = "visible";
	event.preventDefault();
}

function fnOnClickPremiumSelection() {
	if (!document.getElementById) return false;
	var selectedValue = userAccountTypeSelection.options[userAccountTypeSelection.selectedIndex];
	var userAccountTypeSelection = document.getElementById("userAccountTypeSelection");

	if (document.selection.userAccountTypeSelection.selectedIndex == 2) {
		fnPaymentDetailsFieldsetVisible();
		event.preventDefault();
	}
}

addLoadEvent(fnAccountInfoToolTipHidden);
addLoadEvent(fnOnClickAccountInfo);
addLoadEvent(fnPaymentDetailsFieldsetHidden);
addLoadEvent(fnOnClickPremiumSelection);

Any ideas?

Many thanks :slight_smile:

2

Hey there Andrew, nice to see you again :slight_smile:

OK, you need to change the select so that the function fnOnClickPremiumSelection is fired only when required - when the selection changes.


<select name="userAccountTypeSelection" id="userAccountTypeSelection" onChange="fnOnClickPremiumSelection()">

So take it off onLoad.

Then change the function slightly




function fnOnClickPremiumSelection() {
	if (!document.getElementById) return false;
	
	var userAccountTypeSelection = document.getElementById("userAccountTypeSelection");
	var selectedValue = userAccountTypeSelection.options[userAccountTypeSelection.selectedIndex].index;
	
	if (selectedValue == 2) {
		fnPaymentDetailsFieldsetVisible();
		event.preventDefault();
	}
}

and it should work.

3

Hey Mike! Thanks for your quick reply and solution - It worked! :smiley: I can see a lot has changed around here with the team and a couple of new forums, including a code review forum too! Interesting stuff! Good to see you’re still on the Community Team too :slight_smile:

Don’t want to be cheeky now, but how would I customise this so that I can remove the onChange=“fnOnClickPremiumSelection()” from the select tags? I didn’t have the onLoad attribute in the earlier code I posted and everything else on the sign-up page and JS script works off of ID names.

4

Hi,

You could add an eventListener, e.g.

var mySelect = document.getElementById("userAccountTypeSelection");
mySelect.addEventListener('change', fnOnClickPremiumSelection, false);