X-Cart forums - Use Javascript and CSS to hid / flip visibilty of elements

I use this trick on a few different places on my site. It came about after using some less computer savvy people here at work to try to use the site. Mostly to hide parts of a form that a user doesn't need to see unless some criteria is met. Helps so they don't get confused as we know most users don't read.

Examples.
Gift Certificate page
http://www.aerostich.com/giftcert.php

The registration / checkout pages (shipping address is hidden)
https://www.aerostich.com/register.php

All we are doing is making a block of html code visible or hiding it.

I'll go through the process for the gift certificate page.

Step 1
This javascript function should be either in your javascript page or in the head or somewhere on the page.

Code:

// Function to flip visibility of certain div objects

function flipdiv(el,state) {

        if(state=="show"){

                status="block";

        }else{

                status="none";

        }

        document.getElementById(el).style.display = status;

}

Step 2
skin1/modules/Gift_Certificates/giftcert.tpl
Starting at about line 188

Code:

<TR><TD colspan="3"></TD></TR>



<TR><TD colspan="3" class="table_heading"><FONT class="ProductDetailsTitle">4. {$lng.lbl_gc_choose_delivery_method}</FONT></TD>

</TR>



<TR><TD colspan="3">

<table cellpadding="0" cellspacing="0" border="0" width="50%"><TR>

{if $config.Modules.enablePostMailGC eq "Y"}

<TD align="right"><INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" /></TD>

{else}

<INPUT type="hidden" name="send_via" value="E">

{/if}

<td nowrap>{$lng.lbl_gc_send_via_email}</TD>

<td width="60%" align="center">OR</td>

<td><INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" /></td>

<td nowrap>{$lng.lbl_gc_send_via_postal_mail}</td>

</TR>

</TABLE>

</TD>

</TR>

<TR>

<TD colspan="3">

<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>

<tr>

<TD colspan="3">{$lng.lbl_gc_enter_email}



</TD></TR>

<TR>

<TD nowrap align="right">{$lng.lbl_email}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_email" size="30" value="{$giftcert.recipient_email}" class="required"></TD>

</tr>

</table>



</TR>



{if $config.Modules.enablePostMailGC eq "Y"}

<tr>

<td colspan="3">

<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}



<TR><TD colspan="3">{$lng.txt_gc_enter_postal_mail}



</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_first_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_firstname" size="30" value="{$giftcert.recipient_firstname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_last_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_lastname" size="30" value="{$giftcert.recipient_lastname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_address}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_address" size="40" value="{$giftcert.recipient_address}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_city}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_city" size="30" value="{$giftcert.recipient_city}" class="required"></TD>

</TR>



{if $js_enabled eq 'Y' && $config.General.use_js_states eq 'Y'}

{include file="change_states_js.tpl"}

{include file="main/register_states.tpl" state_name="recipient_state" country_name="recipient_country" country=$giftcert.recipient_country|default:$userinfo.b_country|default:$config.General.default_country state=$giftcert.recipient_state|default:$userinfo.b_state full_state=$giftcert.recipient_statename|default:$userinfo.b_statename county_name="" default_county="" default_countyid="" form_name="gccreate" zipcode_name="recipient_zipcode"}

{else}

<TR>

<TD nowrap align="right">{$lng.lbl_state}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

{include file="main/states.tpl" states=$states name="recipient_state" default=$giftcert.recipient_state default_country=$giftcert.recipient_country}

</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_country}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

<SELECT name="recipient_country" size="1" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);">

{section name=country_idx loop=$countries}

<OPTION value="{$countries[country_idx].country_code}" {if $giftcert.recipient_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{elseif $countries[country_idx].country_code eq $userinfo.b_country}selected{/if}>{$countries[country_idx].country}</OPTION>

{/section}

</SELECT>

</TD>

</TR>





{/if}





<TR>

<TD nowrap align="right">{$lng.lbl_zip_code}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_zipcode" size="30" value="{$giftcert.recipient_zipcode}" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_phone}</TD>

<TD></TD>

<TD align="left"><INPUT type="text" name="recipient_phone" size="30" value="{$giftcert.recipient_phone}" class="text"></TD>

</TR>



{/if}

</table>

</td>

</tr>

</div>



</FORM>



</TABLE>








<CENTER>



{if $usertype eq "C" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $smarty.get.gcindex ne "" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $active_modules.Wishlist ne "" and $action eq "wl"}

{ include file="buttons/gc_update.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y"}

{else}

{ include file="buttons/gc_update.tpl" href="javascript: formSubmit();" js_to_href="Y"}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_add_to_cart href="javascript: formSubmit();" js_to_href="Y" style="button"}

{if $active_modules.Wishlist and $login ne ""}



{ include file="buttons/add_to_wishlist.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y" style="button"}

{/if}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_create href="javascript: formSubmit();" js_to_href="Y"}

{/if}

</CENTER>

{/capture}

{include file="dialog.tpl" title=$lng.lbl_gift_certificate_details content=$smarty.capture.dialog extra="width=100%"}

In the above code you will notice a few things that are essential to making it work.
1. The table tag containing the differnt deliver fields are as follows:
The email table tag

Code:

<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>

The postal table tag

Code:

<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}>

2. The radio buttons to specify which way to send it are as follows
Send Via Email radio button

Code:

<INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" />

Send Via Postal radio button

Code:

<INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" />

That's it, you can use it to hid several things on a page and make them appear. Have fun!

Sorry I should have been more clear. They are not getting prompted for Postal info. I tested it out and found that even though Email was selected it wouldn't send without the Postal info included.

Here is my giftcert code.

Code:

{* $Id: giftcert.tpl,v 1.37.2.3 2004/09/15 12:01:51 max Exp $ *}



<script language=JavaScript1.3 src="{$SkinDir}/show_hide.js"></script>



{include file="page_title.tpl" title=$lng.lbl_gift_certificate}



{include file="check_gcemail_script.tpl"}

{literal}

<SCRIPT type="text/javascript" language="JavaScript 1.2">

        function check_gc_form()

        {

         goodAmount=document.gccreate.amount.value.search(/^[0-9]+(\.[0-9][0-9]?)?$/);

         if (document.gccreate.recipient.value == "")

         {

{/literal}

                document.gccreate.recipient.focus();

                alert ("{$lng.txt_recipient_invalid|strip_tags|replace:"\n":" "|replace:"\r":" "}");

{literal}

                return false;

         }

{/literal}

        if (goodAmount==-1{if $usertype eq "C"} || document.gccreate.amount.value<{$min_gc_amount} || ({$max_gc_amount}>0 && document.gccreate.amount.value>{$max_gc_amount}){/if})

{literal}

         {

{/literal}

                document.gccreate.amount.focus();

            alert ("{$lng.txt_amount_invalid|strip_tags|replace:"\n":" "|replace:"\r":" "}");

{literal}

                return false;

         }

{/literal}

{if $config.Modules.enablePostMailGC eq "Y"}

    if ((document.gccreate.send_via[0].checked) && (!checkGCEmailAddress(document.gccreate.recipient_email)))

{literal}

     {

        document.gccreate.recipient_email.focus();

        return false;

     }

     if (document.gccreate.send_via[1].checked && (document.gccreate.recipient_firstname.value == "" || document.gccreate.recipient_lastname.value == "" || document.gccreate.recipient_address.value == "" || document.gccreate.recipient_city.value == "" || document.gccreate.recipient_zipcode.value == ""))

     {

        document.gccreate.recipient_firstname.focus();

{/literal}

        alert ("{$lng.txt_gc_enter_mail_address|strip_tags|replace:"\n":" "|replace:"\r":" "}");

{literal}

        return false;

     }

{/literal}

{else}

{literal}

     if if (!checkGCEmailAddress(document.gccreate.recipient_email))

     {

        document.gccreate.recipient_email.focus();

        return false;

     }

{/literal}

{/if}

{literal}

     return true;

    }



    function formSubmit() {

                if (check_gc_form()) {

                        document.gccreate.submit();

                }

        }

</SCRIPT>

{/literal}



{include file="check_zipcode_js.tpl"}



<TABLE cellpadding="5">

<TR>

<TD>[img]{$ImagesDir}/gift.gif[/img]</TD>

<TD>

{$lng.txt_gc_header}

</TD></TR>

</TABLE>

{if $login and $usertype eq "C"}








{capture name=dialog}

{$lng.txt_gift_certificate_checking_msg}








{if $smarty.get.gcid and $gc_array eq ""}

<FONT class="ErrorMessage">{$lng.err_gc_not_found}</FONT>

{/if}

<TABLE border="0">

<FORM action="giftcert.php">

<TR>

<TD>{$lng.lbl_gift_certificate}:</TD>

<TD><INPUT type="text" size="25" maxlength="16" name="gcid" value="{$smarty.get.gcid|escape:"html"}"></TD>

<TD><INPUT type="submit" value="{$lng.lbl_submit}"></TD>

</TR>

</FORM>

</TABLE>

{if $gc_array}

<HR size="1" noshade>

<TABLE border="0">

<TR>

<TD>{$lng.lbl_gc_id}:</TD>

<TD>{$gc_array.gcid}</TD>

</TR>

<TR>

<TD>{$lng.lbl_amount}:</TD>

<TD>{include file="currency.tpl" value=$gc_array.amount}</TD>

</TR>

<TR>

<TD>{$lng.lbl_remain}:</TD>

<TD>{include file="currency.tpl" value=$gc_array.debit}</TD>

</TR>

<TR>

<TD>{$lng.lbl_status}:</TD>

<TD>

{if $gc_array.status eq "P"}{$lng.lbl_pending}

{elseif $gc_array.status eq "A"}{$lng.lbl_active}

{elseif $gc_array.status eq "B"}{$lng.lbl_blocked}

{elseif $gc_array.status eq "D"}{$lng.lbl_disabled}

{elseif $gc_array.status eq "E"}{$lng.lbl_expired}

{elseif $gc_array.status eq "U"}{$lng.lbl_used}

{/if}

</TD>

</TR>

</TABLE>

{/if}

{/capture}

{include file="dialog.tpl" title=$lng.lbl_gift_certificate_checking content=$smarty.capture.dialog extra="width=100%"}

{/if}








{capture name=dialog}

{if $amount_error}

<P class="ErrorMessage">{$lng.txt_amount_invalid}</P>

{/if}

<TABLE border="0" width="100%" cellpadding="0">



{if $usertype eq "C"}



<FORM name="gccreate" action="giftcert.php" method="POST" onSubmit="javascript: return check_gc_form()">

<INPUT type="hidden" name="gcindex" value="{$smarty.get.gcindex|escape:"html"}">

<INPUT type="hidden" name="mode" value="gc2cart">



{else}



<FORM name="gccreate" action="giftcerts.php" method="POST" onSubmit="javascript: return check_gc_form()">

<INPUT type="hidden" name="mode" value="{$smarty.get.mode|escape:"html"}">

<INPUT type="hidden" name="gcid" value="{$smarty.get.gcid|escape:"html"}">



{/if}



<TR><TD colspan="3"><FONT class="ProductDetailsTitle">1. {$lng.lbl_gc_whom_sending}




</FONT>

{$lng.lbl_gc_whom_sending_subtitle}




</TD></TR>



<TR>

<TD align="right">{$lng.lbl_from}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="purchaser" size="30" value="{if $usertype eq "A"}{$config.Company.company_name}{else}{if $giftcert.purchaser}{$giftcert.purchaser|escape:"html"}{else}{$userinfo.firstname} {$userinfo.lastname}{/if}{/if}"></TD>

</TR>



<TR>

<TD align="right">{$lng.lbl_to}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient" size="30" value="{$giftcert.recipient|escape:"html"}"> </TD>

</TR>



<TR>

<TD colspan="3"><FONT class="ProductDetailsTitle">

2. {$lng.lbl_gc_add_message}

</FONT>

{$lng.lbl_gc_add_message_subtitle}




</TD>

</TR>



<TR>

<TD align="right">{$lng.lbl_message}</TD>

<TD><FONT class="Star"></FONT></TD>

<TD align="left"><TEXTAREA name="message" rows="8" cols="50">{$giftcert.message}</TEXTAREA></TD>

</TR>



<TR>

<TD colspan="3"><FONT class="ProductDetailsTitle">

3. {$lng.lbl_gc_choose_amount}

</FONT>

{$lng.lbl_gc_choose_amount_subtitle}




</TD>

</TR>



<TR>

<TD align="right">{$config.General.currency_symbol}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="amount" size="10" maxlength="9" value="{$giftcert.amount}">

{if $usertype eq "C" and ($min_gc_amount gt 0 or $max_gc_amount gt 0)}{$lng.lbl_gc_amount_msg} {if $min_gc_amount gt 0}{$lng.lbl_gc_from} {$config.General.currency_symbol}{$min_gc_amount}{/if} {if $max_gc_amount gt 0}{$lng.lbl_gc_through} {$config.General.currency_symbol}{$max_gc_amount}{/if}{/if}

</TD></TR>





<TR><TD colspan="3"></TD></TR>



<TR><TD colspan="3" class="table_heading"><FONT class="ProductDetailsTitle">4. {$lng.lbl_gc_choose_delivery_method}</FONT></TD>

</TR>



<TR><TD colspan="3">

<table cellpadding="0" cellspacing="0" border="0" width="50%"><TR>

{if $config.Modules.enablePostMailGC eq "Y"}

<TD align="right"><INPUT type="radio" name="send_via" value="E" {if $giftcert.send_via ne "P"}checked{/if} onClick="flipdiv('sendbyemail','show'); flipdiv('sendbypostal','hide');" /></TD>

{else}

<INPUT type="hidden" name="send_via" value="E">

{/if}

<td nowrap>{$lng.lbl_gc_send_via_email}</TD>

<td width="60%" align="center">OR</td>

<td><INPUT type="radio" name="send_via" value="P" {if $giftcert.send_via eq "P"}checked{/if} onClick="flipdiv('sendbyemail','hide'); flipdiv('sendbypostal','show');" /></td>

<td nowrap>{$lng.lbl_gc_send_via_postal_mail}</td>

</TR>

</TABLE>

</TD>

</TR>

<TR>

<TD colspan="3">

<table id="sendbyemail" {if $giftcert.send_via eq "P"}style="display: none;"{/if}>

<tr>

<TD colspan="3">{$lng.lbl_gc_enter_email}



</TD></TR>

<TR>

<TD nowrap align="right">{$lng.lbl_email}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_email" size="30" value="{$giftcert.recipient_email}" class="required"></TD>

</tr>

</table>



</TR>



{if $config.Modules.enablePostMailGC eq "Y"}

<tr>

<td colspan="3">

<table id="sendbypostal" {if $giftcert.send_via ne "P"}style="display: none;"{/if}



<TR><TD colspan="3">{$lng.txt_gc_enter_postal_mail}



</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_first_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_firstname" size="30" value="{$giftcert.recipient_firstname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_last_name}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_lastname" size="30" value="{$giftcert.recipient_lastname}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_address}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_address" size="40" value="{$giftcert.recipient_address}" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_city}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_city" size="30" value="{$giftcert.recipient_city}" class="required"></TD>

</TR>



{if $js_enabled eq 'Y' && $config.General.use_js_states eq 'Y'}

{include file="change_states_js.tpl"}

{include file="main/register_states.tpl" state_name="recipient_state" country_name="recipient_country" country=$giftcert.recipient_country|default:$userinfo.b_country|default:$config.General.default_country state=$giftcert.recipient_state|default:$userinfo.b_state full_state=$giftcert.recipient_statename|default:$userinfo.b_statename county_name="" default_county="" default_countyid="" form_name="gccreate" zipcode_name="recipient_zipcode"}

{else}

<TR>

<TD nowrap align="right">{$lng.lbl_state}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

{include file="main/states.tpl" states=$states name="recipient_state" default=$giftcert.recipient_state default_country=$giftcert.recipient_country}

</TD></TR>



<TR>

<TD nowrap align="right">{$lng.lbl_country}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left">

<SELECT name="recipient_country" size="1" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);">

{section name=country_idx loop=$countries}

<OPTION value="{$countries[country_idx].country_code}" {if $giftcert.recipient_country eq $countries[country_idx].country_code}selected{elseif $countries[country_idx].country_code eq $config.General.default_country and $userinfo.b_country eq ""}selected{elseif $countries[country_idx].country_code eq $userinfo.b_country}selected{/if}>{$countries[country_idx].country}</OPTION>

{/section}

</SELECT>

</TD>

</TR>





{/if}





<TR>

<TD nowrap align="right">{$lng.lbl_zip_code}</TD>

<TD><FONT class="Star">*</FONT></TD>

<TD align="left"><INPUT type="text" name="recipient_zipcode" size="30" value="{$giftcert.recipient_zipcode}" onChange="javascript: check_zip_code_field(document.forms['gccreate'].recipient_country, document.forms['gccreate'].recipient_zipcode);" class="required"></TD>

</TR>



<TR>

<TD nowrap align="right">{$lng.lbl_phone}</TD>

<TD></TD>

<TD align="left"><INPUT type="text" name="recipient_phone" size="30" value="{$giftcert.recipient_phone}" class="text"></TD>

</TR>



{/if}

</table>

</td>

</tr>

</div>



</FORM>



</TABLE>








<CENTER>



{if $usertype eq "C" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $smarty.get.gcindex ne "" or ($usertype eq "A" and $smarty.get.mode eq "modify_gc")}

{if $active_modules.Wishlist ne "" and $action eq "wl"}

{ include file="buttons/gc_update.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y"}

{else}

{ include file="buttons/gc_update.tpl" href="javascript: formSubmit();" js_to_href="Y"}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_add_to_cart href="javascript: formSubmit();" js_to_href="Y" style="button"}

{if $active_modules.Wishlist and $login ne ""}



{ include file="buttons/add_to_wishlist.tpl" href="javascript: document.gccreate.mode.value='addgc2wl'; formSubmit();" js_to_href="Y" style="button"}

{/if}

{/if}

{else}

{ include file="buttons/button.tpl" button_title=$lng.lbl_gc_create href="javascript: formSubmit();" js_to_href="Y"}

{/if}

</CENTER>

{/capture}

{include file="dialog.tpl" title=$lng.lbl_gift_certificate_details content=$smarty.capture.dialog extra="width=100%"}

Here is a link to the page: http://www.copperboppers.com/xcart/giftcert.php

Thanks for the help.