TIP: How to copy address to Profile using JavaScript "Same as billing address"

[CiviTeacher.com]

A little background first...

On my site I have Donate (CiviContribute) page as well as a Registration (CiviEvent) page and on both pages I used a profile called "Mailing Address" at the bottom of the page.  This is in case the mailing address the person wants to use is different than the credit card billing address.

Because I wanted the form to be convenient I wrote a little javascript so that someone can click a button "Same as billing address" and it will copy the fields.

Now, I don't claim to be any kind of javascript expert and it's probably not the most efficient or graceful code but it works and it's very easy to read and understand what the script is doing.  Thankfully the same script works on both .tpl files associated with these pages.

CRM/Contribute/Form/Contribution/Main.tpl
CRM/Event/Form/Registration/Register.tpl

I am posting to hopefully help people who want to do something similar as me.  If you want to set up something like this do the following:

1) Create a profile in CiviCRM to include whatever fields you want, but most likely it will be the standard First Name, Last Name, Street, City etc like I have done here
2) Include that profile in CiviEvent/CiviContribute "configuration" screen at the bottom of the Contribution page and/or Registration page
3) Create a custom template (.tpl) directory in Administer > Configure > Global Settings > Directories  if you have not done so already ... More info on this procedure here: http://wiki.civicrm.org/confluence/display/CRMDOC/Directories or here http://wiki.civicrm.org/confluence/display/CRMDOC/Customize+Built-in%2C+Profile%2C+Contribution+and+Event+Registration+Screens
4) Copy the two .tpl (listed above) into the appropriate folder paths within your custom template folder
5) In each .tpl file, add the following Javascript+HTML after the   ending  </fieldset> of the "Billing Name and Address" somewhere around line 140 (give or take a few lines)

Code: [Select]

<SCRIPT LANGUAGE="JavaScript">
{literal}
function copyAddress(sameAsBilling) {

var firstName = document.getElementById('billing_first_name').value;
var lastName = document.getElementById('billing_last_name').value;
var streetAddress = document.getElementById('street_address-5').value;
var city = document.getElementById('city-5').value;
var stateProvince = document.getElementById('state_province_id-5').value;
var postalCode = document.getElementById('postal_code-5').value;
var country = document.getElementById('country_id-5').value;

var copy_firstName = document.getElementById('first_name');
var copy_lastName = document.getElementById('last_name');
var copy_streetAddress = document.getElementById('street_address-Primary');
var copy_city = document.getElementById('city-Primary');
var copy_stateProvince = document.getElementById('state_province-Primary');
var copy_postalCode = document.getElementById('postal_code-Primary');
var copy_country = document.getElementById('country-Primary');

if (sameAsBilling.checked) {
if (copy_firstName) copy_firstName.value = firstName;
if (copy_lastName) copy_lastName.value = lastName;
if (copy_streetAddress) copy_streetAddress.value = streetAddress;
if (copy_city) copy_city.value = city;
if (copy_stateProvince) copy_stateProvince.value = stateProvince;
if (copy_postalCode) copy_postalCode.value = postalCode;
if (copy_country) copy_country.value = country;
} else {
if (copy_firstName) copy_firstName.value = "";
if (copy_lastName) copy_lastName.value = "";
if (copy_streetAddress) copy_streetAddress.value = "";
if (copy_city) copy_city.value = "";
if (copy_stateProvince) copy_stateProvince.value = "";
if (copy_postalCode) copy_postalCode.value = "";
if (copy_country) copy_country.value = "";
}
}
{/literal}
</SCRIPT>   
<input type="checkbox" id="same_as_billing" value="" onClick="copyAddress(this)"> Mailing address is the same as the billing address.



Now I don't claim this is the most elegant solution and so I encourage someone more skilled than me to try to refine this process but this is something to start with at least and it works for me.  Hope it helps someone.

Here are two pages where I'm using the code example:
http://irest.us/drupal/civicrm/event/register?id=1&reset=1
http://irest.us/drupal/civicrm/contribute/transact?reset=1&id=1

[Dave Greenberg]

This is a great tip and very nicely documented! I think it would be a nice addition to the "Customize" doc on the wiki. How about creating a page below this one:

http://wiki.civicrm.org/confluence/display/CRMDOC/Customize+Built-in%2C+Profile%2C+Contribution+and+Event+Registration+Screens

and posting this procedure there. You could also add a link in the main page to your excellent example!

[CiviTeacher.com]

Ok done:

http://wiki.civicrm.org/confluence/display/CRMDOC/Add+%27Same+as+billing+address%27+button+for+convenience

[sonicthoughts]

This looks like something everyone would want.  Any chance we can get this contributed in 3.x? 

[Donald Lobo]

wanna submit a patch to make this happen?

its a bit more complicated to add in general. so the patch will have to account for:

1. That the right payment processor is being used (of type FORM)

2. does it for both event and contribution pages

3. checks if a profile is included and if so gets the "address" fields from the profile definition

4. matches the profile address fields with the billing fields and generates the right javascript

5. modify the template with the above info to include the right code and checkbox

lobo

[Kurund Jalmi]

Simplified version of above javascript is here

Index: templates/CRM/Contribute/Form/Contribution/Main.tpl
===================================================================
--- templates/CRM/Contribute/Form/Contribution/Main.tpl   (revision 26002)
+++ templates/CRM/Contribute/Form/Contribution/Main.tpl   (working copy)
@@ -209,8 +209,13 @@
     </fieldset>
     {/if}
 
-    {if $is_monetary}
-        {include file='CRM/Core/BillingBlock.tpl'}
+    {if $is_monetary}
+        {include file='CRM/Core/BillingBlock.tpl'}       
+        <div class="section sameAddress-section">   
+         <div class="label">{ts}Same address as billing{/ts}</div>
+            <div class="content"><input type="checkbox" id="sameAddress" value="1"></div>
+            <div class="clear"></div>
+        </div>       
     {/if}
 
     <div class="crm-group custom_post_profile-group">
@@ -275,6 +280,33 @@
 {/if}
 
 <script type="text/javascript">
+{literal}
+cj( function( ) {
+    cj('#sameAddress').click( function( ) {
+        sameAddress( this.checked );
+    });
+});
+
+function sameAddress( setValue ) {
+    var locationTypeInProfile = 1;
+    var orgID = field = fieldName = null;
+    cj('*:is(.billing_name_address-section)[id^=billing_]').each( function( i ){
+        orgID = cj(this).attr('id')
+        field = orgID.split('-');
+        fieldName = field[0].replace('billing_', '');
+        if ( field[1] ) {
+            fieldName = fieldName.replace('_id', '');
+            fieldName =  fieldName + '-' + locationTypeInProfile;
+        }
+        if ( setValue ) {
+            cj('#' + fieldName ).val(cj(this).val());
+        } else {
+            cj('#' + fieldName ).val('');
+        }
+    });
+}
+{/literal}
+
 {if $pcp}pcpAnonymous();{/if}
 {literal}
 var is_monetary = {/literal}{$is_monetary}{literal}

HTh
Kurund

[Eileen]

Kurund - has your version been committed to core? 3.1?

[Kurund Jalmi]

Kurund - has your version been committed to core? 3.1?

This is just a hack using custom templates.

Kurund

[Eileen]

Shame. Thanks though - there's a lot of demand for this.

[bwaindwain]

add the jquery slideUp/slideDown to make the div slide up and down like it does in Ubercart

Code: [Select]

if ( setValue ) {
  cj('#' + fieldName ).val(cj(this).val());
  $('div.custom_post_profile-group').slideUp();
} else {
  cj('#' + fieldName ).val('');
  $('div.custom_post_profile-group').slideDown();
}

[Dave Greenberg]

I've added an issue to implement generalized version of this for 3.3. If you want to see it happen sooner, submit a patch which meets the requirements noted above and in the issue:

http://issues.civicrm.org/jira/browse/CRM-5869

[JoeMurray]

Staff at an organization want to be able to quickly enter a paid events reservation while taking credit card info over the phone. They have about 25k contacts recently imported. Address data went into a variety of locations, but none into 'billing'.

They'd prefer not to have to fill in all of the contact address info when taking the phone reservation.

They have implemented this javascript tip to move primary address info into billing address on the regular event signup page. Unfortunately, when staff try to use this on the registration page accessed via the contact's event tab, the code doesn't work since neither of the profiles associated with the event are not displayed. Should I file an issue on that as profiles don't appear on demo site once event is selected?

Is there a good way to allow staff to prefill billing address fields for registering other users at present?

What I'm wondering is if there is a good way to use JSON/REST when going from the contact record. So search is used to get to somewhere like civicrm/contact/view?reset=1&cid=14950, then they click on the Event tab, then Submit Credit Card Event Registration, and then instead of filling in the Billing Address info, it gets prefilled with Primary Address fields specified in a Profile. An AJAX function on page loading would call something like

https://mydomain.ca/path/to/civi/codebase/civicrm/extern/rest.php?q=civicrm/search&key=myCiviCRMSiteKey&contact_id=14950&return[CRM:street_address-Primary]=1&return[CRM:city-Primary]=1&return[CRM:country-Primary]=1&return[CRM:state_province-Primary]=1&return[CRM:postal_code-Primary]=1&return[CRM:phone-Primary-1]=1

(I'm not sure if the pattern should be return[CRM:street_address-Primary]=1 or return.street_address-Primary=1, and also if the -Primary is assumed by default if not provided.)

The returned values could then be put into the appropriate fields.

Billing Address always seems like a big hassle to handle the edge cases where a person's primary address is not their billing address. I see you're going to address this in 3.3 if not earlier - I think this is a good idea.

Are there any alternative ways of handling this by manipulating the database to set the Billing Address to be the same as the Main Address which is (generally) indicated to be the Primary address?

[Dave Greenberg]

A couple of thoughts on how to prefill the Billing Address block from Primary Address data in "Submit Credit Card Event Registration" form...

1. I think you could implement logic to handle this pretty easily in a separate module, using the buildForm hook (since you're basically setting default value for the Billing Address fields IF they are null).

2. OR you can run a SQL update on the DB that would INSERT INTO civicrm_address a copy of each contacts is_primary address records for contacts who don't already have an address w/ civicrm_adderss.location_type_id = 5 (the ID for billing addresses).

[joe murray]

Thanks, Dave, for the good ideas. The first suggestion is certainly easier than trying to do it via AJAX. The second idea is a good quick and dirty solution we'll probably use. The issue is having multiple address locations with the same data that then needs to be updated simultaneously.

[annaleevk]

Dave,

Is this feature being added for version 3.4?

- Annalee