Paypal Quantity Javascript form

Hello, i have the following service: http://www.seoadsem.com/full-SEO-report-for-your-website-test.html, and i successfully added a javascript with “more fields”. Now the main problems are:

  1. When the user clicks “more fields” and completes them, i need the quantity of the item to increment and when i hit submit to echo that quantity automatically in the paypal shopping cart.
  2. When the user clicks “remove fields” i need the quantity of the item to decrease and when i hit submit to echo that quantity automatically in the paypal shopping cart.
  3. If the user clicks more than 2 times, let’s say for 3 website to submit, starting from the 3rd website the input fields os3 and os4 don’t work anymore and doesn’t transfer the info anymore to the shopping cart. I think those fields should be incremented automatically.
    Here is my current code:
    Javascript:

	       var newFields = document.getElementById("readroot").cloneNode(false);
	       this.parentNode.parentNode.removeChild(this.parentNode);
               var counter = 0;
               var q1 = 1;
            function moreFields() {
               counter++;   
		var newFields = document.getElementById("readroot").cloneNode(true);
 		newFields.id = '';
                newFields.style.display = 'block';
                var newField = newFields.childNodes;
                for (var i=0;i<newField.length;i++) {
                    var theName = newField[i].name;
                    if (theName)
                        newField[i].name = theName + counter;
                }
                var insertHere = document.getElementById("writeroot");
                insertHere.parentNode.insertBefore(newFields,insertHere);
		q1++;
            }

I tried to add variable q1 for quantity and to increment when the user clicks on the “more websites” with “q1++” but don’t know exactly how to echo this, i know that there need to be an input filed like
<input type=“hidden” name=“quantity” value=“quantityHEREincrements”>
HTML

<form target=“paypal” name=“myPayPal” action=“https://www.paypal.com/cgi-bin/webscr” onsubmit=“return validateForm()” method=“post” id=“payPalForm”>
<input type=“hidden” name=“cmd” value=“_s-xclick”>
<input type=“hidden” name=“hosted_button_id” value=“CYNC62RKYPQGU”>
<table>
<tr><td><input type=“hidden” name=“on0” value=“Keywords” class=“special”>Keywords: </td></tr><tr><td><input type=“text” name=“os0” maxlength=“200” class=“special”>ex: seo services</td></tr>
<tr><td><input type=“hidden” name=“on1” value=“Website” class=“special”>Website: </td></tr><tr><td><input type=“text” name=“os1” maxlength=“200” class=“special”>ex: seoadsem.com</td></tr>
</table>
<div id=“readroot” style=“display: none”>
<input type=“button” value=“Remove” onclick=“this.parentNode.parentNode.removeChild(this.parentNode);” /><br /><br />
<table>
<tr><td><input type=“hidden” name=“on3” value=“Keywords” class=“special”>Keywords: </td></tr><tr><td><input type=“text” name=“os3” maxlength=“200” class=“special”>ex: seo services</td></tr>
<tr><td><input type=“hidden” name=“on4” value=“Website” class=“special”>Website: </td></tr><tr><td><input type=“text” name=“os4” maxlength=“200” class=“special”>ex: seoadsem.com</td></tr>
</table>
</div>
<span id=“writeroot”></span>
<input type=“button” onclick=“moreFields()” value=“More Websites” />
<div class=“tos”>
<input type=“hidden” name=“on2” value=“Accepted Terms of service”>Do you accept the <a href=“http://www.seoadsem.com/terms-of-service.html” rel=“nofollow” target=“_blank”>terms of service</a>.
<select name=“os2”>
<option value=“0”>No</option>
<option value=“Yes”>Yes</option>
</select>
</div>
<input type=“image” src=“http://www.seoadsem.com/img/addtocart.png” name=“submit” alt=“PayPal - The safer, easier way to pay online!” class=“paypalspecial”>
<img alt=“paypal” src=“https://www.paypalobjects.com/en_US/i/scr/pixel.gif” width=“1” height=“1”>
</form>

Hi there,

I don’t mind trying to help you debug this, but please understand that I won’t just write your script for you.

That said, let’s tackle point 1 first.
Could you please make a test page where you strip your page down to just the form, removing all unnecessary HTML, JavaScript and styling.
Then post the link to the test page here.

First of all thank you for helping me. No worries, just need some guidance. Will try to search as much as possible google.
Removed any unnecessary html. Here is the test page: http://www.seoadsem.com/full-SEO-report-for-your-website-test.html

Hi,

I was meaning a page with just the form, i.e. no sidebar, no header, no footer etc. :slight_smile:
Would that be possible?

Is it ok now?

Spot on!
I’ll have a look in a little while and get back to you soon.

Thanks again for your time.

Hi there,

So, I had a look at it and it appears that currently you are submitting the aggregate cart amount to PayPal, as you can see in the attached screenshot.
In other words, even if you fill out the details for two websites, they appear as one item.

What you need to do is submit multiple items to the cart in one go, in such a way as these items appear as separate positions in the cart.

I did a bit of Googling and it seems that you can do this by following the instructions listed here: https://www.paypal.com/cgi-bin/webscr?cmd=_pdn_howto_checkout_outside#methodtwo

I don’t think I can test this on my PC, as (I presume) PayPal validates that the orders sent to your cart have come from your domain.

So, could you forget about adding dynamic fields for the moment and set up your form (as described in the link above) to accept an order for two websites (so, 4 fields in total).
Then see if you can submit that and have the cart display two individual items after submission.

Let me know how you get on.

Ref: http://stackoverflow.com/questions/14890412/purchasing-more-than-one-item-via-add-to-cart-paypal

Ok, thanks for the guidance, will try it.
Is there anyone that can help me convert the javascript to php? Can’t find a javascript to php converter online.

Hi,

I think we’re getting our wires crossed.
Why do you need to convert JS to PHP?

Tried with:

<form target=“paypal” name=“myPayPal” action=“https://www.paypal.com/cgi-bin/webscr” onsubmit=“return validateForm()” method=“post” id=“payPalForm”>
<input type=“hidden” name=“cmd” value=“_cart”/>
<input type=“hidden” name=“upload” value=“1”/>
<input type=“hidden” name=“item_name_1” value=“Item Name 1”/>
<input type=“hidden” name=“business” value="info@seoadsem.com"/>
<input type=“hidden” name=“currency_code” value=“USD”/>
<input type=“hidden” name=“amount_1” value=“3.95”/>
<input type=“hidden” name=“quantity_1” value=“1”/>
<table>
<tr><td><input type=“hidden” name=“on0” value=“Keywords” class=“special”>Keywords: </td></tr><tr><td><input type=“text” name=“os0” maxlength=“200” class=“special”>ex: seo services</td></tr>
<tr><td><input type=“hidden” name=“on1” value=“Website” class=“special”>Website: </td></tr><tr><td><input type=“text” name=“os1” maxlength=“200” class=“special”>ex: seoadsem.com</td></tr>
</table>
<div id=“readroot” style=“display: none”>
<input type=“button” value=“Remove” onclick=“this.parentNode.parentNode.removeChild(this.parentNode);” /><br /><br />
<input type=“hidden” name=“item_name_1” value=“Item Name 1”/>
<input type=“hidden” name=“currency_code” value=“USD”/>
<input type=“hidden” name=“amount_1” value=“3.95”/>
<input type=“hidden” name=“quantity_1” value=“1”/>
<table>
<tr><td><input type=“hidden” name=“on3” value=“Keywords” class=“special”>Keywords: </td></tr><tr><td><input type=“text” name=“os3” maxlength=“200” class=“special”>ex: seo services</td></tr>
<tr><td><input type=“hidden” name=“on4” value=“Website” class=“special”>Website: </td></tr><tr><td><input type=“text” name=“os4” maxlength=“200” class=“special”>ex: seoadsem.com</td></tr>
</table>
</div>
<span id=“writeroot”></span>
<input type=“button” onclick=“moreFields()” value=“More Websites” />
<div class=“tos”>
<input type=“hidden” name=“on2” value=“Accepted Terms of service”>Do you accept the <a href=“http://www.seoadsem.com/terms-of-service.html” rel=“nofollow” target=“_blank”>terms of service</a>.
<select name=“os2”>
<option value=“0”>No</option>
<option value=“Yes”>Yes</option>
</select>
</div>
<input type=“image” src=“http://www.seoadsem.com/img/addtocart.png” name=“submit” alt=“PayPal - The safer, easier way to pay online!” class=“paypalspecial”>
<img alt=“paypal” src=“https://www.paypalobjects.com/en_US/i/scr/pixel.gif” width=“1” height=“1”>
</form>

And doesn’t work as expected.
Forgot to mention i am a noob. :slight_smile:

Do you have a link?

http://www.seoadsem.com/full-SEO-report-for-your-website-test.html same one.

Oops, sorry, I should really learn to refresh my browser.

Anyway, this is great!
We now know how to submit items individually :slight_smile:

Try this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Paypal Test</title>
  </head>
  <body>
    <form target="paypal" name="myPayPal" action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return validateForm()" method="post" id="payPalForm">
      <input type="hidden" name="cmd" value="_cart"/>
      <input type="hidden" name="upload" value="1"/>
      <input type="hidden" name="business" value="info@seoadsem.com"/>
      <input type="hidden" name="currency_code" value="USD"/>
      
      <input type="hidden" name="item_name_1" value="Keywords"/>
      <input type="hidden" name="amount_1" value="3.95"/>  
      <input type="hidden" name="quantity_1" value="1"/>
      
      <input type="hidden" name="item_name_2" value="More Keywords"/>
      <input type="hidden" name="amount_2" value="3.95"/>
      <input type="hidden" name="quantity_2" value="1"/>
      
      <p><strong>Item 1</strong></p>
      <p>
        <input type="hidden" name="on0" value="Keywords" class="special">Keywords: 
        <input type="text" name="os0" maxlength="200" class="special">
      </p>
      <p>
        <input type="hidden" name="on1" value="Website" class="special">Website: 
        <input type="text" name="os1" maxlength="200" class="special">
      </p>
      
      <p><strong>Item 2</strong></p>
      <p>
        <input type="hidden" name="on2" value="Keywords" class="special">Keywords: 
        <input type="text" name="os2" maxlength="200" class="special">
      </p>
      <p>
        <input type="hidden" name="on3" value="Website" class="special">Website: 
        <input type="text" name="os3" maxlength="200" class="special">
      </p>
      <input type="image" src="http://www.seoadsem.com/img/addtocart.png" name="submit" alt="PayPal - The safer, easier way to pay online!" class="paypalspecial">
      <img alt="paypal" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
    </form> 
  </body>
</html>

When you submit the form, you should now see two items in your cart: “Keywords” and “More keywords”.
Don’t worry about the JS right now, please just confirm that this works for you.