JavaScript Show / Hide elements - Revision history

Philip Lacey at 01:46, 22 March 2014

2014-03-22T01:46:41Z

Philip Lacey at 01:46, 22 March 2014

2014-03-22T01:46:12Z

Philip Lacey at 17:23, 21 January 2014

2014-01-21T17:23:47Z

Philip Lacey at 17:23, 21 January 2014

2014-01-21T17:23:22Z

Philip Lacey at 17:22, 21 January 2014

2014-01-21T17:22:52Z

Philip Lacey at 17:22, 21 January 2014

2014-01-21T17:22:16Z

Philip Lacey at 12:47, 16 March 2012

2012-03-16T12:47:34Z

Philip Lacey at 08:54, 16 March 2012

2012-03-16T08:54:50Z

Philip Lacey: Created page with "The simple way to show or hide elements is to use the style tag of the object. document.getElementById(strFie..."

2012-03-16T08:54:08Z

Created page with "The simple way to show or hide elements is to use the style tag of the object. <syntaxhighlight lang="javascript" line start="1" highlight="5"> document.getElementById(strFie..."

New page

The simple way to show or hide elements is to use the style tag of the object.

<syntaxhighlight lang="javascript" line start="1" highlight="5">
document.getElementById(strFieldName).style.display = 'none';
document.getElementById(strFieldName).style.display = 'inline';
</syntaxhighlight>

Inline shows the item.

None hides the item.

In campaigns to save time, we've implemented a lot of automatic show and hides.

Firstly, we've made show / hide separate function calls for easy of use, with a toggle function as well as implicit show and hide.

<syntaxhighlight lang="javascript" line start="1" highlight="5">
//========================================================================
function fn_Gen_Toggle ( strFieldName ){
if (document.getElementById(strFieldName).style.display == 'none'){
fn_Gen_Show ( strFieldName );
}
else {
fn_Gen_Hide ( strFieldName );
}
}
//========================================================================
function fn_Gen_Hide ( strFieldName ){
document.getElementById(strFieldName).style.display = 'none';
}
//========================================================================
function fn_Gen_Show ( strFieldName ){
document.getElementById(strFieldName).style.display = 'inline';
}
</syntaxhighlight>

With one function call to fn_Gen_EndElements you can show or hide most of the bottom elements of the page.

<syntaxhighlight lang="javascript" line start="1" highlight="5">
function fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ){
//----------------------------------------------------
if ( blComments == false) { fn_Gen_Hide ( 'tableBE_Comments' ); }
else{ fn_Gen_Show ( 'tableBE_Comments' ); }
//----------------------------------------------------
if ( blOutcome == false) { fn_Gen_Hide ( 'tableBE_Outcome' ); }
else{ fn_Gen_Show ( 'tableBE_Outcome' ); }
//----------------------------------------------------
if ( blCallback == false) { fn_Gen_Hide ( 'tableBE_Callback' ); }
else{ fn_Gen_Show ( 'tableBE_Callback' ); }
//----------------------------------------------------
if ( blAssignedTo == false) { fn_Gen_Hide ( 'tableBE_AssignTask' ); }
else{ fn_Gen_Show ( 'tableBE_AssignTask' ); }
//----------------------------------------------------
if ( blViewAppointments == false) { fn_Gen_Hide ( 'tableBE_ViewAppointments' ); }
else{ fn_Gen_Show ( 'tableBE_ViewAppointments' ); }
//----------------------------------------------------
if ( blAppFrom == false) { fn_Gen_Hide ( 'tableBE_AppointmentFrom' ); }
else{ fn_Gen_Show ( 'tableBE_AppointmentFrom' ); }
//----------------------------------------------------
if ( blAppUntil == false) { fn_Gen_Hide ( 'tableBE_AppointmentTo' ); }
else{ fn_Gen_Show ( 'tableBE_AppointmentTo' ); }
//----------------------------------------------------
if ( blClosing == false) { fn_Gen_Hide ( 'tableBE_ClosingScript' ); }
else{ fn_Gen_Show ( 'tableBE_ClosingScript' ); }
}
</syntaxhighlight>

← Older revision		Revision as of 01:46, 22 March 2014
Line 77:		Line 77:


−		+	[[Category:Module Specific:Form Management]]
	[[Category:Topic:JavaScript]]		[[Category:Topic:JavaScript]]

@@ Line 75: / Line 75: @@
+}
 </syntaxhighlight>
 [[Category:JavaScript]]

@@ Line 40: / Line 40: @@
 Simply add
 <syntaxhighlight lang="javascript" >
-fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing )
+fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing );
 </syntaxhighlight>
 replacing each of the parameters with true or false as required to

@@ Line 39: / Line 39: @@
 Simply add
-<syntaxhighlight lang="javascript" line start="1">
+<syntaxhighlight lang="javascript" >
-fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing )</syntaxhighlight>
+fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing )
- replacing each of the parameters with true or false as required to
+</syntaxhighlight>
 Main Menu > Form Management > Form - Primary Management > Form - Advanced Settings > Select your Form > JavaScript onLoad section > Opening code execution > put in the function call here.

@@ Line 38: / Line 38: @@
 A commonly asked question is how are the form elements turned on and off.  With one function call to fn_Gen_EndElements you can show or hide most of the bottom elements of the page.
-Simply add fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ), replacing each of the parameters with true or false as required to
+Simply add
 Main Menu > Form Management > Form - Primary Management > Form - Advanced Settings > Select your Form > JavaScript onLoad section > Opening code execution > put in the function call here.

← Older revision		Revision as of 12:47, 16 March 2012
Line 64:		Line 64:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
		+	[[Category:JavaScript]]

@@ Line 1: / Line 1: @@
 The simple way to show or hide elements is to use the style tag of the object.
-<syntaxhighlight lang="javascript" line start="1" highlight="5">
+<syntaxhighlight lang="javascript" line start="1">
 document.getElementById(strFieldName).style.display = 'none';
 document.getElementById(strFieldName).style.display = 'inline';
@@ Line 14: / Line 14: @@
 Firstly, we've made show / hide separate function calls for easy of use, with a toggle function as well as implicit show and hide.
-<syntaxhighlight lang="javascript" line start="1" highlight="5">
+<syntaxhighlight lang="javascript" line start="1">
 //========================================================================
 function fn_Gen_Toggle ( strFieldName ){
@@ Line 36: / Line 36: @@
 With one function call to fn_Gen_EndElements you can show or hide most of the bottom elements of the page.
-<syntaxhighlight lang="javascript" line start="1" highlight="5">
+<syntaxhighlight lang="javascript" line start="1">
 function fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ){
 	//----------------------------------------------------