Paypal Donation form with jQuery love

Submitted by matthew on March 30, 2010 - 12:36pm

I needed a donation form that would make it easy for users to select between a subscription or a one time donation. With a little jQuery love the magic happens.

First we include jquery and the jquery validate plugin. Then we setup a radio box to select between subscription and one time donation.

After the validation is successfull when the form is submitted, post the data via ajax to a php script which will enter the data in our local database. Then we return true and submit the form which will send the data to paypal. Here are all the scripts.

Javascript:


<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amountDiv').hide();
$('input:radio[name=giftType]').click(function() {
if ($(this).attr("id")==='chooseMonthly') {
$("#oneTimeGiftDiv").hide();
$("#amountDiv").show();
$("#extraDetails").html('<input type="hidden" name="cmd" value="_xclick-subscriptions"><input type="hidden" name="currency_code" value="USD"><input type="hidden" name="src" value="1"><input type="hidden" name="p3" value="1"><input type="hidden" name="t3" value="M"><input type="hidden" name="sra" value="1">');
} else {
$("#amountDiv").hide();
$("#oneTimeGiftDiv").show();
$("#extraDetails").html('<input type="hidden" name="cmd" value="_donations">');
}
});

$("#contactForm").validate({
submitHandler: function(form) {
$.post("paypal.php",$("#contactForm").serialize(), function (data, textStatus) {
if(data == true){
form.submit();
} else {
$("#statusMsg").html(data);
}
}, "json");
},

rules: {
fname: "required",
lname: "required",
email: {
required: true,
email: true
},
email_confirm: {
required: true,
equalTo: "#email"
},
Captcha: {
required: true
}
}
});

$('#email_confirm').change(function(){
$("#contactForm").validate().element('#email_confirm');
});
});
</script>

Php to save your data:


<?php
if(isset($_POST['submitted_btn'])){
unset($_POST['business']);
unset($_POST['lc']);
unset($_POST['item_name']);
unset($_POST['item_number']);
unset($_POST['no_note']);
unset($_POST['no_shipping']);
unset($_POST['rm']);
unset($_POST['return']);
unset($_POST['currency_code']);
unset($_POST['cmd']);
unset($_POST['submitted_btn']);
foreach($_POST as $key => $value){
$message .= $key.": ".$value."\n";
}

// post data to database here if you want!

if(mail("email@example.com", "New Donation", $message, "From: email@example.com")){
print json_encode(true);
} else {
print json_encode(false);
}
}
?>

Html form:


<form id="contactForm" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div id="statusMsg"></div>
<h3>Your Information</h3>
<label for="first_name">First Name</label>
<input name="first_name" type="text" id="first_name" />
<label for="last_name">Last Name</label>
<input name="last_name" type="text" id="last_name" />
<label for="email">Email</label>
<input name="email" id="email" type="text" />
<label for="email_confirm">Confirm Email</label>
<input name="email_confirm" id="email_confirm" type="text" />
<label for="night_phone_a">Phone</label>
<input name="night_phone_a" id="night_phone_a" type="text"/>
<label for="address1">Address</label>
<input name="addr1" id="address1" type="text" />
<label for="address2">Address Cont.</label>
<input name="addr2" id="address2" type="text"/>
<label for="city">City</label>
<input name="city" id="city" type="text" />
<label for="state">State</label>
<input name="state" id="state" type="text" size="5" maxlength="2"/>
<label for="zip">ZIP/Postal Code</label>
<input name="zip" id="zip" type="text" size="10" maxlength="5" />
<h3>Donation Information</h3>
<div class="formDiv">
<input type="radio" name="giftType" value="One Time Gift" id="chooseOneTime" checked="checked" />One Time Gift of:
<input type="radio" name="giftType" value="Monthly Gift" id="chooseMonthly" />Monthly Gift of:</div>
<div class="formDiv" id="oneTimeGiftDiv">
<select name="amount" id="amount">
<option value="1000" selected="selected">$1000</option>
<option value="500">$500</option>
<option value="250">$250</option>
<option value="100">$100</option>
<option value="50">$50</option>
<option value="35">$35</option>
</select>
</div>
<div class="formDiv" id="amountDiv">
<input type="text" id="a3" name="a3" size="10" maxlength="5" class="textFields state_zip" />
</div>
<input type="hidden" name="business" value="email@paypalemail.com">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="donation">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="http://example.com/thanks.php">
<input type="hidden" name="currency_code" value="USD">
<span id="extraDetails">
<input type="hidden" name="cmd" value="_donations">
</span>
</form>

There you have it. Put it all together and you have a pretty donation form with options for your users.

What is Drupal?

Drupal - a completely free, open source content management system that many organizations are using today to provide for their needs. Drupal's many features and add-ons allow it to be used for a variety of website needs. Drupal is a good choice for today's organizations of any size because it is free, easy, and incredibly flexible.

Copyright © mrconnerton.com, 2008-2010. All Rights Reserved Drupal theme by Kiwi Themes.