Paypal Form Creator
HTML
<div id="cp-container">
<div class="field">
<select name="cmd-type">
<option disabled selected>Please Select a form type...</option>
<option value="_xclick">Buy Now</option>
<option value="_cart">Cart</option>
<option value="_oe-gift-certificate">Gift Certificate</option>
<option value="_xclick-subscriptions">Subscribe</option>
<option value="_xclick-auto-billing">Automatic Billing</option>
<option value="_xclick-payment-plan">Payment Plan</option>
<option value="_donations">Donate</option>
<option value="_s-xclick">Encrypted</option>
</select>
</div>
<div class="field">
<label>Paypal Email</label>
<input type="text" name="email" />
</div>
<div class="field">
<label>Label</label>
<input type="text" name="label" />
</div>
<div class="field">
<label>Name</label>
<input type="text" name="name" />
</div>
<div class="field">
<label>Value</label>
<input type="text" name="value" />
</div>
<div class="field">
<label>Input Type</label>
<select name="input-type">
<option value="text">Text</option>
<option value="number">Number</option>
<option value="radio">Radio</option>
<option value="checkbox">Checkbox</option>
<option value="hidden">Hidden</option>
<option value="submit">Submit</option>
</select>
<button name="add-element">Add Element</button>
</div>
</div>
<div class="container">
<h3>Results</h3>
<div id="form-results">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" ></form>
</div>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#cp-container {
background: #e5e5e5;
padding: 10px;
border-bottom: solid 1px #ababab;
}
#form-results {
padding: 10px;
border: solid 1px #ababab;
}
.container {
margin: 10px;
}
.field {
margin: 5px 0px;
}
.container h3 {
margin: 0px;
background-color: #e5e5e5;
border: solid 1px #ababab;
border-bottom: none;
padding: 5px 10px;
}
JavaScript
$('button[name="add-element"]').click(function(){
var element = $('select[name="input-type"]').val();
var label = $('input[name="label"]').val();
var name = $('input[name="name"]').val();
var vals = $('input[name="value"]').val();
$('#form-results form').append('<div class="field"><label>' + label + '</label><input name="' + name + '" type="' + element + '" value="' + vals + '" /></div>');
});
$('select[name="cmd-type"]').change(function(){
var el = $(this).val();
$('#form-results form').append('<input type="hidden" name="cmd" value="' + el + '" />');
});
$('input[name="email"]').change(function(){
var email = $(this).val();
$('#form-results form').append('<input type="hidden" name="business" value="' + email + '" />');
});