Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Wordpress Paypal Javascript WordPress

  • SOLVED

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>

Answers (4)

2010-08-08

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!

2010-08-08

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.

2010-08-08

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.

2010-08-08

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>&nbsp;</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 &quot;none&quot; 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>&nbsp;</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);">