Last active
October 30, 2017 22:26
-
-
Save danielbrinneman/abf54b4834fe25c1c2f4deed839bca27 to your computer and use it in GitHub Desktop.
PayPal Form and jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
** 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