www.webdeveloper.com
Results 1 to 6 of 6

Thread: Show/Hide at Object Level

  1. #1
    Join Date
    Apr 2008
    Posts
    64

    Show/Hide at Object Level

    I have a drop-down that I want to bring up certain options based on the user's selection. However, some options overlap- i.e. some options need to be available for more than one department. So... instead of showing and hiding tables, I was wondering if I could show/hide at the object level. I don't really have any code for this at the moment, but have listed an example below of what I'm trying to do. Notice how "txtEntry" and "txtOperatorName" are fields that are available for both Department1 and Department2, but "txtSortType" is only for Department2. How can I show/hide this field based on the department selected? Obviously, I can't have two fields on the page called "txtEntry" or "txtOperatorName." Thanks!


    HTML Code:
    <form name="frmIssueInput" id="frmIssueInput" method="post">
    <!-- Main Table of Options -->
    <table width="99%" border="0" cellspacing="2" cellpadding="2">
    	<tr>
    		<td width="30%">
    			<h4>Department:</h4>
    			<p>
    				<select name="select" id="select">
    					<option value="1">Department1</option>
    					<option value="2">Department2</option>
    				</select>
    			</p>
    		</td>
    	</tr>
    </table>
    
    <!-- Options when Department 1 is selected-->
    
    <h4>Entry #:</h4>
    <p><input name="txtEntry" id="txtEntry" type="text" size="5" maxlength="5"></p>
    
    <h4>Operator Name:</h4>
    <p><input name="txtOperatorName" id="txtOperatorName" type="text" size="25" maxlength="25"></p>
    
    
    <!-- Options when Department 2 is selected-->
    
    <h4>Entry #:</h4>
    <p><input name="txtEntry" type="text" id="txtEntry" size="5" maxlength="5"></p>
    
    <h4>Sort Type:</h4>
    <p><input name="txtSortType" type="text" id="txtSortType" size="25" maxlength="25"></p>
    
    <h4>Operator Name:</h4>
    <p><input name="txtOperatorName" id="txtOperatorName" type="text" size="25" maxlength="25"></p>
    </form>

  2. #2
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    You could just hide txtSort when you click a different department. Since it's the only unique element here, hiding/showing only it based upon departmental choice would probably be optimal.
    Web Jesters - The Masters of Multitasking.

  3. #3
    Join Date
    Apr 2008
    Posts
    64
    Here is what I did. However, #1 - I don't know how to show/hide the headings for each field. Any ideas? And #2 - it seems really lengthy - I am going to have about 10 options in this drop-down menu. Maybe an If statement is not the way to go? What might an array look like for this?


    HTML Code:
    <form name="frmIssueInput" id="frmIssueInput" method="post">
    <!-- Main Table of Options -->
    <table width="99%" border="0" cellspacing="2" cellpadding="2">
    	<tr>
    		<td width="30%">
    			<h4>Department:</h4>
    			<p>
    				<select name="cboDepartment" id="cboDepartment" onChange="swapOptions();" style="display:block;">
    					<option value="1">Department1</option>
    					<option value="2">Department2</option>
    				</select>
    			</p>
    		</td>
    	</tr>
    </table>
    
    <!-- Options when Department 1 is selected-->
    
    <h4>Entry #:</h4>
    <p><input name="txtEntry" id="txtEntry" type="text" size="5" maxlength="5" style="display:none;"></p>
    
    <h4>Operator Name:</h4>
    <p><input name="txtOperatorName" id="txtOperatorName" type="text" size="25" maxlength="25" style="display:none;"></p>
    
    
    <!-- Options when Department 2 is selected-->
    
    <h4>Entry #:</h4>
    <p><input name="txtEntry" type="text" id="txtEntry" size="5" maxlength="5" style="display:none;"></p>
    
    <h4>Sort Type:</h4>
    <p><input name="txtSortType" type="text" id="txtSortType" size="25" maxlength="25" style="display:none;"></p>
    
    <h4>Operator Name:</h4>
    <p><input name="txtOperatorName" id="txtOperatorName" type="text" size="25" maxlength="25" style="display:none;"></p>
    </form>
    
    <script language="javascript">
    
    function swapOptions()
    {
    	if(document.getElementById(cboDepartment).value == 1)
    	{
    		document.getElementById(txtEntry).style.display = 'block';
    		document.getElementById(txtOperatorName).style.display = 'block';
    		document.getElementById(txtSortType).style.display = 'none';
    	}
    	
    	if(document.getElementById(cboDepartment).value == 2)
    	{
    		document.getElementById(txtEntry).style.display = 'block';
    		document.getElementById(txtOperatorName).style.display = 'block';
    		document.getElementById(txtSortType).style.display = 'block';
    	}
    	
    }
    </script>
    

  4. #4
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    you may wish to encapsulate your txt entries and their headers into their own objects, that way u can call, for example

    Code:
    document.getElementById("txtSomething").parentNode.style.display = whatever
    That will then hide your encapsulated objects (h4 + p tags)

    As for the multiple options, you could set the values of your dropdown list as delimited strings (use the ; for example), change the 'swapOptions();' to 'swapOptions(this.value);' and then parse the string in swapOptions(). The options would list the elements you want to show (or hide), and you could do it accordingly in a switch statement.

    SUMMARY
    ---------

    - Encapsulate each <h4> and <p> into <div>.
    - Show/hide the parent of your inputs
    - Change dropdownlist values to delimited strings and pass in the onChange statement
    - parse the string in onChange function, hiding/showing each element
    Web Jesters - The Masters of Multitasking.

  5. #5
    Join Date
    Apr 2008
    Posts
    64
    Okay- trying the <div> tag thing first and getting lost. I must be missing something. (I'm not familiar with parentNode or div tags really) Nothing is displaying now when I do this.

    HTML Code:
    <div style="display:none">
    <h4>Entry #:</h4>
    <p><input name="txtEntry" id="txtEntry" type="text" size="5" maxlength="5">
    </div>
    Then I've added the JS line you posted into my other code:
    HTML Code:
    function swapOptions()
    {
    	if(document.getElementById(cboDepartment).value == 1)
    	{
    		document.getElementById(txtEntry).parentNode.style.display = 'block';	
    	}
    	
    }

  6. #6
    Join Date
    Apr 2008
    Posts
    64
    Tried this a number of ways, but to no avail. Can you provide some example code for hiding the heading and paragraph tags in this solution? Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles