logo

$75
Wordpress Paypal Javascript

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="claudia@stopwastingtaxdollars.org" /> <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>

Mark Perryman | 08/08/10 at 2:40pm | Edit


(4) Possible Answers Submitted...

  • avatar
    Last edited:
    08/08/10
    2:46pm
    Utkarsh Kukreti says:

    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>

    Previous versions of this answer: 08/08/10 at 2:46pm

    • 08/08/10 2:52pm

      Mark Perryman says:

      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.

    • 08/08/10 2:58pm

      Utkarsh Kukreti says:

      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="claudia@stopwastingtaxdollars.org" /> <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>

    • 08/08/10 3:05pm

      Mark Perryman says:

      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

    • 08/08/10 3:08pm

      Utkarsh Kukreti says:

      The script you inserted came up with <p> tags. You should add that in html mode :)

    • 08/08/10 3:49pm

      Utkarsh Kukreti says:

      Looks like it works fine now.

  • avatar
    Last edited:
    08/08/10
    2:45pm
    Chris Lee says:

    I would recommend using the jQuery Library as well as the validation plugin. I could set this up and finish the form for you.

  • avatar
    Last edited:
    08/08/10
    4:24pm
    Rashad Aliyev says:

    That's about your plugin conflict.

    • 08/08/10 2:48pm

      Rashad Aliyev says:

      I think your Comment-Reply plugin bug. Disable it and try again.

    • 08/08/10 2:54pm

      Mark Perryman says:

      Comment-Reply is disabled and still didn't work. Thanks though.

    • 08/08/10 3:03pm

      Rashad Aliyev says:

      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 JQuery 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!

  • avatar
    Last edited:
    08/08/10
    2:52pm
    Deepak Thomas says:

    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>

    • 08/08/10 2:58pm

      Mark Perryman says:

      I tried the code, and unfortunately it doesn't input the form data into the paypal form correctly. Thanks though.

    • 08/08/10 3:16pm

      Deepak Thomas says:

      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?

    • 08/08/10 3:59pm

      Deepak Thomas says:

      Hi Mark,
      I have taken the code from the site you suggested and have uploaded a completely working sample here http://think.dj/datos/claudia.html

      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="claudia@stopwastingtaxdollars.org">
      <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>


    • 08/08/10 4:05pm

      Deepak Thomas says:

      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);">

This question has expired.





Current status of this question: Completed