CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site

This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using Profiles (Moderator: Dave Greenberg) »
  • TIP: How to copy address to Profile using JavaScript "Same as billing address"
Pages: [1] 2 3

Author Topic: TIP: How to copy address to Profile using JavaScript "Same as billing address"  (Read 17486 times)

CiviTeacher.com

  • I live on this forum
  • *****
  • Posts: 1282
  • Karma: 118
    • CiviTeacher
  • CiviCRM version: 3.4 - 4.5
  • CMS version: Drupal 6&7, Wordpress
  • MySQL version: 5.1 - 5.5
  • PHP version: 5.2 - 5.4
TIP: How to copy address to Profile using JavaScript "Same as billing address"
April 22, 2009, 04:56:48 pm
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


« Last Edit: April 22, 2009, 10:28:00 pm by Stoob »
Try CiviTeacher: the online video tutorial CiviCRM learning library.

Dave Greenberg

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
April 22, 2009, 09:10:45 pm
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!
Protect your investment in CiviCRM by  becoming a Member!

CiviTeacher.com

  • I live on this forum
  • *****
  • Posts: 1282
  • Karma: 118
    • CiviTeacher
  • CiviCRM version: 3.4 - 4.5
  • CMS version: Drupal 6&7, Wordpress
  • MySQL version: 5.1 - 5.5
  • PHP version: 5.2 - 5.4
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
April 22, 2009, 11:05:26 pm
Ok done:

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

Try CiviTeacher: the online video tutorial CiviCRM learning library.

sonicthoughts

  • Ask me questions
  • ****
  • Posts: 498
  • Karma: 10
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
November 05, 2009, 04:48:20 pm
This looks like something everyone would want.  Any chance we can get this contributed in 3.x? 

Donald Lobo

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
November 06, 2009, 06:02:54 am

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
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

Kurund Jalmi

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4169
  • Karma: 128
    • CiviCRM
  • CiviCRM version: 4.x, future
  • CMS version: Drupal 7, Joomla 3.x
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
January 21, 2010, 11:27:28 pm
Simplified version of above javascript is here

Quote
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
Found this reply helpful? Support CiviCRM

Eileen

  • Forum Godess / God
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4195
  • Karma: 218
    • Fuzion
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
January 21, 2010, 11:34:14 pm
Kurund - has your version been committed to core? 3.1?
Make today the day you step up to support CiviCRM and all the amazing organisations that are using it to improve our world - http://civicrm.org/contribute

Kurund Jalmi

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4169
  • Karma: 128
    • CiviCRM
  • CiviCRM version: 4.x, future
  • CMS version: Drupal 7, Joomla 3.x
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
January 21, 2010, 11:56:21 pm
Quote
Kurund - has your version been committed to core? 3.1?

This is just a hack using custom templates.

Kurund
Found this reply helpful? Support CiviCRM

Eileen

  • Forum Godess / God
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4195
  • Karma: 218
    • Fuzion
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
January 22, 2010, 12:01:00 am
Shame. Thanks though - there's a lot of demand for this.
Make today the day you step up to support CiviCRM and all the amazing organisations that are using it to improve our world - http://civicrm.org/contribute

bwaindwain

  • I post occasionally
  • **
  • Posts: 30
  • Karma: 1
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
February 22, 2010, 03:02:06 pm
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

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
February 22, 2010, 03:36:21 pm
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
Protect your investment in CiviCRM by  becoming a Member!

JoeMurray

  • Administrator
  • Ask me questions
  • *****
  • Posts: 578
  • Karma: 24
    • JMA Consulting
  • CiviCRM version: 4.4 and 4.5 (as of Nov 2014)
  • CMS version: Drupal, WordPress, Joomla
  • MySQL version: MySQL 5.5, 5.6, MariaDB 10.0 (as of Nov 2014)
Pulling Profile info to implement "Same as billing address" for Events tab
March 08, 2010, 10:14:43 am
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?
« Last Edit: March 08, 2010, 10:40:43 am by JoeMurray »
Co-author of Using CiviCRM https://www.packtpub.com/using-civicrm/book

Dave Greenberg

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 5760
  • Karma: 226
    • My CiviCRM Blog
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
March 08, 2010, 02:27:58 pm
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).
Protect your investment in CiviCRM by  becoming a Member!

joe murray

  • Guest
Re: TIP: How to copy address to Profile using JavaScript "Same as billing addres
March 08, 2010, 03:51:24 pm
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

  • I post occasionally
  • **
  • Posts: 87
  • Karma: 3
  • Carpe Noctem!
    • Women in Development, New York
  • CiviCRM version: 3.4.5
  • CMS version: Drupal 6.22
  • MySQL version: 5.1.48
  • PHP version: 5.2.14
Re: TIP: How to copy address to Profile using JavaScript "Same as billing address"
January 25, 2011, 06:35:19 am
Dave,

Is this feature being added for version 3.4?

- Annalee
Annalee Van Kleeck
Lyric Systems, LLC
201 951.8711
annalee@lyricsystems.com

Pages: [1] 2 3
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Support »
  • Using CiviCRM »
  • Using Profiles (Moderator: Dave Greenberg) »
  • TIP: How to copy address to Profile using JavaScript "Same as billing address"

This forum was archived on 2017-11-26.