Support (offered by community volunteers) > Using Profiles

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

(1/8) > >>

Stoob:
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: ---<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.


--- End code ---


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!

Stoob:
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

Navigation

[0] Message Index

[#] Next page