Skip to content

Instantly share code, notes, and snippets.

@danielbrinneman

danielbrinneman/index.html

Last active October 30, 2017 22:26
Show Gist options
  • Save danielbrinneman/abf54b4834fe25c1c2f4deed839bca27 to your computer and use it in GitHub Desktop.
Save danielbrinneman/abf54b4834fe25c1c2f4deed839bca27 to your computer and use it in GitHub Desktop.
Download ZIP
PayPal Form and jQuery
Raw
index.html
/*
** Please credit me when using this jQuery code -
** jQuery code from scratch by Daniel Brinneman - Copyright Aug 11-15, 2012 - www.lionsdendesigns.com
*/
<!DOCTYPE html />
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="UTF-8" />
</head>
<body>
<base target="_blank" />
<center><img src="http://www.greatamericanthings.net/wp-content/uploads/2012/08/GAT-Tshirt8-JP-Sidebar-BuyNowPayPal-e1344350646366.jpg" alt="Great American Things T-shirt - Buy It Now" width="271" height="396" /></center>
<br />
<p>Show everyone that you're a Great American Thing with one our colorful new t-shirts. You won't find better quality than our heavyweight 100% preshrunk cotton t-shirts. Available in M, L, XL, XXL only. And of course, they're made in the U.S.A. Shipping to continental USA only.</p>
<center>
<p>$15.95 ea. + $6.95 shipping</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="[email protected]">
<input type="hidden" name="currency_code" value="US">
<div id="allItems">
<div id="item1" class="item">
<fieldset style="border:0;">
<table width="280">
<!-- Product -->
<tr>
<td>
<input type="hidden" name="item_name_1" value="GAT T-shirt">
<input type="hidden" name="amount_1" value="15.95">
<label for="on0_1">T-shirt Size: </label><input type="hidden" name="on0_1" value="Size"></td><td><select name="os0_1">
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select> </td></tr>
<tr><td><label for="quantity_1">Quantity: </label></td><td><input type="text" name="quantity_1" value="1" size="2">
</td>
</tr>
</table>
</fieldset>
</div><!-- eof class item -->
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div><!-- eof id all-items -->
<br />
<input type="hidden" name="shipping_1" value="6.95">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit">
</form>
</center>
<!-- Text to place in widget
NEW! Great American Things T-shirts!
<iframe frameborder="0" src="http://www.greatamericanthings.net/wp-content/themes/aggregate-child/PayPal-Tshirt-Widget-Insert-SAVE.html" scrolling="no" height="1000px" /></iframe>
-->
<script id="jsbin-javascript">
//Code copyright August 2012, Daniel Brinneman - www.lionsdendesigns.com
$(document).ready(function(){
var template = $('#allItems .item:first').clone(),
itemsCount = 1; // Sets first at 1 and prevents it's removal when removeItem is clicked
var newName = $('#allItems .item input').attr('name').replace(/_1(\.[^.]+)?$/, '_'); //Removes _1 at end of each and replaces with _ at end of each
var addItem = function(){
//begin .item limit
var limit = 3;
if($('.item').length < limit) {
//end top portion of .item limit, continue on addItem function
itemsCount++;
var item = template.clone().find('input').each(function(){
//Update those that are children within the same td
$(this).prev('input').attr('name', newName + itemsCount); // update name for item_name_ (assume prev sib is label)
$(this).next('input').attr('name', 'amount_' + itemsCount); // update name for amount_
$(this).prev('label').attr('for', 'on0_' + itemsCount); // update label for (assume prev sib is label)
$(this).next('label').next().attr('name', 'on0_' + itemsCount); // update name for on0_
$(this).parent('td').siblings().find('select').attr('name', 'os0_' + itemsCount); // Update each select for os0_ siblings of tr: td, td, td (these are siblings) - don't remove, took two days to figure out
$(this).parent('td').parent('tr:nth-child(2)').find('label').attr('for', 'quantity_' + itemsCount); // Update second label that is quantity and in same tr family update the name for input below
$(this).parent('td').parent('tr:nth-child(2)').find('input').attr('name', 'quantity_' + itemsCount); // In same tr family update the name for input (from above)
}).end() // back to .item
.attr('id', 'item' + itemsCount) // update item id
.prependTo('#allItems'); // add to container
} // wraps if limit statement
};
var removeItem = function(){
$('#allItems .item:last').prev().remove();
};
$('.add').click(addItem); // attach event
$('.remove').click(removeItem); // remove event
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">//Code copyright August 2012, Daniel Brinneman - www.lionsdendesigns.com
$(document).ready(function(){
var template = $('#allItems .item:first').clone(),
itemsCount = 1; // Sets first at 1 and prevents it's removal when removeItem is clicked
var newName = $('#allItems .item input').attr('name').replace(/_1(\.[^.]+)?$/, '_'); //Removes _1 at end of each and replaces with _ at end of each
var addItem = function(){
//begin .item limit
var limit = 3;
if($('.item').length < limit) {
//end top portion of .item limit, continue on addItem function
itemsCount++;
var item = template.clone().find('input').each(function(){
//Update those that are children within the same td
$(this).prev('input').attr('name', newName + itemsCount); // update name for item_name_ (assume prev sib is label)
$(this).next('input').attr('name', 'amount_' + itemsCount); // update name for amount_
$(this).prev('label').attr('for', 'on0_' + itemsCount); // update label for (assume prev sib is label)
$(this).next('label').next().attr('name', 'on0_' + itemsCount); // update name for on0_
$(this).parent('td').siblings().find('select').attr('name', 'os0_' + itemsCount); // Update each select for os0_ siblings of tr: td, td, td (these are siblings) - don't remove, took two days to figure out
$(this).parent('td').parent('tr:nth-child(2)').find('label').attr('for', 'quantity_' + itemsCount); // Update second label that is quantity and in same tr family update the name for input below
$(this).parent('td').parent('tr:nth-child(2)').find('input').attr('name', 'quantity_' + itemsCount); // In same tr family update the name for input (from above)
}).end() // back to .item
.attr('id', 'item' + itemsCount) // update item id
.prependTo('#allItems'); // add to container
} // wraps if limit statement
};
var removeItem = function(){
$('#allItems .item:last').prev().remove();
};
$('.add').click(addItem); // attach event
$('.remove').click(removeItem); // remove event
});
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment