Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [HELP NEEDED] - DHTML Button toggle switch

    I have searched high and low for this topic and can't find it anywhere. I have an administration form that lists tasks for an admin. For each item on the task list I want to offer the admins a button that will dynamically show a form within the page and just under the task item (without sending the page back to the server at this point). When the button is clicked I want the text on the button to change from "Click here to add comments" to "Close this form". I also want any open form to close if another 'open form button' is pressed.

    I am still not that strong in JavaScript and DOM. I am not necessarily looking for some to do this for me, but I would like at least a starting point. I have found a small snippet that uses an image as the trigger for the event, but I would like to use a button to stay consistent with the look and feel of the page. All help would be greatly appreciated.

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    403
    Thanks
    2
    Thanked 31 Times in 31 Posts
    Changing the text on the button is the easy part:
    Code:
    <input type="button" value="Click here to add comments"
       onclick="this.value='Close this Form">
    For the ther part put each form inside of a div with a unique id and style it hidden:
    <div id='number1' style="display:hidden">
    <form etc...</div>

    on the element where the event gets triggered:

    onclick="showform('number1')"

    The function would look something like:

    Code:
    <script type="text/javascript">
    lastopen=false;
    function showform(x)
    {
       if (lastopen) lastopen.style.display='hidden';
       lastopen=document.getElementById(x);
       lastopen.style.display='block';
    }
    </script>
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found something like what I want and modified it for my needs (Thank you community server forums!). Here is the JS I have...

    Code:
    function togglePanel( targetID, buttonID, trackerID )
    {
    	if ( document.getElementById ) 
    	{
    		var target = document.getElementById( targetID ); // ID of the Div to show or hide
    				
    		if ( target != null ) 
    		{
    			target.style.display = ( target.style.display != "none" ) ? "none" : "";
    		}
    		
    		var button = document.getElementById( buttonID ); // ID of the button to change values
    		
    		if ( button != null )
    		{
    			button.value = ( target.style.display != "none" ) ? "Minimize this comment form" : "Print a repair pass with comments";
    		}
    		
    		var tracker = document.getElementById( trackerID );
    		
    		if ( tracker != null ) 
    		{
    			tracker.value = ( target.style.display == "none" ) ? "True" : "False";
    		}
    		
    		return false;
    	}
    	
    	return true;
    }
    And here is the HTML and trigger...
    Code:
    <input id="problem_tracker_1" name="problem_tracker_1" type="hidden" value="True" /><input type="button" id="problem_1_clicker" name="problem_1_clicker" onclick="return togglePanel('gate_pass_form_1', 'problem_1_clicker', 'problem_tracker_1');" value="Print a repair pass with comments" />
    <div id="gate_pass_form_1" style="display: none;">
    <form method="POST" action="http://localhost/nummi/admin/gate_pass.php?vid=363&amp;sid=bf7ba23385319c8871eb7a92846f4260" target="_blank" name="gate_pass_problem_1">
    <table border="0" cellpadding="0" cellspacing="0" width="90%" align="center">
    	<tr>
    
    		<td style="border-bottom: solid 1pt #98AAB1; padding-left: 10px;" height="25" colspan="3" align="left" valign="middle">
    			<span class="nav">Why is this pass needed? <br /></span>
    			<span class="gen"><input type="checkbox" name="itembox_1"> &nbsp; PEP Repair <input type="checkbox" name="itembox_2"> &nbsp; QA Analysis <input type="checkbox" name="itembox_3"> &nbsp; Other Repair <input type="checkbox" name="itembox_4"> &nbsp; Other Analysis</span>
    
    		</td>
    	</tr>
    	<tr>
    		<td style="border-bottom: solid 1pt #98AAB1; padding-left: 10px;" height="25" colspan="3" align="left" valign="middle">
    			<span class="nav">What items need repair? <br /></span>
    			<span class="gen"><input type="checkbox" name="itembox_5">&nbsp;Glass <input type="checkbox" name="itembox_6">&nbsp;Body <input type="checkbox" name="itembox_7">&nbsp;Metal <input type="checkbox" name="itembox_8">&nbsp;Paint <input type="checkbox" name="itembox_9">&nbsp;Light Repair <input type="checkbox" name="itembox_10">&nbsp;Heavy Repair <input type="checkbox" name="itembox_11">&nbsp;Other</span>
    
    		</td>
    	</tr>
    	<tr>
    		<td style="border-bottom: solid 1pt #98AAB1; padding-left: 10px;" height="25" colspan="3" align="left" valign="middle">
    			<span class="nav">Describe the work to be done, line by line: <br /></span>
    			<span class="gen">Line 1: <input type="text" name="item_desc_1" class="post" size="80" maxlength="80" /></span><br />
    			<span class="gen">Line 2: <input type="text" name="item_desc_2" class="post" size="80" maxlength="80" /></span><br />
    
    			<span class="gen">Line 3: <input type="text" name="item_desc_3" class="post" size="80" maxlength="80" /></span><br />
    			<span class="gen">Line 4: <input type="text" name="item_desc_4" class="post" size="80" maxlength="80" /></span><br />
    		</td>
    	</tr>
    	<tr>
    		<td class="row1" height="25" colspan="3" align="center" valign="middle">
    			<input type="hidden" name="vid" value="363" />
    			<input type="submit" name="submit" value="Make a Gate Pass" class="mainoption" />
    
    		</td>
    	</tr>
    </table>
    </form>
    </div>
    This actually works exactly as I want it to. Is there a way using your code (again, I am not that savvy in JS) to close one DIV and open another with one click of the button?

    BTW, Thanks for the response. I really appreciate it.
    Last edited by everah; 08-19-2005 at 01:22 AM.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    something like this?:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    var 
    =['closeD1-openD2','closeD2-openD1']
    function 
    switchD(b){
    var 
    vv=b.value
    document
    .getElementById('d1').style.display=(vv==v[0])?'none':'block';
    document.getElementById('d2').style.display=(vv==v[0])?'block':'none';
    b.value=(vv==v[0])?v[1]:v[0];
    }
    </script>
    </head>
    <body>
    <div id="d1">DIV 1</div>
    <div id="d2" style="display:none">DIV 2</div>
    <br>
    <br>
    <input type="button" value ="closeD1-openD2" onclick="switchD(this)">
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that is exactly what I was looking for. I am having internet troubles at work right now (a big thank you to the developer that built Zotob) but as soon as I can I will implement your code to see if it fits with that I am doing.

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So does domCollapse only work with the DIV element immediately following the trigger?


  •  

    Posting Permissions

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