Javascript Form Help!

**ghostschooluk** · 07-24-2008, 02:55 PM

I'd like to first apologise for my lack of Javascript know how! I've been trying to make the below code work all day and it's not doing anything. I'd like to additionally point out that it's for charity, so I'm not going to be making any money from the code, so any help would be greatly appreciated!

It's basically a form to take t-shirt orders from a website and submit them to PayPal. We need it to allow users to select a quantity from a selection of sizes and then submit it. Unfortunately, PayPal doesn't allow a submission of a Null or a zero quantity so I was trying to make a Javascript code to include the needed lines of code when you click to submit, dependant on whether the user had selected more than '0' for each field.

In addition to this problem, you must have incrementally numbered items starting at 1 (thus the 'tshirt +=1').

It's not even getting off the ground though and I've been working on it all day. Please see all the code below. Thanks in advance!

Code:

<html>
<head>
<script language="javascript">
<!--
tshirts = 1;
amnt = 0;
function addItems() {
if (SPAGGOI.q1.value != 0 ) {
amnt = 1
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (Small)'>
<input type='hidden' name='amount_" + tshirts + "' value='10.00'>
<input type='hidden' name='quantity_" + tshirts + "' value='"+ amnt +"'>";
tshirts += 1;
}
if (SPAGGOI.q2.value != 0 ) {
amnt = SPAGGOI.q2.value;
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (Medium)'>
<input type='hidden' name='amount_" + tshirts + "' value='10.00'>
<input type='hidden' name='quantity_" + tshirts + "' value='"+ amnt +"'>";
tshirts += 1;
}
if (SPAGGOI.q3.value != 0 ) {
amnt = SPAGGOI.q3.value;
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (Large)'>
<input type='hidden' name='amount_" + tshirts + "' value='10.00'>
<input type='hidden' name='quantity_" + tshirts + "' value='"+ amnt +"'>";
tshirts += 1;
}
if (SPAGGOI.q4.value != 0 ) {
amnt = SPAGGOI.q4.value;
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (XL)'>
<input type='hidden' name='amount_" + tshirts + "' value='10.00'>
<input type='hidden' name='quantity_" + tshirts + "' value='"+ amnt +"'>";
tshirts += 1;
}
if (SPAGGOI.q5.value != 0 ) {
amnt = SPAGGOI.q5.value;
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (XXL)'>
<input type='hidden' name='amount_" + tshirts + "' value='10.00'>
<input type='hidden' name='quantity_" + tshirts + "' value='"+ amnt +"'>";
tshirts += 1;
}
if (SPAGGOI.q6.value != 0 ) {
amnt = SPAGGOI.q6.value;
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (Womens Medium)'>
<input type='hidden' name='amount_" + tshirts + "' value='10.00'>
<input type='hidden' name='quantity_" + tshirts + "' value='"+ amnt +"'>";
tshirts += 1;
}
if (SPAGGOI.q7.value != 0 ) {
amnt = SPAGGOI.q7.value;
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (Womens Small)'>
<input type='hidden' name='amount_" + tshirts + "' value='10.00'>
<input type='hidden' name='quantity_" + tshirts + "' value='"+ amnt +"'>";
tshirts += 1;
}

document.SPAGGOI.submit();

}
//-->
</script>
</head>

<body>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name"SPAGGOI">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="FAKE@FAKE.COM">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="shipping" value="2.50">
<input type="hidden" name="shipping2" value="0.00">

<table width="270" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="139">Standard Small </td>
    <td width="62"></td>
    <td width="69">

      <div align="right">
        <select name="q1">
          <option value="0" selected="selected"> </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div> </td>
  </tr>
  <tr>
    <td>Standard Medium </td>
    <td></td>
    <td><div align="right">
      <select name="q2">
        <option value="0" selected="selected"></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard Large </td>
    <td></td>
    <td><div align="right">
      <select name="q3">
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard X-Large </td>
    <td></td>
    <td><div align="right">
      <select name="q4">
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard XX-Large </td>
    <td></td>
    <td><div align="right">
      <select name="q5">
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Women's Fit Medium </td>
    <td></td>
    <td><div align="right">
      <select name="q6">
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Women's Fit Small </td>
    <td></td>
    <td><div align="right">
      <select name="q7">
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div id="SomePeople">  <br />
</div></td>
    <td>&nbsp;</td>
    <td><div align="right">
      <a href="javascript:addItems()"><img src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" alt="Make payments with PayPal - it's fast, free and secure!" border="0" /></a>
      </div></td>
  </tr>
</table>
</form>
</body>
</html>

**Jesdisciple** · 07-24-2008, 04:40 PM

Pay attention to all errors and solve them incrementally - i.e., don't bother with #2 until you've solved #1 (unless they seem to point at the same problem). And if you don't get any errors or can't understand the errors you get from one browser (especially IE), try another browser. Here's the first error from Firefox:

Error: unterminated string literal
Source File: http://localhost/chris/projects/PayPal/
Line: 9, Column: 106
Source Code:
document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (Small)'>

Strings can't span lines, and this error is complaining that you tried to include a newline inside a string. To do that, you need to use the control character '\n' (although PHP provides a better alternative if you use PHP). For example, the above line would change to the following and the next line would begin a new segment of the string (the way I do it):

Code:

document.getElementById('SomePeople').innerHTML += "<input type='hidden' name='item_name_" + tshirts + "' value='SPAGGOI T-shirt(s) (Small)'>\n" +

**jscheuer1** · 07-24-2008, 04:41 PM

This seems about right:

Code:

<html>
<head>
<script type="text/javascript">
<!--
function addItems() {

var amnt = 0;
var s = document.forms['SPAGGOI'].getElementsByTagName('select');
var t = document.getElementById('SomePeople');
var r;
var item_names = ['Small', 'Medium', 'Large', 'XL', 'XXL', 'Womens Medium', 'Womens Small']
while (t.firstChild)
r = t.removeChild(t.firstChild);
r = null;
for(var i1, i2, i3, i = 0; i < s.length; ++i)
if (s[i].value != 0 ){
i1 = document.createElement('input');
i1.type = 'hidden';
i1.name = 'item_name_' + i;
i1.value = 'SPAGGOI T-shirt(s) (' + item_names[i] + ')';
i2 = document.createElement('input');
i2.type = 'hidden';
i2.name = 'amount_' + i;
i2.value = '10.00';
i3 = document.createElement('input');
i3.type = 'hidden';
i3.name = 'quantity_' + i;
i3.value = s[i].value;
t.appendChild(document.createTextNode('\n'));
t.appendChild(i1);
t.appendChild(document.createTextNode('\n'));
t.appendChild(i2);
t.appendChild(document.createTextNode('\n'));
t.appendChild(i3);
};
};
//-->
</script>
</head>

<body>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="SPAGGOI" onsubmit="addItems();return true;">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="FAKE@FAKE.COM">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="shipping" value="2.50">
<input type="hidden" name="shipping2" value="0.00">

<table width="270" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="139">Standard Small </td>
    <td width="62"></td>
    <td width="69">

      <div align="right">
        <select>
          <option value="0" selected="selected"> </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div> </td>
  </tr>
  <tr>
    <td>Standard Medium </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard Large </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard X-Large </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard XX-Large </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Women's Fit Medium </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Women's Fit Small </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div id="SomePeople">  <br />
</div></td>
    <td>&nbsp;</td>
    <td><div align="right">
      <a href="javascript:addItems();" onclick="document.forms['SPAGGOI'].submit();return false;"><img src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" alt="Make payments with PayPal - it's fast, free and secure!" border="0" /></a>
      </div></td>
  </tr>
</table>
</form>
</body>
</html>

Notes:

You will of course need to test this out.
This will only work for javascript enabled browsers. You should prevent non-javascript enabled browsers from seeing the form at all, and provide a fall back for them.
An ordinary submit button may be used instead of the link.
The output to the SomePeople division will be like:

Code:

<div id="SomePeople">
<input value="SPAGGOI T-shirt(s) (Small)" name="item_name_0" type="hidden">
<input value="10.00" name="amount_0" type="hidden">
<input value="1" name="quantity_0" type="hidden">
<input value="SPAGGOI T-shirt(s) (Large)" name="item_name_2" type="hidden">
<input value="10.00" name="amount_2" type="hidden">
<input value="3" name="quantity_2" type="hidden"></div>

Notice in particular the use of amount_0 (and similar, for item_name_x, quantity_x - item_name_2 is actually the third item), if this is not acceptable, like if it needs to start with amount_1, that can be easily tweaked.

**ghostschooluk** · 07-24-2008, 06:49 PM

Thanks jscheuer1!

This looks amazing but for some reason, it's not sending anything to PayPal. If you try it, (even with the FAKE@FAKE.COM which should work fine for testing), then it says the shopping cart is empty.

It does need to start with '1' rather than '0' and it needs to increase incrementally so 1,2,3,4,5 so this might be why.

I would try tweaking your code but it's way out of my depth and I wouldn't know where to start. I really appreciate your help with this!

**jscheuer1** · 07-24-2008, 08:52 PM

Two main problems. I had moved the execution of the function to the form's onsubmit event. I didn't realize it but that requires that the form be submitted using a form element, so I've now changed the link to an image button (what PayPal generally uses in its templates anyway). Then I discovered that the use of the various:

amount_x
item_name_x
quantity_x

for name values, needs to be sequential regardless of whether or not some of the items aren't ordered at all. I also fixed it so that the numbering of those names will begin at 1, not 0. Here is the result, which seems to work for the FAKE@FAKE.COM address:

Code:

<html>
<head>
<script type="text/javascript">
<!--
function addItems() {

var s = document.forms['SPAGGOI'].getElementsByTagName('select');
var t = document.getElementById('SomePeople');
var r;
var item_names = ['Small', 'Medium', 'Large', 'XL', 'XXL', 'Womens Medium', 'Womens Small']
while (t.firstChild)
r = t.removeChild(t.firstChild);
r = null;
for(var i1, i2, i3, c = 0, i = 0; i < s.length; ++i)
if (s[i].value != 0 ){
i1 = document.createElement('input');
i1.type = 'hidden';
i1.name = 'item_name_' + (++c);
i1.value = 'SPAGGOI T-shirt(s) (' + item_names[i] + ')';
i2 = document.createElement('input');
i2.type = 'hidden';
i2.name = 'amount_' + c;
i2.value = '10.00';
i3 = document.createElement('input');
i3.type = 'hidden';
i3.name = 'quantity_' + c;
i3.value = s[i].value;
t.appendChild(document.createTextNode('\n'));
t.appendChild(i1);
t.appendChild(document.createTextNode('\n'));
t.appendChild(i2);
t.appendChild(document.createTextNode('\n'));
t.appendChild(i3);
};
};
//-->
</script>
</head>

<body>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="SPAGGOI" onsubmit="addItems();return true;">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="FAKE@FAKE.COM">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="shipping" value="2.50">
<input type="hidden" name="shipping2" value="0.00">

<table width="270" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="139">Standard Small </td>
    <td width="62"></td>
    <td width="69">

      <div align="right">
        <select>
          <option value="0" selected="selected"> </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div> </td>
  </tr>
  <tr>
    <td>Standard Medium </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard Large </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard X-Large </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Standard XX-Large </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Women's Fit Medium </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td>Women's Fit Small </td>
    <td></td>
    <td><div align="right">
      <select>
        <option value="0" selected="selected"> </option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div></td>
  </tr>
  <tr>
    <td><div id="SomePeople">  <br />
</div></td>
    <td>&nbsp;</td>
    <td><div align="right"><br>
      <input type="image" value="submit" src="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" alt="Make payments with PayPal - it's fast, free and secure!">
      </div></td>
  </tr>
</table>
</form>
</body>
</html>

**ghostschooluk** · 07-25-2008, 11:18 AM

Thank you so much!! That's perfect! You've literally been a godsend!

Thread: Javascript Form Help!

Thread Tools

Search Thread

Javascript Form Help!

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions