Difference between revisions of "JavaScript Show / Hide elements"
From All n One's bxp software Wixi
Philip Lacey (talk | contribs) (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...") |
Philip Lacey (talk | contribs) |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
The simple way to show or hide elements is to use the style tag of the object. | The simple way to show or hide elements is to use the style tag of the object. | ||
| − | <syntaxhighlight lang="javascript" line start="1 | + | <syntaxhighlight lang="javascript" line start="1"> |
document.getElementById(strFieldName).style.display = 'none'; | document.getElementById(strFieldName).style.display = 'none'; | ||
document.getElementById(strFieldName).style.display = 'inline'; | 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. | 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 | + | <syntaxhighlight lang="javascript" line start="1"> |
//======================================================================== | //======================================================================== | ||
function fn_Gen_Toggle ( strFieldName ){ | function fn_Gen_Toggle ( strFieldName ){ | ||
| Line 34: | Line 34: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | <syntaxhighlight lang="javascript" line start="1 | + | |
| + | 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 | ||
| + | <syntaxhighlight lang="javascript" > | ||
| + | fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ); | ||
| + | </syntaxhighlight> | ||
| + | replacing each of the parameters with true or false as required to | ||
| + | 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. | ||
| + | |||
| + | Here is the detail of the function if you want to reuse some of the JavaScript separately. | ||
| + | |||
| + | <syntaxhighlight lang="javascript" line start="1"> | ||
function fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ){ | function fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing ){ | ||
//---------------------------------------------------- | //---------------------------------------------------- | ||
| Line 64: | Line 75: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
| + | |||
| + | [[Category:Module Specific:Form Management]] | ||
| + | [[Category:Topic:JavaScript]] | ||
Latest revision as of 02:46, 22 March 2014
The simple way to show or hide elements is to use the style tag of the object.
document.getElementById(strFieldName).style.display = 'none';
document.getElementById(strFieldName).style.display = 'inline';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.
//========================================================================
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';
}
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 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.
Here is the detail of the function if you want to reuse some of the JavaScript separately.
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' ); }
}
