jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
518 lines (507 loc) • 23.3 kB
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<style type="text/css">
.demo-iframe {
border: none;
width: 600px;
height: 400px;
clear: both;
display: none;
}
.text-input
{
height: 24px;
}
h3
{
display: inline-block;
margin: 0px;
}
.form-label
{
vertical-align: baseline;
font-weight: bold;
font-size: 13px;
margin-top: 10px;
margin-bottom: 10px;
}
.form-small-label
{
vertical-align: baseline;
font-size: 12px;
margin-left: 1px;
}
.required
{
vertical-align: baseline;
color: red;
font-size: 10px;
}
</style>
</head>
<body style='overflow: hidden;'>
<script type="text/javascript">
$(document).ready(function () {
$('#sendButton').jqxButton({ width: 70});
$('.text-input').addClass('jqx-input');
$('.text-input').addClass('jqx-rc-all');
if (theme.length > 0) {
$('.text-input').addClass('jqx-input-' + theme);
$('.text-input').addClass('jqx-widget-content-' + theme);
$('.text-input').addClass('jqx-rc-all-' + theme);
};
var countries = [
{ value:"AF", label:"Afghanistan"},
{ value:"AL", label:"Albania"},
{ value:"DZ", label:"Algeria"},
{ value:"AS", label:"American Samoa"},
{ value:"AD", label:"Andorra"},
{ value:"AO", label:"Angola"},
{ value:"AI", label:"Anguilla"},
{ value:"AQ", label:"Antarctica"},
{ value:"AG", label:"Antigua and Barbuda"},
{ value:"AR", label:"Argentina"},
{ value:"AM", label:"Armenia"},
{ value:"AW", label:"Aruba"},
{ value:"AU", label:"Australia"},
{ value:"AT", label:"Austria"},
{ value:"AZ", label:"Azerbaijan"},
{ value:"BS", label:"Bahamas"},
{ value:"BH", label:"Bahrain"},
{ value:"BD", label:"Bangladesh"},
{ value:"BB", label:"Barbados"},
{ value:"BY", label:"Belarus"},
{ value:"BE", label:"Belgium"},
{ value:"BZ", label:"Belize"},
{ value:"BJ", label:"Benin"},
{ value:"BM", label:"Bermuda"},
{ value:"BT", label:"Bhutan"},
{ value:"BO", label:"Bolivia"},
{ value:"BA", label:"Bosnia and Herzegovina"},
{ value:"BW", label:"Botswana"},
{ value:"BV", label:"Bouvet Island"},
{ value:"BR", label:"Brazil"},
{ value:"BN", label:"Brunei"},
{ value:"BG", label:"Bulgaria"},
{ value:"BF", label:"Burkina Faso"},
{ value:"BI", label:"Burundi"},
{ value:"KH", label:"Cambodia"},
{ value:"CM", label:"Cameroon"},
{ value:"CA", label:"Canada"},
{ value:"CV", label:"Cape Verde"},
{ value:"KY", label:"Cayman Islands"},
{ value:"CF", label:"Central African Republic"},
{ value:"TD", label:"Chad"},
{ value:"CL", label:"Chile"},
{ value:"CN", label:"China"},
{ value:"CX", label:"Christmas Island"},
{ value:"CC", label:"Cocos (Keeling) Islands"},
{ value:"CO", label:"Columbia"},
{ value:"KM", label:"Comoros"},
{ value:"CG", label:"Congo"},
{ value:"CK", label:"Cook Islands"},
{ value:"CR", label:"Costa Rica"},
{ value:"CI", label:"Cote D'Ivorie"},
{ value:"HR", label:"Croatia (Hrvatska)"},
{ value:"CU", label:"Cuba"},
{ value:"CY", label:"Cyprus"},
{ value:"CZ", label:"Czech Republic"},
{ value:"DK", label:"Denmark"},
{ value:"DJ", label:"Djibouti"},
{ value:"DM", label:"Dominica"},
{ value:"DO", label:"Dominican Republic"},
{ value:"TP", label:"East Timor"},
{ value:"EC", label:"Ecuador"},
{ value:"EG", label:"Egypt"},
{ value:"SV", label:"El Salvador"},
{ value:"GQ", label:"Equatorial Guinea"},
{ value:"ER", label:"Eritrea"},
{ value:"EE", label:"Estonia"},
{ value:"ET", label:"Ethiopia"},
{ value:"FO", label:"Faroe Islands"},
{ value:"FJ", label:"Fiji"},
{ value:"FI", label:"Finland"},
{ value:"FR", label:"France"},
{ value:"GF", label:"French Guinea"},
{ value:"PF", label:"French Polynesia"},
{ value:"GA", label:"Gabon"},
{ value:"GM", label:"Gambia"},
{ value:"GE", label:"Georgia"},
{ value:"DE", label:"Germany"},
{ value:"GH", label:"Ghana"},
{ value:"GI", label:"Gibraltar"},
{ value:"GR", label:"Greece"},
{ value:"GL", label:"Greenland"},
{ value:"GD", label:"Grenada"},
{ value:"GP", label:"Guadeloupe"},
{ value:"GU", label:"Guam"},
{ value:"GT", label:"Guatemala"},
{ value:"GN", label:"Guinea"},
{ value:"GW", label:"Guinea-Bissau"},
{ value:"GY", label:"Guyana"},
{ value:"HT", label:"Haiti"},
{ value:"HN", label:"Honduras"},
{ value:"HK", label:"Hong Kong"},
{ value:"HU", label:"Hungary"},
{ value:"IS", label:"Iceland"},
{ value:"IN", label:"India"},
{ value:"ID", label:"Indonesia"},
{ value:"IR", label:"Iran"},
{ value:"IQ", label:"Iraq"},
{ value:"IE", label:"Ireland"},
{ value:"IL", label:"Israel"},
{ value:"IT", label:"Italy"},
{ value:"JM", label:"Jamaica"},
{ value:"JP", label:"Japan"},
{ value:"JO", label:"Jordan"},
{ value:"KZ", label:"Kazakhstan"},
{ value:"KE", label:"Kenya"},
{ value:"KI", label:"Kiribati"},
{ value:"KW", label:"Kuwait"},
{ value:"KG", label:"Kyrgyzstan"},
{ value:"LA", label:"Laos"},
{ value:"LV", label:"Latvia"},
{ value:"LB", label:"Lebanon"},
{ value:"LS", label:"Lesotho"},
{ value:"LR", label:"Liberia"},
{ value:"LY", label:"Libya"},
{ value:"LI", label:"Liechtenstein"},
{ value:"LT", label:"Lithuania"},
{ value:"LU", label:"Luxembourg"},
{ value:"MO", label:"Macau"},
{ value:"MK", label:"Macedonia"},
{ value:"MG", label:"Madagascar"},
{ value:"MW", label:"Malawi"},
{ value:"MY", label:"Malaysia"},
{ value:"MV", label:"Maldives"},
{ value:"ML", label:"Mali"},
{ value:"MT", label:"Malta"},
{ value:"MH", label:"Marshall Islands"},
{ value:"MQ", label:"Martinique"},
{ value:"MR", label:"Mauritania"},
{ value:"MU", label:"Mauritius"},
{ value:"YT", label:"Mayotte"},
{ value:"MX", label:"Mexico"},
{ value:"FM", label:"Micronesia"},
{ value:"MD", label:"Moldova"},
{ value:"MC", label:"Monaco"},
{ value:"MN", label:"Mongolia"},
{ value:"MS", label:"Montserrat"},
{ value:"MA", label:"Morocco"},
{ value:"MZ", label:"Mozambique"},
{ value:"MM", label:"Myanmar (Burma)"},
{ value:"NA", label:"Namibia"},
{ value:"NR", label:"Nauru"},
{ value:"NP", label:"Nepal"},
{ value:"NL", label:"Netherlands"},
{ value:"AN", label:"Netherlands Antilles"},
{ value:"NC", label:"New Caledonia"},
{ value:"NZ", label:"New Zealand"},
{ value:"NI", label:"Nicaragua"},
{ value:"NE", label:"Niger"},
{ value:"NG", label:"Nigeria"},
{ value:"NU", label:"Niue"},
{ value:"NF", label:"Norfolk Island"},
{ value:"KP", label:"North Korea"},
{ value:"NO", label:"Norway"},
{ value:"OM", label:"Oman"},
{ value:"PK", label:"Pakistan"},
{ value:"PW", label:"Palau"},
{ value:"PA", label:"Panama"},
{ value:"PG", label:"Papua New Guinea"},
{ value:"PY", label:"Paraguay"},
{ value:"PE", label:"Peru"},
{ value:"PH", label:"Philippines"},
{ value:"PN", label:"Pitcairn"},
{ value:"PL", label:"Poland"},
{ value:"PT", label:"Portugal"},
{ value:"PR", label:"Puerto Rico"},
{ value:"QA", label:"Qatar"},
{ value:"RE", label:"Reunion"},
{ value:"RO", label:"Romania"},
{ value:"RU", label:"Russia"},
{ value:"RW", label:"Rwanda"},
{ value:"SH", label:"Saint Helena"},
{ value:"KN", label:"Saint Kitts and Nevis"},
{ value:"LC", label:"Saint Lucia"},
{ value:"SM", label:"San Marino"},
{ value:"SA", label:"Saudi Arabia"},
{ value:"SN", label:"Senegal"},
{ value:"SC", label:"Seychelles"},
{ value:"SL", label:"Sierra Leone"},
{ value:"SG", label:"Singapore"},
{ value:"SK", label:"Slovak Republic"},
{ value:"SI", label:"Slovenia"},
{ value:"SB", label:"Solomon Islands"},
{ value:"SO", label:"Somalia"},
{ value:"ZA", label:"South Africa"},
{ value:"GS", label:"South Georgia"},
{ value:"KR", label:"South Korea"},
{ value:"ES", label:"Spain"},
{ value:"LK", label:"Sri Lanka"},
{ value:"SD", label:"Sudan"},
{ value:"SR", label:"Suriname"},
{ value:"SZ", label:"Swaziland"},
{ value:"SE", label:"Sweden"},
{ value:"CH", label:"Switzerland"},
{ value:"SY", label:"Syria"},
{ value:"TW", label:"Taiwan"},
{ value:"TJ", label:"Tajikistan"},
{ value:"TZ", label:"Tanzania"},
{ value:"TH", label:"Thailand"},
{ value:"TG", label:"Togo"},
{ value:"TK", label:"Tokelau"},
{ value:"TO", label:"Tonga"},
{ value:"TT", label:"Trinidad and Tobago"},
{ value:"TN", label:"Tunisia"},
{ value:"TR", label:"Turkey"},
{ value:"TM", label:"Turkmenistan"},
{ value:"TC", label:"Turks and Caicos Islands"},
{ value:"TV", label:"Tuvalu"},
{ value:"UG", label:"Uganda"},
{ value:"UA", label:"Ukraine"},
{ value:"AE", label:"United Arab Emirates"},
{ value:"UK", label:"United Kingdom"},
{ value:"US", label:"United States"},
{ value:"UY", label:"Uruguay"},
{ value:"UZ", label:"Uzbekistan"},
{ value:"VU", label:"Vanuatu"},
{ value:"VA", label:"Vatican City (Holy See)"},
{ value:"VE", label:"Venezuela"},
{ value:"VN", label:"Vietnam"},
{ value:"VG", label:"Virgin Islands (British)"},
{ value:"VI", label:"Virgin Islands (US)"},
{ value:"WF", label:"Wallis and Futuna Islands"},
{ value:"EH", label:"Western Sahara"},
{ value:"WS", label:"Western Samoa"},
{ value:"YE", label:"Yemen"},
{ value:"YU", label:"Yugoslavia"},
{ value:"ZM", label:"Zambia"},
{ value:"ZW", label:"Zimbabwe"}
];
$("#billingCountries").jqxComboBox({ promptText: "Select a Country:", source: countries, height: 22, width: 198});
$("#shippingCountries").jqxComboBox({ promptText: "Select a Country:", source: countries, height: 22, width: 198});
$("#acceptTerms").jqxCheckBox({width: 300});
$("#shippingAddressCheckBox").jqxCheckBox({width: 300});
$("#shippingAddressCheckBox").bind('change', function(event)
{
if (event.args.checked)
{
$("#shippingAddressBlock").show('fast');
}
else $("#shippingAddressBlock").hide('fast');
});
var cardTypes = [{value:"visa", label:"Visa"}, {value:"masterCard", label: "MasterCard"}, {value:"americanExpress", label:"American Express"}, {value:"discover", label:"Discover"}];
$("#cardType").jqxComboBox({ selectedIndex: 0, autoDropDownHeight: true, promptText: "Card Type:", source: cardTypes, width: 180, height: 22});
var months = [
{value:"01", label:"01 - January"},
{value:"02", label:"02 - February"},
{value:"03", label:"03 - March"},
{value:"04", label:"04 - April"},
{value:"05", label:"05 - May"},
{value:"06", label:"06 - June"},
{value:"07", label:"07 - July"},
{value:"08", label:"08 - August"},
{value:"09", label:"09 - September"},
{value:"10", label:"10 - October"},
{value:"11", label:"11 - November"},
{value:"12", label:"12 - December"}
];
var years = [
{value:"2012", label:"2012"},
{value:"2013", label:"2013"},
{value:"2014", label:"2014"},
{value:"2015", label:"2015"},
{value:"2016", label:"2016"},
{value:"2017", label:"2017"},
{value:"2018", label:"2018"}
];
// create comboboxes.
$("#expirationDate").jqxComboBox({ source: months, selectedIndex: 0, height: 22, width: 140});
$("#expirationYear").jqxComboBox({ source: years, autoDropDownHeight: true, selectedIndex: 0, height: 22, width: 60});
$('#form').jqxValidator({
rules: [
{ input: '#firstName', message: 'First Name is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#lastName', message: 'Last Name is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#billingAddress', message: 'Billing Address is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#billingCity', message: 'Billing City is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#billingZipCode', message: 'Zip Code is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#cardNumber', message: 'Card Number is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#securityCode', message: 'Security Code is required!', action: 'keyup, blur', rule: 'required' },
{ input: '#acceptTerms', message: 'You need to accept the terms!', action: 'keyup, blur', rule: 'required'}
]
});
// validate form.
$("#sendButton").click(function () {
var validationResult = function (isValid) {
if (isValid) {
$("#form").submit();
}
}
$('#form').jqxValidator('validate', validationResult);
});
$("#form").on('validationSuccess', function () {
$("#form-iframe").fadeIn('fast');
});
});
</script>
<div>
<form class="form" id="form" target="form-iframe" method="post" action="billing.php" style="width: 650px;">
<div>
<h2>Enter your Billing Information</h2>
</div>
<div id="paymentFormSection" >
<div id="name-wrapper" >
<label class="form-label">Name:</label><span class="required"> *</span>
<div style="margin-top: 5px; margin-bottom: 5px;"></div>
<div style="float: left; width: 120px;" class="firstNameDiv">
<input placeHolder="First Name" class="text-input" type="text" id="firstName" style="width: 120px;" name="firstName" value="" />
</div>
<div style="float: left; margin-left: 5px; width: 30px;" class="middleInitialDiv">
<input placeHolder="MI" class="text-input" type="text" style="width: 30px;" name="middleInitial" maxlength="1" value="" />
</div>
<div style="float: left; margin-left: 5px; width: 140px;" class="lastNameDiv">
<input placeHolder="Last Name" class="text-input" type="text" id="lastName" style="width: 160px;" name="lastName" value="" />
</div>
</div>
<div style="clear:both;">
<br/>
<label class="form-label">Billing Address:</label><span class="required"> *</span>
<div style="margin-top: 5px; margin-bottom: 5px;"></div>
<div>
<input class="text-input" name="billingAddress" id="billingAddress" placeHolder="Street Address" style="width: 355px;" type="text" />
</div>
<div style="margin-top: 5px;">
<input placeHolder="Address Line 2" name="billingAddressLine2" class="text-input" type="text" style="width: 355px;" />
</div>
<div style="margin-top: 5px;">
<input class="text-input" type="text" name="billingCity" id="billingCity" placeHolder="City" style="width: 150px; float: left;" maxlength="15" />
<input class="text-input" type="text" name="billingState" id="billingState" placeHolder="State / Province / Region" style="margin-left: 5px; width: 200px; float: left;" />
<div style="clear:both;"/>
</div>
<div style="margin-bottom: 5px; margin-top: 5px;">
<input class="text-input" name="billingZipCode" id="billingZipCode" placeHolder="Postal / Zip Code" type="text" style="width: 150px; float: left;" maxlength="5" />
<div name="billingCountries" style='float: left; margin-left: 5px;' id="billingCountries"></div>
<div style="clear:both;"/>
</div>
</div>
<div style="margin-top: 10px; clear: both;">
<div name="shippingAddressCheckBox" id="shippingAddressCheckBox">My Shipping Address is different than my billing address</div>
</div>
<div id="shippingAddressBlock" style="display: none; clear:both;">
<br/>
<label class="form-label">Shipping Address:</label><span class="required"> *</span>
<div style="margin-top: 5px; margin-bottom: 5px;"></div>
<div>
<input class="text-input" name="shippingAddress" id="shippingAddress" placeHolder="Street Address" style="width: 355px;" type="text" />
</div>
<div style="margin-top: 5px;">
<input placeHolder="Address Line 2" name="shippingAddressLine2" class="text-input" type="text" style="width: 355px;" />
</div>
<div style="margin-top: 5px;">
<input class="text-input" type="text" name="shippingCity" id="shippingCity" placeHolder="City" style="width: 150px; float: left;" maxlength="15" />
<input class="text-input" type="text" name="shippingState" id="shippingState" placeHolder="State / Province / Region" style="margin-left: 5px; width: 200px; float: left;" />
<div style="clear:both;"></div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px;">
<input class="text-input" name="shippingZipCode" id="shippingZipCode" placeHolder="Postal / Zip Code" type="text" style="width: 150px; float: left;" maxlength="5" />
<div name="shippingCountries" style='float: left; margin-left: 5px;' id="shippingCountries"></div>
<div style="clear:both;"></div>
</div>
</div>
<div style="margin-top: 10px;">
<label class="form-label">Billing Information:</label><span class="required"> *</span>
<div name="cardType" style="margin-top: 5px;" id="cardType">
</div>
<div>
<input style="width: 182px; margin-top: 5px;" placeHolder="Card Number" id="cardNumber" name="cardNumber" class="text-input" type="text" maxlength="16" />
</div>
<div style="clear: both; margin-top: 5px;">
<div name="expirationDate" style="float: left;" id="expirationDate"></div>
<div name="expirationYear" style="margin-left: 5px; float: left;" id="expirationYear"></div>
<br/>
</div>
<div style="clear: both; margin-top: 5px;">
<input style="clear: both; margin-top: 5px;" placeHolder="Security Code" class="text-input" type="text" id="securityCode" name="securityCode" maxlength="4" />
</div>
</div>
<div style="clear: both; margin-top: 5px;">
<div id="acceptTerms" name="acceptTerms">I agree to the Terms and Conditions</div>
</div>
<div style="clear: both; margin-top: 5px;">
<input id="sendButton" value="Checkout" type="button"/>
</div>
</div>
</form>
</div>
<br/>
<div style="font-size: 13px; font-family: Verdana;">
<iframe id="form-iframe" name="form-iframe" class="demo-iframe" frameborder="0"></iframe>
</div>
</body>
</html>
<!--billing.php
$formData = array(
"firstname" => $_POST["firstName"],
"middlename" => $_POST["middleInitial"],
"lastname" => $_POST["lastName"],
"billingAddress" => $_POST["billingAddress"],
"billingAddressLine2" => $_POST["billingAddressLine2"],
"billingCity" => $_POST["billingCity"],
"billingState" => $_POST["billingState"],
"billingZipCode" => $_POST["billingZipCode"],
"billingCountry" => $_POST["billingCountries"],
"shippingAddressCheckBox" => $_POST["shippingAddressCheckBox"],
"shippingAddress" => $_POST["shippingAddress"],
"shippingAddressLine2" => $_POST["shippingAddressLine2"],
"shippingCity" => $_POST["shippingCity"],
"shippingState" => $_POST["shippingState"],
"shippingZipCode" => $_POST["shippingZipCode"],
"shippingCountry" => $_POST["shippingCountries"],
"cardNumber" => $_POST["cardNumber"],
"expirationDate" => $_POST["expirationDate"],
"expirationYear" => $_POST["expirationYear"],
"securityCode" => $_POST["securityCode"],
"cardType" => $_POST["cardType"]
);
$response = "<table>";
$response .= "<tr><th>Customer Details</th></tr>";
$response .= "<tr><td>" . $formData['firstname'] . "</td><td>" . $formData['middlename'] . "</td><td>" . $formData['lastname'] . "</td></tr>";
$response .= "<tr><td>Billing Address</td></tr>";
$response .= "<tr><td>" . $formData['billingAddress'] . "</td></tr>";
$response .= "<tr><td>" . $formData['billingAddressLine2'] . "</td></tr>";
$response .= "<tr><td>" . $formData['billingCity'] . "</td><td>" . $formData['billingState'] . "</td></tr>";
$response .= "<tr><td>" . $formData['billingZipCode'] . "</td><td>" . $formData['billingCountry'] . "</td></tr>";
if (isset($_POST["shippingAddressCheckBox"]) && $_POST["shippingAddressCheckBox"] == 'true')
{
$response .= "<tr><td>Shipping Address</td></tr>";
$response .= "<tr><td>" . $formData['shippingAddress'] . "</td></tr>";
$response .= "<tr><td>" . $formData['shippingAddressLine2'] . "</td></tr>";
$response .= "<tr><td>" . $formData['shippingCity'] . "</td></tr>";
$response .= "<tr><td>" . $formData['shippingState'] . "</td></tr>";
$response .= "<tr><td>" . $formData['shippingCity'] . "</td><td>" . $formData['shippingState'] . "</td></tr>";
$response .= "<tr><td>" . $formData['shippingZipCode'] . "</td><td>" . $formData['shippingCountry'] . "</td></tr>";
}
$response .= "<tr><td>Billing Information</td></tr>";
$response .= "<tr><td>" . $formData['cardType'] . "</td></tr>";
$response .= "<tr><td>" . $formData['cardNumber'] . "</td></tr>";
$response .= "<tr><td>" . $formData['expirationDate'] . "</td><td>" . $formData['expirationYear'] . "</td></tr>";
$response .= "<tr><td>" . $formData['securityCode'] . "</td></tr>";
echo $response;
-->