SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)

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

    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?

    HTML Code:
    <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>
    Code:
    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

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hey there Andrew, nice to see you again

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

    Code:
    <select name="userAccountTypeSelection" id="userAccountTypeSelection" onChange="fnOnClickPremiumSelection()">
    So take it off onLoad.

    Then change the function slightly
    Code:
    
    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.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hey Mike! Thanks for your quick reply and solution - It worked! 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

    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by AndrewCooper View Post
    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?
    You could add an eventListener, e.g.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •