I'm having problems with the javascript in my donation form on my wordpress page.
I want the form to dump the inputted information into the paypal invoice so that I can see the inputted information upon payment. I currently have the code, but having wordpress/paypal interoperability issues. I do need code help making sure the contribution amount is no more than $360
Here's the specific page I've been working on:
http://web62134.aiso.net/?page_id=23
Here's an example of how it should work:
http://angelbarajas.com/donate.php
<script type="text/javascript">// <![CDATA[
function UpdateForm (obj1) {
var themessage = "You are required to complete the following fields: ";
if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}
if (obj1.first_name.value=="") {
themessage = themessage + " - First Name";
}
if (obj1.last_name.value=="") {
themessage = themessage + " - Last Name";
}
if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}
if (obj1.city.value=="") {
themessage = themessage + " - City";
}
if (obj1.state.value=="") {
themessage = themessage + " - State";
}
if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}
if (obj1.company.value=="") {
themessage = themessage + " - Employer";
}
if (obj1.occupation.value=="") {
themessage = themessage + " - Ocupation";
}
if (obj1.email.value=="") {
themessage = themessage + " - Email";
}
if (obj1.phone1.value=="") {
themessage = themessage + " - Phone";
}
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
obj1.submit();
}
else {
alert(themessage);
return false;
}
obj1.item_name.value = "Donation for: " + obj1.item_name.value ;
obj1.os0.value = obj1.first_name.value + " " + obj1.last_name.value +" - Address: " + obj1.address1.value + " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value + " " + obj1.zip.value; // + obj1.myopt4.value + ...
obj1.os1.value = obj1.company.value + " Occupation: " + obj1.occupation.value + " Contributor:" + obj1.contributor.value + " Email:" + obj1.email.value + " Phone (" + obj1.phonetype.value + ") :" + obj1.phone1.value;
}
// ]]></script>
<form id="donationform" action="https://www.paypal.com/cgi-bin/webscr" method="post"><input name="business" type="hidden" value="[email protected]" /> <input name="no_shipping" type="hidden" value="1" /> <input name="cmd" type="hidden" value="_xclick" />
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td width="149">Contribution Amount:</td>
<td width="451"><input id="amount" name="amount" size="10" type="text" /></td>
</tr>
<tr>
<td>First Name:</td>
<td><input id="first_name" name="first_name" size="40" type="text" /></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input id="last_name" name="last_name" size="40" type="text" /></td>
</tr>
<tr>
<td>Address 1 :</td>
<td><input id="address1" name="address1" size="40" type="text" /></td>
</tr>
<tr>
<td>Address 2 :</td>
<td><input id="address2" name="address2" size="40" type="text" /></td>
</tr>
<tr>
<td>City:</td>
<td><input id="city" name="city" size="40" type="text" /></td>
</tr>
<tr>
<td>State:</td>
<td><input id="state" name="state" size="40" type="text" /></td>
</tr>
<tr>
<td>Zip:</td>
<td><input id="zip" name="zip" size="40" type="text" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">California Law requires political contributors to report their name, mailing address, occupation and name of employer for each individual.</td>
</tr>
<tr>
<td>Employer:</td>
<td><input id="company" name="company" size="40" type="text" /></td>
</tr>
<tr>
<td>Occupation:</td>
<td><input id="occupation" name="occupation" size="40" type="text" />(enter "none" if not employed)</td>
</tr>
<tr>
<td>Email:</td>
<td><input id="email" name="email" size="40" type="text" /><label></label></td>
</tr>
<tr>
<td>Phone:</td>
<td><input id="phone1" maxlength="13" name="phone1" size="13" type="text" />
<select name="phonetype"> <option value="Home">Home</option> <option value="Work">Work</option> <option value="Mobile">Mobile</option> </select></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
<input name="item_name" type="hidden" value="Claudia for City Council 2010" />
<input name="no_note" type="hidden" value="1" /> <input name="currency_code" type="hidden" value="USD" /> <input name="tax" type="hidden" value="0" /> <input name="on0" type="hidden" value="Donor" /> <input name="os0" type="hidden" /> <input name="bn" type="hidden" value="PP-DonationsBF" /> <input name="on1" type="hidden" value="Employer" /> <input name="os1" type="hidden" /> <input name="currency_code" type="hidden" value="USD" /> <input name="lc" type="hidden" value="US" />
<input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" /><img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="1" height="1" />
</form></code>
Rashad Aliyev answers:
That's about your plugin conflict.
Rashad Aliyev comments:
I think your <strong>Comment-Reply</strong> plugin bug. Disable it and try again.
Mark Perryman comments:
Comment-Reply is disabled and still didn't work. Thanks though.
Rashad Aliyev comments:
Disable Comment Reply
Be sure it's not appear in your codes.
<script type='text/javascript' src='http://web62134.aiso.net/wp-includes/js/comment-reply.js?ver=20090102'></script>
<script type='text/javascript' src='http://web62134.aiso.net/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
Your JQuery version conflicting.!!!
Download this [[LINK href="http://angelbarajas.com/js/jquery.js"]]JQuery[[/LINK]] and put your js folder and put this code to the header.
<script type='text/javascript' src='http://web62134.aiso.net/wp-includes/js/jquery/jquery.js'></script>
It'll worked!
Utkarsh Kukreti answers:
Use the following code
<script type="text/javascript">// <![CDATA[
function UpdateForm (obj1) {
var themessage = "You are required to complete the following fields: ";
if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}
if (obj1.first_name.value=="") {
themessage = themessage + " - First Name";
}
if (obj1.last_name.value=="") {
themessage = themessage + " - Last Name";
}
if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}
if (obj1.city.value=="") {
themessage = themessage + " - City";
}
if (obj1.state.value=="") {
themessage = themessage + " - State";
}
if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}
if (obj1.company.value=="") {
themessage = themessage + " - Employer";
}
if (obj1.occupation.value=="") {
themessage = themessage + " - Ocupation";
}
if (obj1.email.value=="") {
themessage = themessage + " - Email";
}
if (obj1.phone1.value=="") {
themessage = themessage + " - Phone";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
obj1.submit();
}
else {
alert(themessage);
return false;
}
obj1.item_name.value = "Donation for: " + obj1.item_name.value ;
obj1.os0.value = obj1.first_name.value + " " + obj1.last_name.value +" - Address: " + obj1.address1.value + " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value + " " + obj1.zip.value; // + obj1.myopt4.value + ...
obj1.os1.value = obj1.company.value + " Occupation: " + obj1.occupation.value + " Contributor:" + obj1.contributor.value + " Email:" + obj1.email.value + " Phone (" + obj1.phonetype.value + ") :" + obj1.phone1.value;
}
}
// ]]></script>
Mark Perryman comments:
Utkarsh Kukreti, thanks but unfortunately it still is not working. The entered text in the form is not showing up on the paypal checkout/ invoice.
Utkarsh Kukreti comments:
Try this for html
<form id="donationform" action="https://www.paypal.com/cgi-bin/webscr" method="post" onSubmit="this.target='paypal'; return UpdateForm(this);"><input name="business" type="hidden" value="[email protected]" /> <input name="no_shipping" type="hidden" value="1" /> <input name="cmd" type="hidden" value="_xclick" />
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td width="149">Contribution Amount:</td>
<td width="451"><input id="amount" name="amount" size="10" type="text" /></td>
</tr>
<tr>
<td>First Name:</td>
<td><input id="first_name" name="first_name" size="40" type="text" /></td>
</tr>
<tr>
<td>Last Name :</td>
<td><input id="last_name" name="last_name" size="40" type="text" /></td>
</tr>
<tr>
<td>Address 1 :</td>
<td><input id="address1" name="address1" size="40" type="text" /></td>
</tr>
<tr>
<td>Address 2 :</td>
<td><input id="address2" name="address2" size="40" type="text" /></td>
</tr>
<tr>
<td>City:</td>
<td><input id="city" name="city" size="40" type="text" /></td>
</tr>
<tr>
<td>State:</td>
<td><input id="state" name="state" size="40" type="text" /></td>
</tr>
<tr>
<td>Zip:</td>
<td><input id="zip" name="zip" size="40" type="text" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">California Law requires political contributors to report their name, mailing address, occupation and name of employer for each individual.</td>
</tr>
<tr>
<td>Employer:</td>
<td><input id="company" name="company" size="40" type="text" /></td>
</tr>
<tr>
<td>Occupation:</td>
<td><input id="occupation" name="occupation" size="40" type="text" />(enter "none" if not employed)</td>
</tr>
<tr>
<td>Email:</td>
<td><input id="email" name="email" size="40" type="text" /><label></label></td>
</tr>
<tr>
<td>Phone:</td>
<td><input id="phone1" maxlength="13" name="phone1" size="13" type="text" />
<select name="phonetype"> <option value="Home">Home</option> <option value="Work">Work</option> <option value="Mobile">Mobile</option> </select></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
<input name="item_name" type="hidden" value="Claudia for City Council 2010" />
<input name="no_note" type="hidden" value="1" /> <input name="currency_code" type="hidden" value="USD" /> <input name="tax" type="hidden" value="0" /> <input name="on0" type="hidden" value="Donor" /> <input name="os0" type="hidden" /> <input name="bn" type="hidden" value="PP-DonationsBF" /> <input name="on1" type="hidden" value="Employer" /> <input name="os1" type="hidden" /> <input name="currency_code" type="hidden" value="USD" /> <input name="lc" type="hidden" value="US" />
<input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" type="image" /><img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="1" height="1" />
</form>
and this for the js (includes check for 360)
<script type="text/javascript">// <![CDATA[
function UpdateForm (obj1) {
var themessage = "You are required to complete the following fields: ";
if (parseInt(obj1.amount.value) > 360) { alert("Amount has to be less than 360"); return false; }
if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}
if (obj1.first_name.value=="") {
themessage = themessage + " - First Name";
}
if (obj1.last_name.value=="") {
themessage = themessage + " - Last Name";
}
if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}
if (obj1.city.value=="") {
themessage = themessage + " - City";
}
if (obj1.state.value=="") {
themessage = themessage + " - State";
}
if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}
if (obj1.company.value=="") {
themessage = themessage + " - Employer";
}
if (obj1.occupation.value=="") {
themessage = themessage + " - Ocupation";
}
if (obj1.email.value=="") {
themessage = themessage + " - Email";
}
if (obj1.phone1.value=="") {
themessage = themessage + " - Phone";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
obj1.submit();
}
else {
alert(themessage);
return false;
}
obj1.item_name.value = "Donation for: " + obj1.item_name.value ;
obj1.os0.value = obj1.first_name.value + " " + obj1.last_name.value +" - Address: " + obj1.address1.value + " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value + " " + obj1.zip.value; // + obj1.myopt4.value + ...
obj1.os1.value = obj1.company.value + " Occupation: " + obj1.occupation.value + " Contributor:" + obj1.contributor.value + " Email:" + obj1.email.value + " Phone (" + obj1.phonetype.value + ") :" + obj1.phone1.value;
}
}
// ]]></script>
Mark Perryman comments:
I just tried entering the code you suggested. No error message came up when I entered in over 360, and the entered text in the form did not pass through to the paypal.
Here's how the page is parsing, if you'd like to see.
http://web62134.aiso.net/?page_id=23
Utkarsh Kukreti comments:
The script you inserted came up with <p> tags. You should add that in html mode :)
Utkarsh Kukreti comments:
Looks like it works fine now.
Chris Lee answers:
I would recommend using the jQuery Library as well as the validation plugin. I could set this up and finish the form for you.
Deepak Thomas answers:
Utkarsh's edit with mod for "Donation amount" check :
<script type="text/javascript">// <![CDATA[
function UpdateForm (obj1) {
var themessage = "You are required to complete the following fields: ";
if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}
if (obj1.amount.value>360) {
themessage = "Please keep the donation amount less than $360";
}
if (obj1.first_name.value=="") {
themessage = themessage + " - First Name";
}
if (obj1.last_name.value=="") {
themessage = themessage + " - Last Name";
}
if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}
if (obj1.city.value=="") {
themessage = themessage + " - City";
}
if (obj1.state.value=="") {
themessage = themessage + " - State";
}
if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}
if (obj1.company.value=="") {
themessage = themessage + " - Employer";
}
if (obj1.occupation.value=="") {
themessage = themessage + " - Ocupation";
}
if (obj1.email.value=="") {
themessage = themessage + " - Email";
}
if (obj1.phone1.value=="") {
themessage = themessage + " - Phone";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
obj1.submit();
}
else {
alert(themessage);
return false;
}
obj1.item_name.value = "Donation for: " + obj1.item_name.value ;
obj1.os0.value = obj1.first_name.value + " " + obj1.last_name.value +" - Address: " + obj1.address1.value + " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value + " " + obj1.zip.value; // + obj1.myopt4.value + ...
obj1.os1.value = obj1.company.value + " Occupation: " + obj1.occupation.value + " Contributor:" + obj1.contributor.value + " Email:" + obj1.email.value + " Phone (" + obj1.phonetype.value + ") :" + obj1.phone1.value;
}
}
// ]]></script>
Mark Perryman comments:
I tried the code, and unfortunately it doesn't input the form data into the paypal form correctly. Thanks though.
Deepak Thomas comments:
Could I know what are the values you want to pass to Paypal? All of it or
"Donor: , Employer: " and amount like I see on the paypal page?
Deepak Thomas comments:
Hi Mark,
I have taken the code from the site you suggested and have uploaded a completely working <strong>sample </strong>here [[LINK href="http://think.dj/datos/claudia.html"]]http://think.dj/datos/claudia.html[[/LINK]]
Please use this code accordingly and it'll work fine :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function UpdateForm (obj1) {
var themessage = "You are required to complete the following fields: ";
if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}
if (obj1.first_name.value=="") {
themessage = themessage + " - First Name";
}
if (obj1.last_name.value=="") {
themessage = themessage + " - Last Name";
}
if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}
if (obj1.city.value=="") {
themessage = themessage + " - City";
}
if (obj1.state.value=="") {
themessage = themessage + " - State";
}
if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}
if (obj1.company.value=="") {
themessage = themessage + " - Employer";
}
if (obj1.occupation.value=="") {
themessage = themessage + " - Ocupation";
}
if (obj1.email.value=="") {
themessage = themessage + " - Email";
}
if (obj1.phone1.value=="") {
themessage = themessage + " - Phone";
}
if (obj1.contributor.value=="") {
themessage = themessage + " - Contributor Type";
}
if (obj1.check1.checked == false) {
themessage = themessage + " - Confirm Checkbox.";
}
if (obj1.amount.value>360) {
themessage = themessage + " Amount must be lesser than $360";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
obj1.submit();
}
else {
alert(themessage);
return false;
}
obj1.item_name.value = "Donation for: " + obj1.item_name.value ;
obj1.os0.value = obj1.first_name.value + " " + obj1.last_name.value +" - Address: " + obj1.address1.value + " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value + " " + obj1.zip.value; // + obj1.myopt4.value + ...
obj1.os1.value = obj1.company.value + " Occupation: " + obj1.occupation.value + " Contributor:" + obj1.contributor.value + " Email:" + obj1.email.value + " Phone (" + obj1.phonetype.value + ") :" + obj1.phone1.value;
}
</script>
<h2>Donate Online</h2>
<form method="post" name="donationform" id="donationform" action="https://www.paypal.com/cgi-bin/webscr" onSubmit="this.target='paypal'; return UpdateForm(this);">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="cmd" value="_xclick">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="149">Contribution Amount:</td>
<td width="451"><input name="amount" type="text" id="amount" size="10"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input name="first_name" type="text" id="first_name" size="40" value="" ></td>
</tr>
<tr>
<td>Last Name :</td><td><input name="last_name" type="text" id="last_name" size="40" value="" ></td></tr>
<tr>
<td>Address 1 :</td><td><input name="address1" type="text" id="address1" size="40" value="" ></td></tr>
<tr>
<td>Address 2 :</td><td><input name="address2" type="text" id="address2" size="40"></td></tr>
<tr>
<td>City:</td><td><input name="city" type="text" size="40" id="city" value="" ></td></tr>
<tr>
<td>State:</td><td><input name="state" type="text" size="40" id="state" value="" ></td></tr>
<tr>
<td>Zip:</td><td><input name="zip" type="text" size="40" id="zip" value="" ></td></tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td colspan=2> California Law requires political committees to report the name, mailing address, occupation and name of employer for each individual.</td></tr>
<tr>
<td>Contributor :</td>
<td><select name="contributor"><option value="Individual">Individual</option><option value="PAC">PAC</option></select></td>
</tr>
<tr>
<td>Employer:</td><td><input name="company" type="text" id="company" size="40" value="" ></td></tr>
<tr>
<td>Occupation:</td><td><input name="occupation" type="text" id="occupation" size="40" value="" >(enter "none" if not employed)</td></tr>
<tr>
<td>Email:</td><td><input name="email" type="text" id="email" size="40" value="" >
<label></label></td></tr>
<tr>
<td>Phone:</td><td><input name="phone1" type="text" id="phone1" size="13" maxlength="13" value="">
<select name="phonetype"><option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Mobile">Mobile</option>
</select>
</td></tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td colspan=2><label><input type="checkbox" name="check1" id="check1"> I confirm the following statements are true
<ul>
<li>I am a citizen or permanent resident in the United States.</li>
<li>I affirm that I am making this contribution via personal/corporate credit or debit card for which I have a legal obligation to pay.</li>
</ul></td>
</tr>
</table>
<input name="item_name" type="hidden" value="Claudia for City Council 2010" />
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="on0" value="Donor">
<input type="hidden" name="os0" value="">
<input type="hidden" name="bn" value="PP-DonationsBF">
<input type="hidden" name="on1" value="Employer">
<input type="hidden" name="os1" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<br />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Deepak Thomas comments:
It didnt work previously as this line :
<form id="donationform" action="https://www.paypal.com/cgi-bin/webscr" method="post">
Should have been :
<form method="post" name="donationform" id="donationform" action="https://www.paypal.com/cgi-bin/webscr" onSubmit="this.target='paypal'; return UpdateForm(this);">