From: <Saved by WebKit>
Subject: jQuery Form Plugin
Date: Sun, 6 Feb 2016 09:26:11 +0800
MIME-Version: 1.0
Content-Type: multipart/related;
type="text/html";
boundary="----=_NextPart_000_0F17_6C563163.865486AA"
------=_NextPart_000_0F17_6C563163.865486AA
Content-Type: text/html
Content-Transfer-Encoding: quoted-printable
Content-Location: http://jquery.malsup.com/form/
<!DOCTYPE html><html lang=3D"en_US" class=3D"ui-widget-content"><head><meta=
charset=3D"UTF-8">
<title>jQuery Form Plugin</title>
<link rel=3D"stylesheet" href=3D"http://ajax.googleapis.com/ajax/libs/jquer=
yui/1.8/themes/black-tie/jquery-ui.css" type=3D"text/css">
<link rel=3D"stylesheet" href=3D"http://jquery.malsup.com/themes/jquery-ui-=
sub-tabs-smoothness.css" type=3D"text/css">
<link rel=3D"stylesheet" href=3D"http://jquery.malsup.com/jq-new.css" type=
=3D"text/css">
<style type=3D"text/css">
form { background: #DFEFFC; border: 5px solid #c5dbec; margin: 10px 0; padd=
ing: 20px }
.ui-widget-content { background: white; }
</style>
<style id=3D"clearly_highlighting_css" type=3D"text/css">/* selection */ ht=
ml.clearly_highlighting_enabled ::-moz-selection { background: rgba(246, 23=
8, 150, 0.99); } html.clearly_highlighting_enabled ::selection { background=
: rgba(246, 238, 150, 0.99); } /* cursor */ html.clearly_highlighting_enabl=
ed { /* cursor and hot-spot position -- requires a default cursor, after=
the URL one */ cursor: url("chrome-extension://pioclpoplcdbaefihamjohne=
fbikjilc/clearly/images/highlight--cursor.png") 14 16, text; } /* highlight=
tag */ em.clearly_highlight_element { font-style: inherit !important; f=
ont-weight: inherit !important; background-image: url("chrome-extension:=
//pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlight--yellow.png"); =
background-repeat: repeat-x; background-position: top left; background-s=
ize: 100% 100%; } /* the delete-buttons are positioned relative to this */ =
em.clearly_highlight_element.clearly_highlight_first { position: relative; =
} /* delete buttons */ em.clearly_highlight_element a.clearly_highlight_del=
ete_element { display: none; cursor: pointer; padding: 0; margin: 0; =
line-height: 0; position: absolute; width: 34px; height: 34px; left: -17=
px; top: -17px; background-image: url("chrome-extension://pioclpoplcdbae=
fihamjohnefbikjilc/clearly/images/highlight--delete-sprite.png"); backgroun=
d-repeat: no-repeat; background-position: 0px 0px; } em.clearly_highlight_e=
lement a.clearly_highlight_delete_element:hover { background-position: -34p=
x 0px; } /* retina */ @media (min--moz-device-pixel-ratio: 2), (-webkit-min=
-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { em.clearly_highli=
ght_element { background-image: url("chrome-extension://pioclpoplcdbaefiham=
johnefbikjilc/clearly/images/highlight--yellow@2x.png"); } em.clearly_hi=
ghlight_element a.clearly_highlight_delete_element { background-image: url(=
"chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/clearly/images/highlig=
ht--delete-sprite@2x.png"); background-size: 68px 34px; } } </style><style>=
[touch-action=3D"none"]{ -ms-touch-action: none; touch-action: none; }[touc=
h-action=3D"pan-x"]{ -ms-touch-action: pan-x; touch-action: pan-x; }[touch-=
action=3D"pan-y"]{ -ms-touch-action: pan-y; touch-action: pan-y; }[touch-ac=
tion=3D"scroll"],[touch-action=3D"pan-x pan-y"],[touch-action=3D"pan-y pan-=
x"]{ -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; }</style></h=
ead>
<body>
<div id=3D"page-header" class=3D"ui-widget-header">
<a href=3D"http://jquery.malsup.com/" class=3D"icon home" title=3D"Home"><=
span class=3D"ui-icon ui-icon-home"> </span></a>
<h1>jQuery Form Plugin</h1>
<div id=3D"twitter"><a href=3D"http://twitter.com/malsup" title=3D"Updates=
posted on Twitter"><img src=3D"http://jquery.malsup.com/images/twitter_1.p=
ng" alt=3D"Twitter.com" width=3D"32" height=3D"32"></a></div>
</div>
<div id=3D"tabs">
<ul>
<li><a href=3D"http://jquery.malsup.com/form/#tab1">Getting Started</a></=
li>
<li><a href=3D"http://jquery.malsup.com/form/#tab2">API</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#tab3">Options</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#tab4">Examples</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#tab5">Form Fields</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#tab6">FAQ</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#tab7">Download</a></li>
</ul>
<div id=3D"tab1" data-tabid=3D"getting-started">
<div style=3D"width: 728px; margin: auto">
<!-- text-and-image -->
<ins class=3D"adsbygoogle" style=3D"display:inline-bloc=
k;width:728px;height:90px" data-ad-client=3D"ca-pub-0063430075356651" data-=
ad-slot=3D"2614073966" data-adsbygoogle-status=3D"done"><ins id=3D"aswift_2=
_expand" style=3D"display:inline-table;border:none;height:90px;margin:0;pad=
ding:0;position:relative;visibility:visible;width:728px;background-color:tr=
ansparent"><ins id=3D"aswift_2_anchor" style=3D"display:block;border:none;h=
eight:90px;margin:0;padding:0;position:relative;visibility:visible;width:72=
8px;background-color:transparent"><iframe width=3D"728" height=3D"90" frame=
border=3D"0" marginwidth=3D"0" marginheight=3D"0" vspace=3D"0" hspace=3D"0"=
allowtransparency=3D"true" scrolling=3D"no" allowfullscreen=3D"true" onloa=
d=3D"var i=3Dthis.id,s=3Dwindow.google_iframe_oncopy,H=3Ds&&s.handl=
ers,h=3DH&&H[i],w=3Dthis.contentWindow,d;try{d=3Dw.document}catch(e=
){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTi=
meout(h,0)}else if(h.match){try{h=3Ds.upd(h,i)}catch(e){}w.location.replace=
(h)}}" id=3D"aswift_2" name=3D"aswift_2" style=3D"left:0;position:absolute;=
top:0;"></iframe></ins></ins></ins>
=20
</div>
<h1>Overview</h1>
The jQuery Form Plugin allows you to easily and unobtrusively upg=
rade HTML forms to use
<abbr title=3D"Asynchronous JavaScript and XML">AJAX</abbr>.
The main methods,
<code class=3D"inline">ajaxForm</code> and <code class=3D"inline"=
>ajaxSubmit</code>,
gather information from the form element to determine how to mana=
ge the submit process. =20
Both of these methods support
numerous options which allows you to have full control over how t=
he data is submitted. =20
<!-- It is extremely useful for sites hosted in=20
<a href=3D"http://www.webhostingsearch.com/cheap-web-hostin=
g.php">low cost web hosting providers</a> with limited=20
features and functionality.
--> =20
Submitting a form with AJAX doesn't get any easier than thi=
s!
<h1>Quick Start Guide</h1>
<div class=3D"step-holder"><span class=3D"step-counter ui-widget-=
header ui-corner-all">1</span>Add a form to your page. Just a normal form, =
no special markup required:
<pre><code class=3D"mix"><form id=3D"myForm" action=3D"comment=
.php" method=3D"post">
Name: <input type=3D"text" name=3D"name" />
Comment: <textarea name=3D"comment"></textarea>
<input type=3D"submit" value=3D"Submit Comment" />
</form></code></pre>
</div>
=09
<div class=3D"step-holder"><span class=3D"step-counter ui-widget-=
header ui-corner-all">2</span>Include jQuery and the Form Plugin external s=
cript files and a short script to
initialize the form when the <abbr title=3D"Document Object Model=
">DOM</abbr> is ready:
<pre><code class=3D"mix"><html>
<head>
<script src=3D"http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquer=
y.js"></script>
<script src=3D"http://malsup.github.com/jquery.form.js"></scri=
pt>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
...</code></pre>
</div>
<p><strong>That's it!</strong></p>
<p>When this form is submitted the <em>name</em> and <em>comment</em> =
fields
will be posted to <em>comment.php</em>. If the server returns
a success status then the user will see a "Thank you" message.
</p>
<div style=3D"clear:both;margin:30px auto;width:728px;margin-bottom:30px">
<ins id=3D"aswift_0_expand" style=3D"display:inline-table;border:none;heigh=
t:15px;margin:0;padding:0;position:relative;visibility:visible;width:728px;=
background-color:transparent"><ins id=3D"aswift_0_anchor" style=3D"display:=
block;border:none;height:15px;margin:0;padding:0;position:relative;visibili=
ty:visible;width:728px;background-color:transparent"><iframe width=3D"728" =
height=3D"15" frameborder=3D"0" marginwidth=3D"0" marginheight=3D"0" vspace=
=3D"0" hspace=3D"0" allowtransparency=3D"true" scrolling=3D"no" allowfullsc=
reen=3D"true" onload=3D"var i=3Dthis.id,s=3Dwindow.google_iframe_oncopy,H=
=3Ds&&s.handlers,h=3DH&&H[i],w=3Dthis.contentWindow,d;try{d=
=3Dw.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChi=
ld)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=3Ds.upd(h,i)}catch(e=
){}w.location.replace(h)}}" id=3D"aswift_0" name=3D"aswift_0" style=3D"left=
:0;position:absolute;top:0;"></iframe></ins></ins>
</div>
=20
</div>
<div id=3D"tab2" data-tabid=3D"api">
<div style=3D"width: 728px; margin: auto">
<!-- text-and-image -->
<ins class=3D"adsbygoogle" style=3D"display:inline-block;width:=
728px;height:90px" data-ad-client=3D"ca-pub-0063430075356651" data-ad-slot=
=3D"2614073966" data-adsbygoogle-status=3D"done"><ins id=3D"aswift_3_expand=
" style=3D"display:inline-table;border:none;height:90px;margin:0;padding:0;=
position:relative;visibility:visible;width:728px;background-color:transpare=
nt"><ins id=3D"aswift_3_anchor" style=3D"display:block;border:none;height:9=
0px;margin:0;padding:0;position:relative;visibility:visible;width:728px;bac=
kground-color:transparent"><iframe width=3D"728" height=3D"90" frameborder=
=3D"0" marginwidth=3D"0" marginheight=3D"0" vspace=3D"0" hspace=3D"0" allow=
transparency=3D"true" scrolling=3D"no" allowfullscreen=3D"true" onload=3D"v=
ar i=3Dthis.id,s=3Dwindow.google_iframe_oncopy,H=3Ds&&s.handlers,h=
=3DH&&H[i],w=3Dthis.contentWindow,d;try{d=3Dw.document}catch(e){}if=
(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout=
(h,0)}else if(h.match){try{h=3Ds.upd(h,i)}catch(e){}w.location.replace(h)}}=
" id=3D"aswift_3" name=3D"aswift_3" style=3D"left:0;position:absolute;top:0=
;"></iframe></ins></ins></ins>
=20
</div>
<h1>Form Plugin API</h1>
The Form Plugin API provides several methods that allow you to easi=
ly manage form data and form submission.
<dl>
<dt><code class=3D"method">ajaxForm</code></dt>
<dd>Prepares a form to be submitted via <abbr title=3D"Asynchronous=
JavaScript and XML">AJAX</abbr>
by adding all of the necessary event listeners. It does <strong>no=
t</strong> submit the form.
Use <code class=3D"inline">ajaxForm</code> in your document's <code=
class=3D"inline">ready</code> function to
prepare your form(s) for AJAX submission. <code class=3D"inline">a=
jaxForm</code> takes zero or one argument. The single argument
can be either a callback function or an <a href=3D"http://jquery.ma=
lsup.com/form/#options-object">Options Object</a>.<br>
Chainable: Yes.
<p class=3D"note"><strong>Note:</strong> You can pass any of the st=
andard=20
<a class=3D"external" href=3D"http://docs.jquery.com/Ajax/jQuery.a=
jax#options" title=3D""><code class=3D"inline">$.ajax</code></a> options to=
ajaxForm</p>
<p>Example:
</p><pre><code class=3D"mix">$('#myFormId').ajaxForm();</code></pre=
>
</dd>
<dt><code class=3D"method">ajaxSubmit</code></dt>
<dd>Immediately submits the form via AJAX. In the most common use =
case this is invoked in response to the user clicking a submit button on th=
e form.
<code class=3D"inline">ajaxSubmit</code> takes zero or one argument=
. The single argument
can be either a callback function or an <a href=3D"http://jquery.ma=
lsup.com/form/#options-object">Options Object</a>.<br>
Chainable: Yes.
<p class=3D"note"><strong>Note:</strong> You can pass any of the st=
andard=20
<a class=3D"external" href=3D"http://docs.jquery.com/Ajax/jQuery.a=
jax#options" title=3D""><code class=3D"inline">$.ajax</code></a> options to=
ajaxSubmit</p>
<p>Example:
</p><pre><code class=3D"mix">// attach handler to form's submit eve=
nt
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});</code></pre>
</dd>
<dt><code class=3D"method">formSerialize</code></dt>
<dd>Serializes the form into a query string. This method will retu=
rn a string in the format:
<code class=3D"inline">name1=3Dvalue1&name2=3Dvalue2</code><br>
Chainable: No, this method returns a String.
<p>Example:
</p><pre><code class=3D"mix">var queryString =3D $('#myFormId').for=
mSerialize();
// the data could now be submitted using $.get, $.post, $.ajax, etc
$.post('myscript.php', queryString);
</code></pre>
</dd>
<dt><code class=3D"method">fieldSerialize</code></dt>
<dd>Serializes field elements into a query string. This is handy w=
hen you need to serialize only
part of a form. This method will return a string in the format:
<code class=3D"inline">name1=3Dvalue1&name2=3Dvalue2</code><br>
Chainable: No, this method returns a String.
<p>Example:
</p><pre><code class=3D"mix">var queryString =3D $('#myFormId .spec=
ialFields').fieldSerialize();</code></pre>
</dd>
<dt><code class=3D"method">fieldValue</code></dt>
<dd>Returns the value(s) of the element(s) in the matched set in an=
array. As of version .91,
this method <strong>always</strong> returns an array.
If no valid value can be determined the
array will be empty, otherwise it will contain one or more values.<=
br>
Chainable: No, this method returns an array.
<p>Example:
</p><pre><code class=3D"mix">// get the value of the password input
var value =3D $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
</code></pre>
</dd>
<dt><code class=3D"method">resetForm</code></dt>
<dd>Resets the form to its original state by invoking the form elem=
ent's native
<abbr title=3D"Document Object Model">DOM</abbr> method.<br>
Chainable: Yes.
<p>Example:
</p><pre><code class=3D"mix">$('#myFormId').resetForm();</code></pr=
e>
</dd>
<dt><code class=3D"method">clearForm</code></dt>
<dd>Clears the form elements. This method emptys all of the text i=
nputs, password inputs and textarea elements, clears
the selection in any select elements, and unchecks all radio and ch=
eckbox inputs.<br>
Chainable: Yes.
<pre><code class=3D"mix">$('#myFormId').clearForm();</code></pre>
</dd>
<dt><code class=3D"method">clearFields</code></dt>
<dd>Clears field elements. This is handy when you need to clear on=
ly a part of the form.<br>
Chainable: Yes.
<pre><code class=3D"mix">$('#myFormId .specialFields').clearFields(=
);</code></pre>
</dd>
</dl>
</div>
=09
<div id=3D"tab3" data-tabid=3D"options-object">
<div style=3D"width: 728px; margin: auto">
<!-- text-and-image -->
<ins class=3D"adsbygoogle" style=3D"display:inline-block;width:=
728px;height:90px" data-ad-client=3D"ca-pub-0063430075356651" data-ad-slot=
=3D"2614073966" data-adsbygoogle-status=3D"done"><ins id=3D"aswift_4_expand=
" style=3D"display:inline-table;border:none;height:90px;margin:0;padding:0;=
position:relative;visibility:visible;width:728px;background-color:transpare=
nt"><ins id=3D"aswift_4_anchor" style=3D"display:block;border:none;height:9=
0px;margin:0;padding:0;position:relative;visibility:visible;width:728px;bac=
kground-color:transparent"><iframe width=3D"728" height=3D"90" frameborder=
=3D"0" marginwidth=3D"0" marginheight=3D"0" vspace=3D"0" hspace=3D"0" allow=
transparency=3D"true" scrolling=3D"no" allowfullscreen=3D"true" onload=3D"v=
ar i=3Dthis.id,s=3Dwindow.google_iframe_oncopy,H=3Ds&&s.handlers,h=
=3DH&&H[i],w=3Dthis.contentWindow,d;try{d=3Dw.document}catch(e){}if=
(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout=
(h,0)}else if(h.match){try{h=3Ds.upd(h,i)}catch(e){}w.location.replace(h)}}=
" id=3D"aswift_4" name=3D"aswift_4" style=3D"left:0;position:absolute;top:0=
;"></iframe></ins></ins></ins>
=20
</div>
<h1>ajaxForm and ajaxSubmit Options</h1>
<p><strong>Note:</strong> Aside from the options listed below, yo=
u can also pass any of the standard=20
<a class=3D"external" href=3D"http://docs.jquery.com/Ajax/jQuery=
.ajax#options" title=3D"">
<code class=3D"inline">$.ajax</code></a> options to ajaxForm and=
ajaxSubmit.</p>
Both <code class=3D"inline">ajaxForm</code> and <code class=3D"in=
line">ajaxSubmit</code> support
numerous options which can be provided using an Options Object. =
The Options Object is simply
a JavaScript object that contains properties with values set as f=
ollows:
<dl class=3D"options">
<dt>beforeSerialize</dt>
<dd>Callback function to be invoked before the form is serialized=
.
This provides an opportunity to manipulate the form before it's=
values are retrieved.
The <code>beforeSerialize</code> function is invoked with two a=
rguments: the jQuery object for the form,=20
and the Options Object passed into ajaxForm/ajaxSubmit.
<pre><code class=3D"mix">beforeSerialize: function($form, option=
s) {
// return false to cancel submit =20
}</code></pre>
Default value: <code class=3D"inline">null</code>
</dd>
<dt>beforeSubmit</dt>
<dd>Callback function to be invoked before the form is submitted.
The 'beforeSubmit' callback can be provided as a hook for runni=
ng pre-submit logic or for
validating the form data. If the 'beforeSubmit' callback retur=
ns false then the form will
not be submitted. The 'beforeSubmit' callback is invoked with t=
hree arguments: the form data
in array format, the jQuery object for the form, and the Option=
s Object passed into ajaxForm/ajaxSubmit.
<pre><code class=3D"mix">beforeSubmit: function(arr, $form, opti=
ons) {
// The array of form data takes the following form:
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: =
'secret' } ]
=20
// return false to cancel submit =20
}</code></pre>
Default value: <code class=3D"inline">null</code>
</dd>
<dt>clearForm</dt>
<dd>Boolean flag indicating whether the form should be cleared if=
the submit is successful<br>
Default value: <code class=3D"inline">null</code>
</dd>
<dt>data</dt>
<dd>An object containing extra data that should be submitted alon=
g with the form.
<pre><code class=3D"mix">data: { key1: 'value1', key2: 'value2' =
}</code></pre>
</dd>
<dt>dataType</dt>
<dd>Expected data type of the response. One of: null, 'xml', 'sc=
ript', or 'json'.
The <code class=3D"inline">dataType</code> option provides a mean=
s for specifying how the server response should be handled.
This maps directly to the <code class=3D"inline">jQuery.httpData<=
/code> method.
The following values are supported:
<p>
<strong>'xml'</strong>: if dataType =3D=3D 'xml' the server respo=
nse is treated as XML and the 'success'
callback method, if specified, will be passed the respo=
nseXML value
</p><p>
<strong>'json'</strong>: if dataType =3D=3D 'json' the server res=
ponse will be evaluted and passed to
the 'success' callback, if specified
</p><p>
<strong>'script'</strong>: if dataType =3D=3D 'script' the server=
response is evaluated in the global context
</p><p>
Default value: <code class=3D"inline">null</code>
</p></dd>
<dt>error</dt>
<dd>Callback function to be invoked upon error.
</dd>
<dt>forceSync</dt>
<dd>Boolean value. Set to true to remove short delay before posti=
ng form when uploading files (or using the iframe option).
The delay is used to allow the browser to render DOM updates prio=
r to performing a native form submit. This improves
usability when displaying notifications to the user, such as "Ple=
ase Wait..."
<br>
Default value: <code class=3D"inline">false</code>
<div class=3D"note">Added in v2.38</div>
</dd>
<dt>iframe</dt>
<dd>Boolean flag indicating whether the form should always target=
the server response to an iframe.
This is useful in conjuction with file uploads. See the <em>=
File Uploads</em>
documentation on the <a href=3D"http://jquery.malsup.com/form=
/#code-samples">Code Samples</a> page for more info.
<br>
Default value: <code class=3D"inline">false</code>
</dd>
<dt>iframeSrc</dt>
<dd>String value that should be used for the iframe's src attribu=
te when/if an iframe is used.
<br>
Default value: <code class=3D"inline">about:blank</code><br>
Default value for pages that use <code>https</code> protocol:=
<code class=3D"inline">javascript:false</code>
</dd>
<dt>iframeTarget</dt>
<dd>Identifies the iframe element to be used as the response targ=
et for file uploads. By default, the plugin
will create a temporary iframe element to capture the response when up=
loading files. This options allows you
to use an existing iframe if you wish. When using this option the plug=
in will make no attempt at handling
the response from the server.<br>
Default value: <code class=3D"inline">null</code>
<div class=3D"note">Added in v2.76</div>
</dd>
<dt>replaceTarget</dt>
<dd>Optionally used along with the the <code>target</code> option=
. Set to <code>true</code> if the
target should be replaced or <code>false</code> if only the targ=
et <em>contents</em> should
be replaced. <br>
Default value: <code class=3D"inline">false</code>
<div class=3D"note">Added in v2.43</div>
</dd>
<dt>resetForm</dt>
<dd>Boolean flag indicating whether the form should be reset if t=
he submit is successful<br>
Default value: <code class=3D"inline">null</code>
</dd>
<dt>semantic</dt>
<dd>Boolean flag indicating whether data must be submitted in str=
ict semantic order (slower). Note that the
normal form serialization is done in semantic order with the =
exception of input elements of <code class=3D"inline">type=3D"image"</code>=
.
You should only set the semantic option to true if your serve=
r has strict semantic requirements
<strong>and</strong> your form contains an input element of <=
code class=3D"inline">type=3D"image"</code>.<br>
Default value: <code class=3D"inline">false</code>
</dd>
<dt>success</dt>
<dd>Callback function to be invoked after the form has been submi=
tted.
If a 'success' callback function is provided it is invoked af=
ter the response has been returned
from the server. It is passed the following arguments:
<ol style=3D"padding:10px">
<li>1.) responseText or responseXML value (depending on the =
value of the dataType option).</li>
<li>2.) statusText</li>
<li>3.) xhr (or the jQuery-wrapped form element if using jQu=
ery < 1.4)</li>
<li>4.) jQuery-wrapped form element (or undefined if using j=
Query < 1.4)</li>
</ol>
<p>
Default value: <code class=3D"inline">null</code>
</p></dd>
<dt>target</dt>
<dd>Identifies the element(s) in the page to be updated with the =
server response.
This value may be specified as a jQuery selection string, a j=
Query object,
or a DOM element.<br>
Default value: <code class=3D"inline">null</code>
</dd>
<dt>type</dt>
<dd>The method in which the form data should be submitted, 'GET' =
or 'POST'.<br>
Default value: value of form's <code class=3D"inline">method<=
/code> attribute (or 'GET' if none found)
</dd>
<dt>uploadProgress</dt>
<dd>
Callback function to be invoked with upload progress information (if s=
upported by the browser).
The callback is passed the following arguments:
<ol style=3D"padding:10px">
<li>1.) event; the browser event
</li><li>2.) position (integer)
</li><li>3.) total (integer)
</li><li>4.) percentComplete (integer)
</li></ol>
<p>
Default value: <code class=3D"inline">null</code>
</p></dd>
<dt>url</dt>
<dd>URL to which the form data will be submitted.<br>
Default value: value of form's <code class=3D"inline">action</cod=
e> attribute
</dd>
</dl>
<p>Example:
</p><pre><code class=3D"mix">// prepare Options Object
var options =3D {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
};
// pass options to ajaxForm
$('#myForm').ajaxForm(options);</code></pre>
<p class=3D"note">
Note that the Options Object can also be used to pass values to jQuer=
y's
<a href=3D"http://docs.jquery.com/Ajax"><code class=3D"inline">$.ajax=
</code></a> method.
If you are familiar with the options supported by <code class=3D"inli=
ne">$.ajax</code>
you may use them in the Options Object passed to <code class=3D"inlin=
e">ajaxForm</code> and
<code class=3D"inline">ajaxSubmit</code>.
</p>
=09
</div>
=09
=09
<div id=3D"tab4" data-tabid=3D"examples">
<div style=3D"width: 728px; margin: auto">
<!-- text-and-image -->
<ins class=3D"adsbygoogle" style=3D"display:inline-block;width:=
728px;height:90px" data-ad-client=3D"ca-pub-0063430075356651" data-ad-slot=
=3D"2614073966" data-adsbygoogle-status=3D"done"><ins id=3D"aswift_5_expand=
" style=3D"display:inline-table;border:none;height:90px;margin:0;padding:0;=
position:relative;visibility:visible;width:728px;background-color:transpare=
nt"><ins id=3D"aswift_5_anchor" style=3D"display:block;border:none;height:9=
0px;margin:0;padding:0;position:relative;visibility:visible;width:728px;bac=
kground-color:transparent"><iframe width=3D"728" height=3D"90" frameborder=
=3D"0" marginwidth=3D"0" marginheight=3D"0" vspace=3D"0" hspace=3D"0" allow=
transparency=3D"true" scrolling=3D"no" allowfullscreen=3D"true" onload=3D"v=
ar i=3Dthis.id,s=3Dwindow.google_iframe_oncopy,H=3Ds&&s.handlers,h=
=3DH&&H[i],w=3Dthis.contentWindow,d;try{d=3Dw.document}catch(e){}if=
(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout=
(h,0)}else if(h.match){try{h=3Ds.upd(h,i)}catch(e){}w.location.replace(h)}}=
" id=3D"aswift_5" name=3D"aswift_5" style=3D"left:0;position:absolute;top:0=
;"></iframe></ins></ins></ins>
=20
</div>
<h1>Code Samples</h1>
<div id=3D"sub-tabs">
<ul class=3D"sampleAnchors">
<li><a href=3D"http://jquery.malsup.com/form/#sample1">ajax=
Form</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#sample2">ajax=
Submit</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#sample3">Vali=
dation</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#sample4">JSON=
</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#sample5">XML<=
/a></li>
<li><a href=3D"http://jquery.malsup.com/form/#sample6">HTML=
</a></li>
<li><a href=3D"http://jquery.malsup.com/form/#sample7">File=
Uploads</a></li>
</ul>
<div id=3D"sample1" class=3D"sampleTabContent" data-tabid=3D"aj=
axForm">
<p>
The following code controls the HTML form beneath it. It uses <=
code class=3D"inline">ajaxForm</code>
to bind the form and demonstrates how to use pre- and post-=
submit callbacks.
</p><pre><code class=3D"mix">// prepare the form when the D=
OM is ready
$(document).ready(function() {
var options =3D {
target: '#output1', // target element(s) to be updated wit=
h server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'm=
ethod' attribute
//dataType: null // 'xml', 'script', or 'json' (expected se=
rver response type)
//clearForm: true // clear all form fields after successful =
submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string =
to display it
// but the form plugin does this for you automatically when it submits =
the data
var queryString =3D $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access=
the
// DOM element for the form do this:
// var formElement =3D jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to co=
ntinue
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callbac=
k
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataTyp=
e
// property set to 'xml' then the first argument to the success callbac=
k
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataTyp=
e
// property set to 'json' then the first argument to the success callba=
ck
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the respo=
nseText.');
}
</code></pre>
<form id=3D"myForm1" action=3D"http://jquery.malsup.com/for=
m/dummy.php" method=3D"post"><div>
<input type=3D"hidden" name=3D"Hidden" value=3D"hid=
denValue">
<table>
<tbody><tr><td>Name:</td><td><input name=3D"Name" t=
ype=3D"text" value=3D"MyName1"></td></tr>
<tr><td>Password:</td><td><input name=3D"Password" =
type=3D"password"></td></tr>
<tr><td>Multiple:</td><td><select name=3D"Multiple"=
multiple=3D"multiple">
<optgroup label=3D"Group 1">
<option value=3D"one" selected=3D"selected"=
>One</option>
<option value=3D"two">Two</option>
<option value=3D"three">Three</option>
</optgroup>
<optgroup label=3D"Group 2">
<option value=3D"four">Four</option>
<option value=3D"five">Five</option>
<option value=3D"six">Six</option>
</optgroup>
</select></td></tr>
<tr><td>Single:</td><td><select name=3D"Single">
<option value=3D"one" selected=3D"selected">One=
</option>
<option value=3D"two">Two</option>
<option value=3D"three">Three</option>
</select></td></tr>
<tr><td>Single2:</td><td><select name=3D"Single2">
<optgroup label=3D"Group 1">
<option value=3D"A" selected=3D"selected">A=
</option>
<option value=3D"B">B</option>
<option value=3D"C">C</option>
</optgroup>
<optgroup label=3D"Group 2">
<option value=3D"D">D</option>
<option value=3D"E">E</option>
<option value=3D"F">F</option>
</optgroup>
</select></td></tr>
<tr><td>Check:</td><td>
<input type=3D"checkbox" name=3D"Check" value=
=3D"1">
<input type=3D"checkbox" name=3D"Check" value=
=3D"2">
<input type=3D"checkbox" name=3D"Check" value=
=3D"3">
</td></tr>
<tr><td>Radio:</td><td>
<input type=3D"radio" name=3D"Radio" value=3D"1=
">
<input type=3D"radio" name=3D"Radio" value=3D"2=
">
<input type=3D"radio" name=3D"Radio" value=3D"3=
">
</td></tr>
<tr><td>Text:</td><td><textarea name=3D"Text" rows=
=3D"2" cols=3D"20">This is Form1</textarea></td></tr>
</tbody></table>
<input type=3D"reset" name=3D"resetButton " value=
=3D"Reset">
<input type=3D"submit" name=3D"submitButton" value=
=3D"Submit1">
<input type=3D"image" name=3D"submitButton" value=
=3D"Submit2" src=3D"http://jquery.malsup.com/form/submit.gif">
<input type=3D"image" name=3D"submitButton" value=
=3D"Submit3" src=3D"http://jquery.malsup.com/form/submit.gif">
<input type=3D"image" name=3D"submitButton" value=
=3D"Submit4" src=3D"http://jquery.malsup.com/form/submit.gif">
<button type=3D"submit" name=3D"submitButton" value=3D"Submit5"><span=
>submit 5</span></button>
</div></form>
<h1>Output Div (#output1):</h1>
<div id=3D"output1">AJAX response will replace this content=
.</div>
</div>
<div id=3D"sample2" class=3D"sampleTabContent" data-tabid=3D"aj=
axSubmit">
<p>
The following code controls the HTML form beneath it. It uses <=
code class=3D"inline">ajaxSubmit</code>
to submit the form.
</p><pre><code class=3D"mix">// prepare the form when the D=
OM is ready
$(document).ready(function() {
var options =3D {
target: '#output2', // target element(s) to be updated wit=
h server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'm=
ethod' attribute
//dataType: null // 'xml', 'script', or 'json' (expected se=
rver response type)
//clearForm: true // clear all form fields after successful =
submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#myForm2').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page =
navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string =
to display it
// but the form plugin does this for you automatically when it submits =
the data
var queryString =3D $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access=
the
// DOM element for the form do this:
// var formElement =3D jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to co=
ntinue
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callbac=
k
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataT=
ype
// property set to 'xml' then the first argument to the success callbac=
k
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataT=
ype
// property set to 'json' then the first argument to the success callba=
ck
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the respo=
nseText.');
}
</code></pre>
<form id=3D"myForm2" action=3D"http://jquery.malsup.com/for=
m/dummy2.php" method=3D"post"><div>
<input type=3D"hidden" name=3D"Hidden" value=3D"hid=
denValue">
<table>
<tbody><tr><td>Name:</td><td><input name=3D"Name" t=
ype=3D"text" value=3D"MyName2"></td></tr>
<tr><td>Password:</td><td><input name=3D"Password" =
type=3D"password"></td></tr>
<tr><td>Multiple:</td><td><select name=3D"Multiple"=
multiple=3D"multiple">
<optgroup label=3D"Group 1">
<option value=3D"one" selected=3D"selected"=
>One</option>
<option value=3D"two">Two</option>
<option value=3D"three">Three</option>
</optgroup>
<optgroup label=3D"Group 2">
<option value=3D"four">Four</option>
<option value=3D"five">Five</option>
<option value=3D"six">Six</option>
</optgroup>
</select></td></tr>
<tr><td>Single:</td><td><select name=3D"Single">
<option value=3D"one" selected=3D"selected">One=
</option>
<option value=3D"two">Two</option>
<option value=3D"three">Three</option>
</select></td></tr>
<tr><td>Single2:</td><td><select name=3D"Single2">
<optgroup label=3D"Group 1">
<option value=3D"A" selected=3D"selected">A=
</option>
<option value=3D"B">B</option>
<option value=3D"C">C</option>
</optgroup>
<optgroup label=3D"Group 2">
<option value=3D"D">D</option>
<option value=3D"E">E</option>
<option value=3D"F">F</option>
</optgroup>
</select></td></tr>
<tr><td>Check:</td><td>
<input type=3D"checkbox" name=3D"Check" value=
=3D"1">
<input type=3D"checkbox" name=3D"Check" value=
=3D"2">
<input type=3D"checkbox" name=3D"Check" value=
=3D"3">
</td></tr>
<tr><td>Radio:</td><td>
<input type=3D"radio" name=3D"Radio" value=3D"1=
">
<input type=3D"radio" name=3D"Radio" value=3D"2=
">
<input type=3D"radio" name=3D"Radio" value=3D"3=
">
</td></tr>
<tr><td>Text:</td><td><textarea name=3D"Text" rows=
=3D"2" cols=3D"20">This is Form2</textarea></td></tr>
</tbody></table>
<input type=3D"reset" name=3D"resetButton " value=
=3D"Reset">
<input type=3D"submit" name=3D"submitButton" value=
=3D"Submit1">
<input type=3D"image" name=3D"submitButton" value=
=3D"Submit2" src=3D"http://jquery.malsup.com/form/submit.gif">
</div></form>
<h1>Output Div (#output2):</h1>
<div id=3D"output2">AJAX response will replace this content=
.</div>
</div>
<div id=3D"sample3" class=3D"sampleTabContent" data-tabid=3D"va=
lidation">
<p>
This page gives several examples of how form data can be valida=
ted before it is sent to
the server. The secret is in the <code class=3D"inline">before=
Submit</code> option. If this
pre-submit callback returns false, the submit process is aborte=
d.
</p><p>
The following login form is used for each of the examples that =
follow. Each example
will validate that both the <em>username</em> and <em>password<=
/em> fields have been filled
in by the user.
</p><p>
<strong>Form Markup:</strong>
</p><pre><code class=3D"mix"><form id=3D"validationForm" act=
ion=3D"dummy.php" method=3D"post">
Username: <input type=3D"text" name=3D"username" />
Password: <input type=3D"password" name=3D"password" />
<input type=3D"submit" value=3D"Submit" />
</form></code></pre>
<p>
First, we initialize the form and give it a <code class=3D"inli=
ne">beforeSubmit</code>
callback function - this is the validation function.
</p><pre><code class=3D"mix">// prepare the form when the DOM i=
s ready
$(document).ready(function() {
// bind form using ajaxForm
$('#myForm2').ajaxForm( { beforeSubmit: validate } );
});</code></pre>
<h3>Validate Using the <code>formData</code> Argument</h3>
<form id=3D"validateForm1" action=3D"http://jquery.malsup.com/f=
orm/dummy.php" method=3D"post"><div>
Username: <input type=3D"text" name=3D"username">
Password: <input type=3D"password" name=3D"password">
<input type=3D"submit" value=3D"Submit">
</div></form>
<pre><code class=3D"mix">function validate(formData, jqForm, op=
tions) {
// formData is an array of objects representing the name and value of e=
ach field
// that will be sent to the server; it takes the following form:
//
// [
// { name: username, value: valueOfUsernameInput },
// { name: password, value: valueOfPasswordInput }
// ]
//
// To validate, we can examine the contents of this array to see if the
// username and password fields have values. If either value evaluates
// to false then we return false from this method.
for (var i=3D0; i < formData.length; i++) {
if (!formData[i].value) {
alert('Please enter a value for both Username and Password');
return false;
}
}
alert('Both fields contain values.');
}</code></pre>
<h3>Validate Using the <code>jqForm</code> Argument</h3>
<form id=3D"validateForm2" action=3D"http://jquery.malsup.com/f=
orm/dummy.php" method=3D"post"><div>
Username: <input type=3D"text" name=3D"username">
Password: <input type=3D"password" name=3D"password">
<input type=3D"submit" value=3D"Submit">
</div></form>
<pre><code class=3D"mix">function validate(formData, jqForm, op=
tions) {
// jqForm is a jQuery object which wraps the form DOM element
//
// To validate, we can access the DOM elements directly and return true
// only if the values of both the username and password fields evaluate
// to true
var form =3D jqForm[0];
if (!form.username.value || !form.password.value) {
alert('Please enter a value for both Username and Password');
return false;
}
alert('Both fields contain values.');
}</code></pre>
<h3>Validate Using the <code>fieldValue</code> Method</h3>
<form id=3D"validateForm3" action=3D"http://jquery.malsup.com/f=
orm/dummy.php" method=3D"post"><div>
Username: <input type=3D"text" name=3D"username">
Password: <input type=3D"password" name=3D"password">
<input type=3D"submit" value=3D"Submit">
</div></form>
<pre><code class=3D"mix">function validate(formData, jqForm, op=
tions) {
// fieldValue is a Form Plugin method that can be invoked to find the
// current value of a field
//
// To validate, we can capture the values of both the username and pass=
word
// fields and return true only if both evaluate to true
var usernameValue =3D $('input[name=3Dusername]').fieldValue();
var passwordValue =3D $('input[name=3Dpassword]').fieldValue();
// usernameValue and passwordValue are arrays but we can do simple
// "not" tests to see if the arrays are empty
if (!usernameValue[0] || !passwordValue[0]) {
alert('Please enter a value for both Username and Password');
return false;
}
alert('Both fields contain values.');
}</code></pre>
<p>
</p><h3>Note</h3>
You can find jQuery plugins that deal specifically with field v=
alidation
on the <a href=3D"http://docs.jquery.com/Plugins#Forms" class=
=3D"external">jQuery Plugins Page</a>.
</div>
<div id=3D"sample4" class=3D"sampleTabContent" data-tabid=3D"js=
on">
<p>
This page shows how to handle JSON data returned from the serve=
r.
</p><p>
The form below submits a message to the server and the server
echos it back in JSON format.
<br>
<strong>Form markup:</strong>
</p><pre><code class=3D"mix"><form id=3D"jsonForm" action=3D=
"json-echo.php" method=3D"post">
Message: <input type=3D"text" name=3D"message" value=3D"Hello JSON" =
/>
<input type=3D"submit" value=3D"Echo as JSON" />
</form></code></pre>
<p>
</p><form id=3D"jsonForm" action=3D"http://jquery.malsup.com/fo=
rm/json-echo.php" method=3D"post"><div>
Message: <input type=3D"text" name=3D"message" value=3D"Hel=
lo JSON">
<input type=3D"submit" value=3D"Echo as JSON">
</div></form>
<br>
<strong>Server code in</strong> <code class=3D"inline">json-ech=
o.php</code>:
<pre><code class=3D"php"><?php echo '{ "message": "' . $_PO=
ST['message'] . '" }'; ?></code></pre>
<strong>JavaScript:</strong>
<pre><code class=3D"mix">// prepare the form when the DOM is re=
ady
$(document).ready(function() {
// bind form using ajaxForm
$('#jsonForm').ajaxForm({
// dataType identifies the expected content type of the server resp=
onse
dataType: 'json',
// success identifies the function to invoke when the server respon=
se
// has been received
success: processJson
});
});</code></pre>
<strong>Callback function</strong>
<pre><code class=3D"mix">function processJson(data) {
// 'data' is the json object returned from the server
alert(data.message);
}</code></pre>
</div>
<div id=3D"sample5" class=3D"sampleTabContent" data-tabid=3D=
"xml">
<p>
This page shows how to handle XML data returned from the ser=
ver.
</p><p>
The form below submits a message to the server and the serve=
r
echos it back in XML format.
<br>
<strong>Form markup:</strong>
</p><pre><code class=3D"mix"><form id=3D"xmlForm" action=
=3D"xml-echo.php" method=3D"post">
Message: <input type=3D"text" name=3D"message" value=3D"Hello XML" /=
>
<input type=3D"submit" value=3D"Echo as XML" />
</form></code></pre>
<p>
</p><form id=3D"xmlForm" action=3D"http://jquery.malsup.com/=
form/xml-echo.php" method=3D"post"><div>
Message: <input type=3D"text" name=3D"message" value=3D"=
Hello XML">
<input type=3D"submit" value=3D"Echo as XML">
</div></form>
<br>
<strong>Server code in</strong> <code class=3D"inline">xml-e=
cho.php</code>:
<pre><code class=3D"php"><?php
// !!! IMPORTANT !!! - the server must set the content type to XML
header('Content-type: text/xml');
echo '<root><message>' . $_POST['message'] . '</message>&=
lt;/root>';
?></code></pre>
<strong>JavaScript:</strong>
<pre><code class=3D"mix">// prepare the form when the DOM is=
ready
$(document).ready(function() {
// bind form using ajaxForm
$('#xmlForm').ajaxForm({
// dataType identifies the expected content type of the server resp=
onse
dataType: 'xml',
// success identifies the function to invoke when the server respon=
se
// has been received
success: processXml
});
});</code></pre>
<strong>Callback function</strong>
<pre><code class=3D"mix">function processXml(responseXML) {
// 'responseXML' is the XML document returned by the server; we use
// jQuery to extract the content of the message node from the XML doc
var message =3D $('message', responseXML).text();
alert(message);
}</code></pre>
</div>
<div id=3D"sample6" class=3D"sampleTabContent" data-tabid=3D"ht=
ml">
<p>
This page shows how to handle HTML data returned from the serve=
r.
</p><p>
The form below submits a message to the server and the server
echos it back in an HTML div. The response is added to this
page in the <code class=3D"inline">htmlExampleTarget</code> div=
below.
<br>
<strong>Form markup:</strong>
</p><pre><code class=3D"mix"><form id=3D"htmlForm" action=3D=
"html-echo.php" method=3D"post">
Message: <input type=3D"text" name=3D"message" value=3D"Hello HTML" =
/>
<input type=3D"submit" value=3D"Echo as HTML" />
</form></code></pre>
<p>
</p><form id=3D"htmlForm" action=3D"http://jquery.malsup.com/fo=
rm/html-echo.php" method=3D"post"><div>
Message: <input type=3D"text" name=3D"message" value=3D"Hel=
lo HTML">
<input type=3D"submit" value=3D"Echo as HTML">
</div></form>
<br>
<strong>Server code in</strong> <code class=3D"inline">html-ech=
o.php</code>:
<pre><code class=3D"php"><?php
echo '<div style=3D"background-color:#ffa; padding:20px">' . $_POST['=
message'] . '</div>';
?></code></pre>
<strong>JavaScript:</strong>
<pre><code class=3D"mix">// prepare the form when the DOM is re=
ady
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server respo=
nse
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server respon=
se
// has been received; here we apply a fade-in effect to the new con=
tent
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});</code></pre>
<h3>htmlExampleTarget (output will be added below):</h3>
<div id=3D"htmlExampleTarget"></div>
</div>
<div id=3D"sample7" class=3D"sampleTabContent" data-tabid=3D"fi=
le-upload">
<p>
This page demonstrates the Form Plugin's file upload capabiliti=
es. There is no special
coding required to handle file uploads. File input elements are=
automatically
detected and processed for you.
</p><p>
Browsers that support the <a href=3D"http://www.w3.org/TR/XMLHttpRequest=
/">XMLHttpRequest Level 2</a>
will be able to upload files seamlessly and even get progress updates as=
the upload proceeds.
For older browsers, a fallback technology is used which involves iframes=
since it is
=09
not possible to upload files using the level 1 implmenentation =
of the XMLHttpRequest object.
This is a common fallback technique, but it has inherent limita=
tions. The iframe element is used as the target
of the form's submit operation which means that the server resp=
onse is written to the iframe.
This is fine if the response type is HTML or XML, but doesn't w=
ork as well if the response type is
script or JSON, both of which often contain characters that nee=
d to be repesented using entity
references when found in HTML markup.
</p><p>
To account for the challenges of script and JSON responses when=
using the iframe mode, the Form Plugin allows these responses
to be embedded in a <code class=3D"inline">textarea</code> elem=
ent and it is recommended that you
do so for these response types when used in conjuction with fil=
e uploads and older browsers.=20
</p><p>
It is important to note that even when the dataType option is s=
et to 'script', and the server is=20
actually responding with some javascript to a multipart form su=
bmission,=20
the response's Content-Type header should be forced to <code>te=
xt/html</code>, otherwise Internet
Explorer will prompt the user to download a "file".
</p><p>
Also note that if there is no file input in the form then the request us=
es normal
XHR to submit the form (not an iframe). This puts the burden o=
n your server code to know when
to use a textarea and when not to. If you like, you can use th=
e <code class=3D"inline">iframe</code>
option of the plugin to force it to always use an <em>iframe mo=
de</em> and then your server can
always embed the response in a textarea. But the recommended s=
olution is to test for the
'X-Requested-With' request header. If the value of that header is 'XMLH=
ttpRequest' then you
know that the form was posted via ajax.
The following PHP snippet shows how you can be sure to return c=
ontent successfully:
</p><pre><code class=3D"mix"><?php =09
$xhr =3D $_SERVER['HTTP_X_REQUESTED_WITH'] =3D=3D 'XMLHttpRequest';
if (!$xhr)=20
echo '<textarea>';
?>
// main content of response here
=09
<?php
if (!$xhr) =20
echo '</textarea>';
?>
</code></pre>
<p></p><p>
The form below provides an input element of type "file" along w=
ith a select element
to specify the dataType of the response. The form is submitted=
to
<code class=3D"inline"><a href=3D"http://jquery.malsup.com/form=
/files-raw.php">files.php</a></code> which uses the dataType to
determine what type of response to return.
</p>
<form id=3D"uploadForm" action=3D"http://jquery.malsup.com/form=
/files.php" method=3D"POST" enctype=3D"multipart/form-data">
<input type=3D"hidden" name=3D"MAX_FILE_SIZE" value=3D"1000=
00">
File: <input type=3D"file" name=3D"file">
Return Type: <select id=3D"uploadResponseType" name=3D"mime=
type">
<option value=3D"html">html</option>
<option value=3D"json">json</option>
<option value=3D"script">script</option>
<option value=3D"xml">xml</option>
</select>
<input type=3D"submit" value=3D"Submit 1" name=3D"uploadSub=
mitter1">
<input type=3D"submit" value=3D"Submit 2" name=3D"uploadSub=
mitter2">
</form>
<p>
<label>Output:</label>
</p><div id=3D"uploadOutput"></div>
<div style=3D"margin-top: 25px">
<p>Examples that show how to display upload progress:</p>
<ul>
<li><a href=3D"http://jquery.malsup.com/form/progress.html">Progress D=
emo 1</a>
</li><li><a href=3D"http://jquery.malsup.com/form/progress2.html">Prog=
ress Demo 2</a>
</li><li><a href=3D"http://jquery.malsup.com/form/progress3.html">Prog=
ress Demo 3</a>
</li></ul>
</div>
</div>
</div>
</div>
<div id=3D"tab5" data-tabid=3D"fields">
<h1>Working With Fields</h1>
This page describes and demonstrates the Form Plugin's <cod=
e class=3D"inline">fieldValue</code> and
<code class=3D"inline">fieldSerialize</code> methods.
<p>
</p><h2>fieldValue</h2>
<code class=3D"inline">fieldValue</code>
allows you to retrieve the current value of a field. For e=
xample, to retrieve the value of the password
field in a form with the id of 'myForm' you would write:
<pre><code class=3D"mix">var pwd =3D $('#myForm :password')=
.fieldValue()[0];</code></pre>
This method <strong>always</strong> returns an array. If n=
o valid value can be determined the
array will be empty, otherwise it will contain one or more =
values.
<p>
</p><h2>fieldSerialize</h2>
<code class=3D"inline">fieldSerialize</code> allows you to =
serialize a subset of a form into a
query string. This is useful when you need to process only=
certain fields. For example,
to serialize only the text inputs of a form you would write=
:
<pre><code class=3D"mix">var queryString =3D $('#myForm :te=
xt').fieldSerialize();</code></pre>
<form id=3D"inputForm" action=3D"http://jquery.malsup.com/f=
orm/#"><div>
<strong>Demonstration</strong><p>
Enter a jQuery expression into the textbox below and th=
en click 'Test' to see the results
of the <code class=3D"inline">fieldValue</code> and <co=
de class=3D"inline">fieldSerialize</code>
methods. These methods are run against the test form t=
hat follows.</p><p>
jQuery expression:
<input id=3D"query" type=3D"text" value=3D":text">
<span style=3D"color:#555">(ie: textarea, [@type=3D'hid=
den'], :radio, :checkbox, etc)</span>
<br><input id=3D"successful" type=3D"checkbox" checked=
=3D"checked"> Successful controls only <sup>[1]</sup>
</p><p><input type=3D"submit" value=3D"Test">
</p></div></form>
<br>
<form id=3D"test" action=3D"http://jquery.malsup.com/form/d=
ummy.php" method=3D"post"><div>
<strong>Test Form</strong>
<p>
</p><table>
<tbody><tr><td><input type=3D"hidden" <span class=3D=
"name">name=3D"Hidden"</span> value=3D"secret" /></td><td><input type=3D=
"hidden" name=3D"Hidden" value=3D"secret"></td></tr>
<tr><td><input <span class=3D"name">name=3D"Name"</s=
pan> type=3D"text" value=3D"MyName1" /></td><td><input name=3D"Name" typ=
e=3D"text" value=3D"MyName1"></td></tr>
<tr><td><input <span class=3D"name">name=3D"Password=
"</span> type=3D"password" /></td><td><input name=3D"Password" type=3D"p=
assword" value=3D""></td></tr>
<tr><td><select <span class=3D"name">name=3D"Multipl=
e"</span> multiple=3D"multiple"></td><td><select name=3D"Multiple" multi=
ple=3D"multiple">
<option value=3D"one" selected=3D"selected">One</op=
tion>
<option value=3D"two">Two</option>
<option value=3D"three">Three</option>
</select></td></tr>
<tr><td><select <span class=3D"name">name=3D"Single"=
</span>></td><td><select name=3D"Single">
<option value=3D"one" selected=3D"selected">One</op=
tion>
<option value=3D"two">Two</option>
<option value=3D"three">Three</option>
</select></td></tr>
<tr><td><input type=3D"checkbox" <span class=3D"name=
">name=3D"Check"</span> value=3D"1" /></td><td><input type=3D"checkbox" =
name=3D"Check" value=3D"1"></td></tr>
<tr><td><input type=3D"checkbox" <span class=3D"name=
">name=3D"Check"</span> value=3D"2" /></td><td><input type=3D"checkbox" =
name=3D"Check" value=3D"2"></td></tr>
<tr><td><input type=3D"checkbox" <span class=3D"name=
">name=3D"Check"</span> value=3D"3" /></td><td><input type=3D"checkbox" =
name=3D"Check" value=3D"3"></td></tr>
<tr><td><input type=3D"checkbox" <span class=3D"name=
">name=3D"Check2"</span> value=3D"4" /></td><td><input type=3D"checkbox"=
name=3D"Check2" value=3D"4"></td></tr>
<tr><td><input type=3D"checkbox" <span class=3D"name=
">name=3D"Check2"</span> value=3D"5" /></td><td><input type=3D"checkbox"=
name=3D"Check2" value=3D"5"></td></tr>
<tr><td><input type=3D"checkbox" <span class=3D"name=
">name=3D"Check3"</span> /></td><td><input type=3D"checkbox" name=3D"Che=
ck3"></td></tr>
<tr><td><input type=3D"radio" <span class=3D"name">n=
ame=3D"Radio"</span> value=3D"1" /></td><td><input type=3D"radio" name=
=3D"Radio" value=3D"1"></td></tr>
<tr><td><input type=3D"radio" <span class=3D"name">n=
ame=3D"Radio"</span> value=3D"2" /></td><td><input type=3D"radio" name=
=3D"Radio" value=3D"2"></td></tr>
<tr><td><input type=3D"radio" <span class=3D"name">n=
ame=3D"Radio"</span> value=3D"3" /></td><td><input type=3D"radio" name=
=3D"Radio" value=3D"3"></td></tr>
<tr><td><input type=3D"radio" <span class=3D"name">n=
ame=3D"Radio2"</span> value=3D"4" /></td><td><input type=3D"radio" name=
=3D"Radio2" value=3D"4"></td></tr>
<tr><td><input type=3D"radio" <span class=3D"name">n=
ame=3D"Radio2"</span> value=3D"5" /></td><td><input type=3D"radio" name=
=3D"Radio2" value=3D"5"></td></tr>
<tr><td><textarea <span class=3D"name">name=3D"Text"=
</span> rows=3D"2" cols=3D"20"></textarea></td><td><textarea name=
=3D"Text" rows=3D"2" cols=3D"20"></textarea></td></tr>
<tr><td><input type=3D"reset" <span class=3D"name">n=
ame=3D"resetButton"</span> value=3D"Reset" /></td><td><input type=3D"res=
et" name=3D"resetButton" value=3D"Reset"></td></tr>
<tr><td><input type=3D"submit" <span class=3D"name">=
name=3D"sub"</span> value=3D"Submit" /></td><td><input type=3D"submit" n=
ame=3D"submitButton" value=3D"Submit"></td></tr>
</tbody></table>
</div></form>
<p>
[1] <a class=3D"external" href=3D"http://www.w3.org/TR/html=
4/interact/forms.html#successful-controls">http://www.w3.org/TR/html4/inter=
act/forms.html#successful-controls</a>.
</p><p>By default, <code class=3D"inline">fieldValue</code>=
and <code class=3D"inline">fieldSerialize</code> only function on
'successful controls'. This means that if you run the foll=
owing code on a checkbox that is not checked, the result will
be an empty array.
</p><pre><code class=3D"mix">// value will be an empty arra=
y if checkbox is not checked:
var value =3D $('#myUncheckedCheckbox').fieldValue();
// value.length =3D=3D 0
</code></pre>
However, if you really want to know the 'value' of the chec=
kbox element, even if it's unchecked, you can
write this:
<pre><code class=3D"mix">// value will hold the checkbox va=
lue even if it's not checked:
var value =3D $('#myUncheckedCheckbox').fieldValue(false);
// value.length =3D=3D 1
</code></pre>
</div>
<div id=3D"tab6" data-tabid=3D"faq">
<h1>Frequently Asked Questions</h1>
<dl>
<dt>What versions of jQuery is the Form Plugin compatible with?</dt=
>
<dd>The Form Plugin is compatible with jQuery v1.5 and later.</dd>
<dt>Does the Form Plugin have any dependencies on other plugins?</d=
t>
<dd>No.</dd>
<dt>Is the Form Plugin fast? Does it serialize forms accurately?</=
dt>
<dd>Yes! See our <a href=3D"http://jquery.malsup.com/form/comp/">c=
omparison page</a> for a look at how the Form Plugin compares to other libr=
aries (including Prototype and dojo).</dd>
<dt>What is the easiet way to use the Form Plugin?</dt>
<dd><code class=3D"inline">ajaxForm</code> provides the simplest wa=
y to enable your HTML form to use AJAX. It's the one-stop-shopping
method for preparing forms.</dd>
<dt>What is the difference between <code class=3D"inline">ajaxForm<=
/code> and <code class=3D"inline">ajaxSubmit</code>?</dt>
<dd>There are two main differences between these methods:
<ol>
<li><code class=3D"inline">ajaxSubmit</code> submits the fo=
rm, <code class=3D"inline">ajaxForm</code> does not. When you invoke <code=
class=3D"inline">ajaxSubmit</code>
it immediately serializes the
form data and sends it to the server. When you invoke =
<code class=3D"inline">ajaxForm</code> it adds the necessary event listener=
s to the form
so that it can detect when the form is submitted by the=
user. When this occurs <code class=3D"inline">ajaxSubmit</code> is called=
for you.
</li>
<li>When using <code class=3D"inline">ajaxForm</code> the s=
ubmitted data will include the name and value of the submitting element (or=
its click coordinates if the
submitting element is an image).</li>
</ol>
</dd>
<dt>How can I cancel a form submit?</dt>
<dd>You can prevent a form from being submitted by adding a 'before=
Submit' callback
function and returning false from that function. See the Code =
Samples page
for an example.</dd>
<dt>Is there a unit test suite for the Form Plugin?</dt>
<dd>Yes! The Form Plugin has an extensive set of tests that are us=
ed to validate its functionality.
<a href=3D"http://jquery.malsup.com/form/test/">Run unit tests.</a>
</dd>
<dt>Does the Form Plugin support file uploads?</dt>
<dd>Yes!</dd>
<dt>Why aren't all my input values posted?</dt>
<dd>jQuery form serialization aheres closely to the HTML spec. Onl=
y=20
<a class=3D"external" href=3D"http://www.w3.org/TR/html401/interac=
t/forms.html#h-17.13.2">successful controls</a>=20
are valid for submission.</dd>
<dt>How do I display upload progress information?</dt>
<dd><a href=3D"http://jquery.malsup.com/form/progress.html">Demo</a=
></dd>
</dl>
</div>
<div id=3D"tab7" data-tabid=3D"download">
<h1>Download</h1>
<p>
The Official Form Plugin is available here: <a href=3D"http://malsup.gith=
ub.com/jquery.form.js">jquery.form.js</a> or from
the plugin's <a class=3D"external" href=3D"http://github.com/malsup/form/=
">Github repository</a>.
</p><p>
Minified version: <a href=3D"http://malsup.github.com/min/jquery.f=
orm.min.js">jquery.form.min.js</a>
</p><p>
There are many other useful <a class=3D"external" href=3D"http://do=
cs.jquery.com/Plugins#Forms">Form Plugins</a>
available from the <a class=3D"external" href=3D"http://docs.jquery=
.com/Plugins">jQuery Plugins</a> page.
</p><p>
</p><h1>Support</h1>
Support for the Form Plugin is available through the
<a class=3D"external" href=3D"http://groups.google.com/group/jquery=
-en/topics">jQuery Google Group</a>.
This is a very active group to which many jQuery developers and users sub=
scribe.
<p>
</p><h1>Contributors</h1>
<p>
Development of the Form Plugin was a community effort with many peo=
ple contributing ideas and code.
The following people have made contributions of one kind or another=
:
</p>
<ul>
<li>John Resig</li>
<li>Mike Alsup</li>
<li>Mark Constable</li>
<li>Klaus Hartl</li>
<li>Matt Grimm</li>
<li>Yehuda Katz</li>
<li>J=C3=B6rn Zaefferer</li>
<li>Sam Collett</li>
<li>Gilles van den Hoven</li>
<li>Kevin Glowacz</li>
<li>Alex Andrienko</li>
</ul>
<p><em>Send me an email if I've forgotten someone.</em></p>
<div style=3D"clear:both;margin:10px auto;width:728px">
<ins id=3D"aswift_1_expand" style=3D"display:inline-table;border:none;heigh=
t:15px;margin:0;padding:0;position:relative;visibility:visible;width:728px;=
background-color:transparent"><ins id=3D"aswift_1_anchor" style=3D"display:=
block;border:none;height:15px;margin:0;padding:0;position:relative;visibili=
ty:visible;width:728px;background-color:transparent"><iframe width=3D"728" =
height=3D"15" frameborder=3D"0" marginwidth=3D"0" marginheight=3D"0" vspace=
=3D"0" hspace=3D"0" allowtransparency=3D"true" scrolling=3D"no" allowfullsc=
reen=3D"true" onload=3D"var i=3Dthis.id,s=3Dwindow.google_iframe_oncopy,H=
=3Ds&&s.handlers,h=3DH&&H[i],w=3Dthis.contentWindow,d;try{d=
=3Dw.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChi=
ld)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=3Ds.upd(h,i)}catch(e=
){}w.location.replace(h)}}" id=3D"aswift_1" name=3D"aswift_1" style=3D"left=
:0;position:absolute;top:0;"></iframe></ins></ins>
</div> =20
<div id=3D"footer">
This site is maintained by Mike Alsup.
</div>
</div>
</div>
</body></html>
------=_NextPart_000_0F17_6C563163.865486AA
Content-Type: text/css
Content-Transfer-Encoding: quoted-printable
Content-Location: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/black-tie/jquery-ui.css
------=_NextPart_000_0F17_6C563163.865486AA
Content-Type: text/css
Content-Transfer-Encoding: quoted-printable
Content-Location: http://jquery.malsup.com/themes/jquery-ui-sub-tabs-smoothness.css
#sub-tabs .ui-helper-hidden { display: none; }
#sub-tabs .ui-helper-hidden-accessible { position: absolute; left: -9999999=
9px; }
#sub-tabs .ui-helper-reset { margin: 0px; padding: 0px; border: 0px; outlin=
e: 0px; line-height: 1.3; text-decoration: none; font-size: 100%; list-styl=
e: none; }
#sub-tabs .ui-helper-clearfix::after { content: '.'; display: block; height=
: 0px; clear: both; visibility: hidden; }
#sub-tabs .ui-helper-clearfix { display: inline-block; }
* html .ui-helper-clearfix { height: 1%; }
#sub-tabs .ui-helper-clearfix { display: block; }
#sub-tabs .ui-helper-zfix { width: 100%; height: 100%; top: 0px; left: 0px;=
position: absolute; opacity: 0; }
#sub-tabs .ui-state-disabled { cursor: default !important; }
#sub-tabs .ui-icon { display: block; text-indent: -99999px; overflow: hidde=
n; background-repeat: no-repeat no-repeat; }
#sub-tabs .ui-widget-overlay { position: absolute; top: 0px; left: 0px; wid=
th: 100%; height: 100%; }
#sub-tabs .ui-widget { font-family: Verdana, Arial, sans-serif; font-size: =
1.1em; }
#sub-tabs .ui-widget input, #sub-tabs .ui-widget select, #sub-tabs .ui-widg=
et textarea, #sub-tabs .ui-widget button { font-family: Verdana, Arial, san=
s-serif; font-size: 1em; }
#sub-tabs .ui-widget-content { border: 1px solid rgb(170, 170, 170); backgr=
ound-image: url(http://jquery.malsup.com/themes/images/ui-bg_flat_75_ffffff=
_40x100.png); background-color: rgb(255, 255, 255); color: rgb(34, 34, 34);=
background-position: 50% 50%; background-repeat: repeat no-repeat; }
#sub-tabs .ui-widget-content a { color: rgb(34, 34, 34); }
#sub-tabs .ui-widget-header { border: 1px solid rgb(170, 170, 170); backgro=
und-image: url(http://jquery.malsup.com/themes/images/ui-bg_highlight-soft_=
75_cccccc_1x100.png); background-color: rgb(204, 204, 204); color: rgb(34, =
34, 34); font-weight: bold; background-position: 50% 50%; background-repeat=
: repeat no-repeat; }
#sub-tabs .ui-widget-header a { color: rgb(34, 34, 34); }
#sub-tabs .ui-state-default, #sub-tabs .ui-widget-content .ui-state-default=
{ border: 1px solid rgb(211, 211, 211); background-image: url(http://jquer=
y.malsup.com/themes/images/ui-bg_glass_75_e6e6e6_1x400.png); background-col=
or: rgb(230, 230, 230); font-weight: normal; color: rgb(85, 85, 85); outlin=
e: none; background-position: 50% 50%; background-repeat: repeat no-repeat;=
}
#sub-tabs .ui-state-default a, #sub-tabs .ui-state-default a:link, #sub-tab=
s .ui-state-default a:visited { color: rgb(85, 85, 85); text-decoration: no=
ne; outline: none; }
#sub-tabs .ui-state-hover, #sub-tabs .ui-widget-content .ui-state-hover, #s=
ub-tabs .ui-state-focus, #sub-tabs .ui-widget-content .ui-state-focus { bor=
der: 1px solid rgb(153, 153, 153); background-image: url(http://jquery.mals=
up.com/themes/images/ui-bg_glass_75_dadada_1x400.png); background-color: rg=
b(218, 218, 218); font-weight: normal; color: rgb(33, 33, 33); outline: non=
e; background-position: 50% 50%; background-repeat: repeat no-repeat; }
#sub-tabs .ui-state-hover a, #sub-tabs .ui-state-hover a:hover { color: rgb=
(33, 33, 33); text-decoration: none; outline: none; }
#sub-tabs .ui-state-active, #sub-tabs .ui-widget-content .ui-state-active {=
border: 1px solid rgb(170, 170, 170); background-image: url(http://jquery.=
malsup.com/themes/images/ui-bg_glass_65_ffffff_1x400.png); background-color=
: rgb(255, 255, 255); font-weight: normal; color: rgb(33, 33, 33); outline:=
none; background-position: 50% 50%; background-repeat: repeat no-repeat; }
#sub-tabs .ui-state-active a, #sub-tabs .ui-state-active a:link, #sub-tabs =
.ui-state-active a:visited { color: rgb(33, 33, 33); outline: none; text-de=
coration: none; }
#sub-tabs .ui-state-highlight, #sub-tabs .ui-widget-content .ui-state-highl=
ight { border: 1px solid rgb(252, 239, 161); background-image: url(http://j=
query.malsup.com/themes/images/ui-bg_glass_55_fbf9ee_1x400.png); background=
-color: rgb(251, 249, 238); color: rgb(54, 54, 54); background-position: 50=
% 50%; background-repeat: repeat no-repeat; }
#sub-tabs .ui-state-highlight a, #sub-tabs .ui-widget-content .ui-state-hig=
hlight a { color: rgb(54, 54, 54); }
#sub-tabs .ui-state-error, #sub-tabs .ui-widget-content .ui-state-error { b=
order: 1px solid rgb(205, 10, 10); background-image: url(http://jquery.mals=
up.com/themes/images/ui-bg_glass_95_fef1ec_1x400.png); background-color: rg=
b(254, 241, 236); color: rgb(205, 10, 10); background-position: 50% 50%; ba=
ckground-repeat: repeat no-repeat; }
#sub-tabs .ui-state-error a, #sub-tabs .ui-widget-content .ui-state-error a=
{ color: rgb(205, 10, 10); }
#sub-tabs .ui-state-error-text, #sub-tabs .ui-widget-content .ui-state-erro=
r-text { color: rgb(205, 10, 10); }
#sub-tabs .ui-state-disabled, #sub-tabs .ui-widget-content .ui-state-disabl=
ed { opacity: 0.35; background-image: none; }
#sub-tabs .ui-priority-primary, #sub-tabs .ui-widget-content .ui-priority-p=
rimary { font-weight: bold; }
#sub-tabs .ui-priority-secondary, #sub-tabs .ui-widget-content .ui-priority=
-secondary { opacity: 0.7; font-weight: normal; }
#sub-tabs .ui-icon { width: 16px; height: 16px; background-image: url(http:=
//jquery.malsup.com/themes/images/ui-icons_222222_256x240.png); }
#sub-tabs .ui-widget-content .ui-icon { background-image: url(http://jquery=
.malsup.com/themes/images/ui-icons_222222_256x240.png); }
#sub-tabs .ui-widget-header .ui-icon { background-image: url(http://jquery.=
malsup.com/themes/images/ui-icons_222222_256x240.png); }
#sub-tabs .ui-state-default .ui-icon { background-image: url(http://jquery.=
malsup.com/themes/images/ui-icons_888888_256x240.png); }
#sub-tabs .ui-state-hover .ui-icon, #sub-tabs .ui-state-focus .ui-icon { ba=
ckground-image: url(http://jquery.malsup.com/themes/images/ui-icons_454545_=
256x240.png); }
#sub-tabs .ui-state-active .ui-icon { background-image: url(http://jquery.m=
alsup.com/themes/images/ui-icons_454545_256x240.png); }
#sub-tabs .ui-state-highlight .ui-icon { background-image: url(http://jquer=
y.malsup.com/themes/images/ui-icons_2e83ff_256x240.png); }
#sub-tabs .ui-state-error .ui-icon, #sub-tabs .ui-state-error-text .ui-icon=
{ background-image: url(http://jquery.malsup.com/themes/images/ui-icons_cd=
0a0a_256x240.png); }
#sub-tabs .ui-icon-carat-1-n { background-position: 0px 0px; }
#sub-tabs .ui-icon-carat-1-ne { background-position: -16px 0px; }
#sub-tabs .ui-icon-carat-1-e { background-position: -32px 0px; }
#sub-tabs .ui-icon-carat-1-se { background-position: -48px 0px; }
#sub-tabs .ui-icon-carat-1-s { background-position: -64px 0px; }
#sub-tabs .ui-icon-carat-1-sw { background-position: -80px 0px; }
#sub-tabs .ui-icon-carat-1-w { background-position: -96px 0px; }
#sub-tabs .ui-icon-carat-1-nw { background-position: -112px 0px; }
#sub-tabs .ui-icon-carat-2-n-s { background-position: -128px 0px; }
#sub-tabs .ui-icon-carat-2-e-w { background-position: -144px 0px; }
#sub-tabs .ui-icon-triangle-1-n { background-position: 0px -16px; }
#sub-tabs .ui-icon-triangle-1-ne { background-position: -16px -16px; }
#sub-tabs .ui-icon-triangle-1-e { background-position: -32px -16px; }
#sub-tabs .ui-icon-triangle-1-se { background-position: -48px -16px; }
#sub-tabs .ui-icon-triangle-1-s { background-position: -64px -16px; }
#sub-tabs .ui-icon-triangle-1-sw { background-position: -80px -16px; }
#sub-tabs .ui-icon-triangle-1-w { background-position: -96px -16px; }
#sub-tabs .ui-icon-triangle-1-nw { background-position: -112px -16px; }
#sub-tabs .ui-icon-triangle-2-n-s { background-position: -128px -16px; }
#sub-tabs .ui-icon-triangle-2-e-w { background-position: -144px -16px; }
#sub-tabs .ui-icon-arrow-1-n { background-position: 0px -32px; }
#sub-tabs .ui-icon-arrow-1-ne { background-position: -16px -32px; }
#sub-tabs .ui-icon-arrow-1-e { background-position: -32px -32px; }
#sub-tabs .ui-icon-arrow-1-se { background-position: -48px -32px; }
#sub-tabs .ui-icon-arrow-1-s { background-position: -64px -32px; }
#sub-tabs .ui-icon-arrow-1-sw { background-position: -80px -32px; }
#sub-tabs .ui-icon-arrow-1-w { background-position: -96px -32px; }
#sub-tabs .ui-icon-arrow-1-nw { background-position: -112px -32px; }
#sub-tabs .ui-icon-arrow-2-n-s { background-position: -128px -32px; }
#sub-tabs .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
#sub-tabs .ui-icon-arrow-2-e-w { background-position: -160px -32px; }
#sub-tabs .ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
#sub-tabs .ui-icon-arrowstop-1-n { background-position: -192px -32px; }
#sub-tabs .ui-icon-arrowstop-1-e { background-position: -208px -32px; }
#sub-tabs .ui-icon-arrowstop-1-s { background-position: -224px -32px; }
#sub-tabs .ui-icon-arrowstop-1-w { background-position: -240px -32px; }
#sub-tabs .ui-icon-arrowthick-1-n { background-position: 0px -48px; }
#sub-tabs .ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
#sub-tabs .ui-icon-arrowthick-1-e { background-position: -32px -48px; }
#sub-tabs .ui-icon-arrowthick-1-se { background-position: -48px -48px; }
#sub-tabs .ui-icon-arrowthick-1-s { background-position: -64px -48px; }
#sub-tabs .ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
#sub-tabs .ui-icon-arrowthick-1-w { background-position: -96px -48px; }
#sub-tabs .ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
#sub-tabs .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
#sub-tabs .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; =
}
#sub-tabs .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
#sub-tabs .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; =
}
#sub-tabs .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; =
}
#sub-tabs .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; =
}
#sub-tabs .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; =
}
#sub-tabs .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; =
}
#sub-tabs .ui-icon-arrowreturnthick-1-w { background-position: 0px -64px; }
#sub-tabs .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px;=
}
#sub-tabs .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px;=
}
#sub-tabs .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px;=
}
#sub-tabs .ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
#sub-tabs .ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
#sub-tabs .ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
#sub-tabs .ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
#sub-tabs .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
#sub-tabs .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
#sub-tabs .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
#sub-tabs .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
#sub-tabs .ui-icon-arrow-4 { background-position: 0px -80px; }
#sub-tabs .ui-icon-arrow-4-diag { background-position: -16px -80px; }
#sub-tabs .ui-icon-extlink { background-position: -32px -80px; }
#sub-tabs .ui-icon-newwin { background-position: -48px -80px; }
#sub-tabs .ui-icon-refresh { background-position: -64px -80px; }
#sub-tabs .ui-icon-shuffle { background-position: -80px -80px; }
#sub-tabs .ui-icon-transfer-e-w { background-position: -96px -80px; }
#sub-tabs .ui-icon-transferthick-e-w { background-position: -112px -80px; }
#sub-tabs .ui-icon-folder-collapsed { background-position: 0px -96px; }
#sub-tabs .ui-icon-folder-open { background-position: -16px -96px; }
#sub-tabs .ui-icon-document { background-position: -32px -96px; }
#sub-tabs .ui-icon-document-b { background-position: -48px -96px; }
#sub-tabs .ui-icon-note { background-position: -64px -96px; }
#sub-tabs .ui-icon-mail-closed { background-position: -80px -96px; }
#sub-tabs .ui-icon-mail-open { background-position: -96px -96px; }
#sub-tabs .ui-icon-suitcase { background-position: -112px -96px; }
#sub-tabs .ui-icon-comment { background-position: -128px -96px; }
#sub-tabs .ui-icon-person { background-position: -144px -96px; }
#sub-tabs .ui-icon-print { background-position: -160px -96px; }
#sub-tabs .ui-icon-trash { background-position: -176px -96px; }
#sub-tabs .ui-icon-locked { background-position: -192px -96px; }
#sub-tabs .ui-icon-unlocked { background-position: -208px -96px; }
#sub-tabs .ui-icon-bookmark { background-position: -224px -96px; }
#sub-tabs .ui-icon-tag { background-position: -240px -96px; }
#sub-tabs .ui-icon-home { background-position: 0px -112px; }
#sub-tabs .ui-icon-flag { background-position: -16px -112px; }
#sub-tabs .ui-icon-calendar { background-position: -32px -112px; }
#sub-tabs .ui-icon-cart { background-position: -48px -112px; }
#sub-tabs .ui-icon-pencil { background-position: -64px -112px; }
#sub-tabs .ui-icon-clock { background-position: -80px -112px; }
#sub-tabs .ui-icon-disk { background-position: -96px -112px; }
#sub-tabs .ui-icon-calculator { background-position: -112px -112px; }
#sub-tabs .ui-icon-zoomin { background-position: -128px -112px; }
#sub-tabs .ui-icon-zoomout { background-position: -144px -112px; }
#sub-tabs .ui-icon-search { background-position: -160px -112px; }
#sub-tabs .ui-icon-wrench { background-position: -176px -112px; }
#sub-tabs .ui-icon-gear { background-position: -192px -112px; }
#sub-tabs .ui-icon-heart { background-position: -208px -112px; }
#sub-tabs .ui-icon-star { background-position: -224px -112px; }
#sub-tabs .ui-icon-link { background-position: -240px -112px; }
#sub-tabs .ui-icon-cancel { background-position: 0px -128px; }
#sub-tabs .ui-icon-plus { background-position: -16px -128px; }
#sub-tabs .ui-icon-plusthick { background-position: -32px -128px; }
#sub-tabs .ui-icon-minus { background-position: -48px -128px; }
#sub-tabs .ui-icon-minusthick { background-position: -64px -128px; }
#sub-tabs .ui-icon-close { background-position: -80px -128px; }
#sub-tabs .ui-icon-closethick { background-position: -96px -128px; }
#sub-tabs .ui-icon-key { background-position: -112px -128px; }
#sub-tabs .ui-icon-lightbulb { background-position: -128px -128px; }
#sub-tabs .ui-icon-scissors { background-position: -144px -128px; }
#sub-tabs .ui-icon-clipboard { background-position: -160px -128px; }
#sub-tabs .ui-icon-copy { background-position: -176px -128px; }
#sub-tabs .ui-icon-contact { background-position: -192px -128px; }
#sub-tabs .ui-icon-image { background-position: -208px -128px; }
#sub-tabs .ui-icon-video { background-position: -224px -128px; }
#sub-tabs .ui-icon-script { background-position: -240px -128px; }
#sub-tabs .ui-icon-alert { background-position: 0px -144px; }
#sub-tabs .ui-icon-info { background-position: -16px -144px; }
#sub-tabs .ui-icon-notice { background-position: -32px -144px; }
#sub-tabs .ui-icon-help { background-position: -48px -144px; }
#sub-tabs .ui-icon-check { background-position: -64px -144px; }
#sub-tabs .ui-icon-bullet { background-position: -80px -144px; }
#sub-tabs .ui-icon-radio-off { background-position: -96px -144px; }
#sub-tabs .ui-icon-radio-on { background-position: -112px -144px; }
#sub-tabs .ui-icon-pin-w { background-position: -128px -144px; }
#sub-tabs .ui-icon-pin-s { background-position: -144px -144px; }
#sub-tabs .ui-icon-play { background-position: 0px -160px; }
#sub-tabs .ui-icon-pause { background-position: -16px -160px; }
#sub-tabs .ui-icon-seek-next { background-position: -32px -160px; }
#sub-tabs .ui-icon-seek-prev { background-position: -48px -160px; }
#sub-tabs .ui-icon-seek-end { background-position: -64px -160px; }
#sub-tabs .ui-icon-seek-first { background-position: -80px -160px; }
#sub-tabs .ui-icon-stop { background-position: -96px -160px; }
#sub-tabs .ui-icon-eject { background-position: -112px -160px; }
#sub-tabs .ui-icon-volume-off { background-position: -128px -160px; }
#sub-tabs .ui-icon-volume-on { background-position: -144px -160px; }
#sub-tabs .ui-icon-power { background-position: 0px -176px; }
#sub-tabs .ui-icon-signal-diag { background-position: -16px -176px; }
#sub-tabs .ui-icon-signal { background-position: -32px -176px; }
#sub-tabs .ui-icon-battery-0 { background-position: -48px -176px; }
#sub-tabs .ui-icon-battery-1 { background-position: -64px -176px; }
#sub-tabs .ui-icon-battery-2 { background-position: -80px -176px; }
#sub-tabs .ui-icon-battery-3 { background-position: -96px -176px; }
#sub-tabs .ui-icon-circle-plus { background-position: 0px -192px; }
#sub-tabs .ui-icon-circle-minus { background-position: -16px -192px; }
#sub-tabs .ui-icon-circle-close { background-position: -32px -192px; }
#sub-tabs .ui-icon-circle-triangle-e { background-position: -48px -192px; }
#sub-tabs .ui-icon-circle-triangle-s { background-position: -64px -192px; }
#sub-tabs .ui-icon-circle-triangle-w { background-position: -80px -192px; }
#sub-tabs .ui-icon-circle-triangle-n { background-position: -96px -192px; }
#sub-tabs .ui-icon-circle-arrow-e { background-position: -112px -192px; }
#sub-tabs .ui-icon-circle-arrow-s { background-position: -128px -192px; }
#sub-tabs .ui-icon-circle-arrow-w { background-position: -144px -192px; }
#sub-tabs .ui-icon-circle-arrow-n { background-position: -160px -192px; }
#sub-tabs .ui-icon-circle-zoomin { background-position: -176px -192px; }
#sub-tabs .ui-icon-circle-zoomout { background-position: -192px -192px; }
#sub-tabs .ui-icon-circle-check { background-position: -208px -192px; }
#sub-tabs .ui-icon-circlesmall-plus { background-position: 0px -208px; }
#sub-tabs .ui-icon-circlesmall-minus { background-position: -16px -208px; }
#sub-tabs .ui-icon-circlesmall-close { background-position: -32px -208px; }
#sub-tabs .ui-icon-squaresmall-plus { background-position: -48px -208px; }
#sub-tabs .ui-icon-squaresmall-minus { background-position: -64px -208px; }
#sub-tabs .ui-icon-squaresmall-close { background-position: -80px -208px; }
#sub-tabs .ui-icon-grip-dotted-vertical { background-position: 0px -224px; =
}
#sub-tabs .ui-icon-grip-dotted-horizontal { background-position: -16px -224=
px; }
#sub-tabs .ui-icon-grip-solid-vertical { background-position: -32px -224px;=
}
#sub-tabs .ui-icon-grip-solid-horizontal { background-position: -48px -224p=
x; }
#sub-tabs .ui-icon-gripsmall-diagonal-se { background-position: -64px -224p=
x; }
#sub-tabs .ui-icon-grip-diagonal-se { background-position: -80px -224px; }
#sub-tabs .ui-corner-tl { border-top-left-radius: 4px; }
#sub-tabs .ui-corner-tr { border-top-right-radius: 4px; }
#sub-tabs .ui-corner-bl { border-bottom-left-radius: 4px; }
#sub-tabs .ui-corner-br { border-bottom-right-radius: 4px; }
#sub-tabs .ui-corner-top { border-top-left-radius: 4px; border-top-right-ra=
dius: 4px; }
#sub-tabs .ui-corner-bottom { border-bottom-left-radius: 4px; border-bottom=
-right-radius: 4px; }
#sub-tabs .ui-corner-right { border-top-right-radius: 4px; border-bottom-ri=
ght-radius: 4px; }
#sub-tabs .ui-corner-left { border-top-left-radius: 4px; border-bottom-left=
-radius: 4px; }
#sub-tabs .ui-corner-all { border-top-left-radius: 4px; border-top-right-ra=
dius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;=
}
#sub-tabs .ui-widget-overlay { background-image: url(http://jquery.malsup.c=
om/themes/images/ui-bg_flat_0_aaaaaa_40x100.png); background-color: rgb(170=
, 170, 170); opacity: 0.3; background-position: 50% 50%; background-repeat:=
repeat no-repeat; }
#sub-tabs .ui-widget-shadow { margin: -8px 0px 0px -8px; padding: 8px; back=
ground-image: url(http://jquery.malsup.com/themes/images/ui-bg_flat_0_aaaaa=
a_40x100.png); background-color: rgb(170, 170, 170); opacity: 0.3; border-t=
op-left-radius: 8px; border-top-right-radius: 8px; border-bottom-right-radi=
us: 8px; border-bottom-left-radius: 8px; background-position: 50% 50%; back=
ground-repeat: repeat no-repeat; }
#sub-tabs .ui-accordion .ui-accordion-header { cursor: pointer; position: r=
elative; margin-top: 1px; zoom: 1; }
#sub-tabs .ui-accordion .ui-accordion-li-fix { display: inline; }
#sub-tabs .ui-accordion .ui-accordion-header-active { border-bottom-width: =
0px !important; }
#sub-tabs .ui-accordion .ui-accordion-header a { display: block; font-size:=
1em; padding: 0.5em 0.5em 0.5em 2.2em; }
#sub-tabs .ui-accordion .ui-accordion-header .ui-icon { position: absolute;=
left: 0.5em; top: 50%; margin-top: -8px; }
#sub-tabs .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-=
top-width: 0px; margin-top: -2px; position: relative; top: 1px; margin-bott=
om: 2px; overflow: auto; display: none; }
#sub-tabs .ui-accordion .ui-accordion-content-active { display: block; }
#sub-tabs .ui-datepicker { width: 17em; padding: 0.2em 0.2em 0px; }
#sub-tabs .ui-datepicker .ui-datepicker-header { position: relative; paddin=
g: 0.2em 0px; }
#sub-tabs .ui-datepicker .ui-datepicker-prev, #sub-tabs .ui-datepicker .ui-=
datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em=
; }
#sub-tabs .ui-datepicker .ui-datepicker-prev-hover, #sub-tabs .ui-datepicke=
r .ui-datepicker-next-hover { top: 1px; }
#sub-tabs .ui-datepicker .ui-datepicker-prev { left: 2px; }
#sub-tabs .ui-datepicker .ui-datepicker-next { right: 2px; }
#sub-tabs .ui-datepicker .ui-datepicker-prev-hover { left: 1px; }
#sub-tabs .ui-datepicker .ui-datepicker-next-hover { right: 1px; }
#sub-tabs .ui-datepicker .ui-datepicker-prev span, #sub-tabs .ui-datepicker=
.ui-datepicker-next span { display: block; position: absolute; left: 50%; =
margin-left: -8px; top: 50%; margin-top: -8px; }
#sub-tabs .ui-datepicker .ui-datepicker-title { margin: 0px 2.3em; line-hei=
ght: 1.8em; text-align: center; }
#sub-tabs .ui-datepicker .ui-datepicker-title select { float: left; font-si=
ze: 1em; margin: 1px 0px; }
#sub-tabs .ui-datepicker select.ui-datepicker-month-year { width: 100%; }
#sub-tabs .ui-datepicker select.ui-datepicker-month, #sub-tabs .ui-datepick=
er select.ui-datepicker-year { width: 49%; }
#sub-tabs .ui-datepicker .ui-datepicker-title select.ui-datepicker-year { f=
loat: right; }
#sub-tabs .ui-datepicker table { width: 100%; font-size: 0.9em; border-coll=
apse: collapse; margin: 0px 0px 0.4em; }
#sub-tabs .ui-datepicker th { padding: 0.7em 0.3em; text-align: center; fon=
t-weight: bold; border: 0px; }
#sub-tabs .ui-datepicker td { border: 0px; padding: 1px; }
#sub-tabs .ui-datepicker td span, #sub-tabs .ui-datepicker td a { display: =
block; padding: 0.2em; text-align: right; text-decoration: none; }
#sub-tabs .ui-datepicker .ui-datepicker-buttonpane { background-image: none=
; margin: 0.7em 0px 0px; padding: 0px 0.2em; border-left-width: 0px; border=
-right-width: 0px; border-bottom-width: 0px; }
#sub-tabs .ui-datepicker .ui-datepicker-buttonpane button { float: right; m=
argin: 0.5em 0.2em 0.4em; cursor: pointer; padding: 0.2em 0.6em 0.3em; widt=
h: auto; overflow: visible; }
#sub-tabs .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-cur=
rent { float: left; }
#sub-tabs .ui-datepicker.ui-datepicker-multi { width: auto; }
#sub-tabs .ui-datepicker-multi .ui-datepicker-group { float: left; }
#sub-tabs .ui-datepicker-multi .ui-datepicker-group table { width: 95%; mar=
gin: 0px auto 0.4em; }
#sub-tabs .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; }
#sub-tabs .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; }
#sub-tabs .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; }
#sub-tabs .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-hea=
der { border-left-width: 0px; }
#sub-tabs .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-h=
eader { border-left-width: 0px; }
#sub-tabs .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; }
#sub-tabs .ui-datepicker-row-break { clear: both; width: 100%; }
#sub-tabs .ui-datepicker-rtl { direction: rtl; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; =
}
#sub-tabs .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; =
}
#sub-tabs .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: =
auto; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: =
auto; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left=
; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker=
-current { float: right; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-group { float: right; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-heade=
r { border-right-width: 0px; border-left-width: 1px; }
#sub-tabs .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-hea=
der { border-right-width: 0px; border-left-width: 1px; }
#sub-tabs .ui-datepicker-cover { display: block; position: absolute; z-inde=
x: -1; top: -4px; left: -4px; width: 200px; height: 200px; }
#sub-tabs .ui-dialog { position: relative; padding: 0.2em; width: 300px; }
#sub-tabs .ui-dialog .ui-dialog-titlebar { padding: 0.5em 0.3em 0.3em 1em; =
position: relative; }
#sub-tabs .ui-dialog .ui-dialog-title { float: left; margin: 0.1em 0px 0.2e=
m; }
#sub-tabs .ui-dialog .ui-dialog-titlebar-close { position: absolute; right:=
0.3em; top: 50%; width: 19px; margin: -10px 0px 0px; padding: 1px; height:=
18px; }
#sub-tabs .ui-dialog .ui-dialog-titlebar-close span { display: block; margi=
n: 1px; }
#sub-tabs .ui-dialog .ui-dialog-titlebar-close:hover, #sub-tabs .ui-dialog =
.ui-dialog-titlebar-close:focus { padding: 0px; }
#sub-tabs .ui-dialog .ui-dialog-content { border: 0px; padding: 0.5em 1em; =
background-image: none; overflow: auto; zoom: 1; background-position: initi=
al initial; background-repeat: initial initial; }
#sub-tabs .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width=
: 1px 0px 0px; background-image: none; margin: 0.5em 0px 0px; padding: 0.3e=
m 1em 0.5em 0.4em; }
#sub-tabs .ui-dialog .ui-dialog-buttonpane button { float: right; margin: 0=
.5em 0.4em 0.5em 0px; cursor: pointer; padding: 0.2em 0.6em 0.3em; line-hei=
ght: 1.4em; width: auto; overflow: visible; }
#sub-tabs .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3=
px; bottom: 3px; }
#sub-tabs .ui-draggable .ui-dialog-titlebar { cursor: move; }
#sub-tabs .ui-progressbar { height: 2em; text-align: left; }
#sub-tabs .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100=
%; }
#sub-tabs .ui-resizable { position: relative; }
#sub-tabs .ui-resizable-handle { position: absolute; font-size: 0.1px; z-in=
dex: 99999; display: block; }
#sub-tabs .ui-resizable-disabled .ui-resizable-handle, #sub-tabs .ui-resiza=
ble-autohide .ui-resizable-handle { display: none; }
#sub-tabs .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top=
: -5px; left: 0px; }
#sub-tabs .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bot=
tom: -5px; left: 0px; }
#sub-tabs .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top:=
0px; height: 100%; }
#sub-tabs .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: =
0px; height: 100%; }
#sub-tabs .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; =
right: 1px; bottom: 1px; }
#sub-tabs .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; le=
ft: -5px; bottom: -5px; }
#sub-tabs .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; le=
ft: -5px; top: -5px; }
#sub-tabs .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; ri=
ght: -5px; top: -5px; }
#sub-tabs .ui-slider { position: relative; text-align: left; }
#sub-tabs .ui-slider .ui-slider-handle { position: absolute; z-index: 2; wi=
dth: 1.2em; height: 1.2em; cursor: default; }
#sub-tabs .ui-slider .ui-slider-range { position: absolute; z-index: 1; fon=
t-size: 0.7em; display: block; border: 0px; }
#sub-tabs .ui-slider-horizontal { height: 0.8em; }
#sub-tabs .ui-slider-horizontal .ui-slider-handle { top: -0.3em; margin-lef=
t: -0.6em; }
#sub-tabs .ui-slider-horizontal .ui-slider-range { top: 0px; height: 100%; =
}
#sub-tabs .ui-slider-horizontal .ui-slider-range-min { left: 0px; }
#sub-tabs .ui-slider-horizontal .ui-slider-range-max { right: 0px; }
#sub-tabs .ui-slider-vertical { width: 0.8em; height: 100px; }
#sub-tabs .ui-slider-vertical .ui-slider-handle { left: -0.3em; margin-left=
: 0px; margin-bottom: -0.6em; }
#sub-tabs .ui-slider-vertical .ui-slider-range { left: 0px; width: 100%; }
#sub-tabs .ui-slider-vertical .ui-slider-range-min { bottom: 0px; }
#sub-tabs .ui-slider-vertical .ui-slider-range-max { top: 0px; }
#sub-tabs .ui-tabs { padding: 0.2em; zoom: 1; }
#sub-tabs .ui-tabs .ui-tabs-nav { list-style: none; position: relative; pad=
ding: 0.2em 0.2em 0px; }
#sub-tabs .ui-tabs .ui-tabs-nav li { position: relative; float: left; margi=
n: 0px 0.2em -1px 0px; padding: 0px; border-bottom-width: 0px !important; }
#sub-tabs .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; =
padding: 0.5em 1em; }
#sub-tabs .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; =
border-bottom-width: 0px; }
#sub-tabs .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, #sub-tabs .ui-tabs .=
ui-tabs-nav li.ui-state-disabled a, #sub-tabs .ui-tabs .ui-tabs-nav li.ui-s=
tate-processing a { cursor: text; }
#sub-tabs .ui-tabs .ui-tabs-nav li a, #sub-tabs .ui-tabs.ui-tabs-collapsibl=
e .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
#sub-tabs .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; bor=
der-width: 0px; background-image: none; background-position: initial initia=
l; background-repeat: initial initial; }
#sub-tabs .ui-tabs .ui-tabs-hide { display: none !important; }
------=_NextPart_000_0F17_6C563163.865486AA
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-Location: http://jquery.malsup.com/images/external.png
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEVmmcwzmcyZzP8AZswAZv//
//////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8k
mrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC
------=_NextPart_000_0F17_6C563163.865486AA
Content-Type: text/css
Content-Transfer-Encoding: quoted-printable
Content-Location: http://jquery.malsup.com/jq-new.css
html { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); backgroun=
d-position: initial initial; background-repeat: initial initial; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form,=
fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0px; pa=
dding: 0px; }
table { border-collapse: collapse; border-spacing: 0px; }
fieldset, img { border: 0px; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal=
; font-weight: normal; }
li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q::before, q::after { content: ''; }
abbr, acronym { border: 0px; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family: inherit; font-size: inherit; font-we=
ight: inherit; }
legend { color: rgb(0, 0, 0); }
html, body { font-size: small; border: none !important; }
body { font-family: tahoma, sans-serif; font-size: small; }
h1, h2, h3, .ui-widget-header { font-family: 'trebuchet ms', trebuchet, ver=
dana; font-weight: bold; }
h1 { padding: 10px 0px; font-size: large; font-weight: bold; }
strong { font-weight: bold; }
#page-header h1 { text-align: center; position: relative; }
#tabs { height: 100%; border: none; }
#tabs ul.ui-tabs-nav { background-image: none !important; }
#sub-tabs { border: none; padding: 0px; }
#sub-tabs ul.ui-tabs-nav { padding-left: 2px; }
#sub-tabs ul.ui-tabs-nav li a { padding: 3px 10px; font-size: small; }
#sub-tabs .ui-widget-content { border-top-style: none; }
.ui-widget { font-size: 1em; }
a.icon { display: block; width: 16px; height: 16px; z-index: 10; }
a.home { position: absolute; top: 15px; left: 10px; }
div.step-holder { margin: 15px 0px; }
span.step-counter { float: left; font-size: large; padding: 2px 10px; displ=
ay: block; margin: 0px 10px 10px 0px; }
#twitter { position: absolute; right: 8px; top: 5px; z-index: 500; }
#twitter a { text-decoration: none; font-family: arial; vertical-align: top=
; }
#twitter img { border: none; }
#paypal { border: none; background-color: transparent; float: right; paddin=
g: 0px 5px; margin-top: -8px; }
td { vertical-align: top; }
p { margin: 10px 0px; }
dl { margin-top: 0px; }
dt { color: rgb(170, 0, 0); font-weight: bold; }
dd { margin: 0px 0px 20px; color: rgb(85, 85, 85); }
dl.options { margin: 10px 25px; }
hr { height: 1px; }
#content { padding: 20px; }
#busy { position: absolute; top: 7px; right: 7px; border: 1px ridge rgb(204=
, 204, 204); background-color: rgb(233, 85, 85); color: rgb(238, 238, 238);=
padding: 3px; display: none; }
#footer { padding-top: 20px; margin-top: 30px; border-top-width: 1px; borde=
r-top-style: solid; border-top-color: rgb(221, 221, 221); color: rgb(136, 1=
36, 136); }
a.external { background-image: url(http://jquery.malsup.com/images/external=
.png); padding-right: 12px; background-position: 100% 50%; background-repea=
t: no-repeat no-repeat; }
pre { margin: 10px 0px; clear: both; }
pre { font-size: small; padding: 15px; background-color: rgb(238, 238, 238)=
; border-width: 1px 1px 1px 5px; border-style: solid; border-color: rgb(221=
, 221, 221); overflow-x: auto; }
pre.normal { background-color: transparent; border-style: none; border-left=
-width: 0px; overflow-x: auto; }
code { padding: 0px; font-size: 108%; font-style: normal; }
code.method { font-size: 150%; display: block; margin-top: 20px; }
code.inline { background-color: rgb(255, 255, 204); }
.jscom, .mix htcom { color: rgb(64, 64, 194); }
.com { color: green; }
.regexp { color: maroon; }
.string { color: teal; }
.keywords { color: blue; }
.global { color: rgb(0, 0, 136); }
.numbers { color: rgb(136, 136, 0); }
.comm { color: green; }
.tag { color: blue; }
.entity { color: blue; }
.string { color: teal; }
.aname { color: maroon; }
.avalue { color: maroon; }
.jquery { color: rgb(0, 0, 170); }
.plugin { color: red; }
.php .tag { color: purple; }
.php .com { color: green; }
.php .const1 { color: maroon; }
.php .const2 { color: maroon; }
.php .function { color: rgb(225, 113, 0); }
.php .global { color: maroon; }
.php .keyword { color: blue; }
.php .mlcom { color: gray; }
.php .name { color: maroon; }
.php .number { color: rgb(136, 136, 0); }
.php .string1 { color: teal; }
.php .string2 { color: teal; }
.php .value { color: gray; }
.php .variable { color: rgb(225, 92, 3); }
.css .mlcom { color: rgb(64, 64, 194); }
.css .color { color: black; }
.css .string { color: teal; }
.css .attrib { color: blue; }
.css .value { color: navy; }
.css .number { color: rgb(136, 136, 0); }
------=_NextPart_000_0F17_6C563163.865486AA
Content-Type: image/png
Content-Transfer-Encoding: base64
Content-Location: http://jquery.malsup.com/images/twitter_1.png
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAABGZJREFUeNq0V02IFEcUfq+qpmd/zLhqdtcEQkwOwYvEgPeQQMhFCEpy
8hIRAhIEQbx59CYhQdlDJEFI8BbcRLyICSpeIohxD0FDIkgUf3bHdbPizPZOd1feq5+Z6pnunV3Z
qaV6p6ur3/vqe997VY1gm5j84uzutDL6U5JmFa1hIA0RQEnRkq0Xnz45ve8CDWXIzicOnPmkunH8
3IlDH8B720ZgQP6Bnf1xrwFHT12G+L+5vbPf7/+Fx4Zf/XJ68dSRj9T8Cw1Xb82ZiYNovLD3d47D
5lGEQ19dSupTe2qKASQpqB1vjcLxs/cgUgIEOr7W1buGjBBcm6nDsX3bgH2yb74ofpjwD4mgPIAA
dagJxoUvGYDM2MmML2dUKf84pXshAKToLJ5fyDJ6IeP5msYJoJmTB7lqCGxPWF++Ka8OBoRklZ0w
AJ6TEYJ3JjfAnne3QFUCxCnA9MxT+Hu2QWDxpZhgH2bx7mXhH9BCaWVoDJtOKGgIPtu5xcxdSuw7
fM/j/FyItXf2wb7yDAQhEC4EJl7EWZVmNFpODDTOTGi+YT5XECq6C+Z1CEIXhYABECpBAjDUonXo
aRaBMQa/TOiQrAgsrxjMkBF1ECoDgP7SIgYys6COBtBJXtEP6e7RherE7jfNWLlzAkl6OX39CdQb
aQ5Em13o1oDu0kBbC9Du6MTaIuNxUt6bLQv2812Txm6PBopCwCsLNQA+LQMG1to2D7HqrT3hwGvn
q0SE+RAgvd0NYDVFkh9zvXgeWy14m4byojrAz9IU2ukXitDT7xsXqsgztQKAxVjDDzPzEFWEoR19
8dPWFxaJUISGC0LAguE0PHzpIQwpNoql2y6DZvFFKsgCW4mLNcCpwZRjoHimLmTAGgUYolWNmD0D
++7/2DOGxWnI9EgZpKALQY4BB0ARNUqufT/Q0Mmk0kqYBwA9DJifon8lLGLA76xpWRoaBoLZgisZ
5DXA/1saYYnTdoVKyO8ozFdCD6I0DU265NIN29T7ltC8qQ8nQPahm+19c2sB6s20B0RaVgl9FvjO
KcdngUqYDdqOxSv05czSf3DHGIle99jtKcXosiAsxRwOPp7dqMdQceLz5Xg1YmOWR5QVAmK+FJuM
6z6QZJmlPCwmFZp88d8GbN8YwVjVCiFb5enXaCW1p6ewEnq9FR5IWHThxqGoiGiqDSf/XIQbc3H7
hX7d+/r2znPDogztypIDSUb5wTHv/ijxMbtwvwk/Ext+Q+nHgCyohJ3tWHftBTSqjTNhzoHdxjj2
HLtojV8sRZWQWdDQCbdyG0zyz/159drkKO3nqTkBD+bTDOmIJ4F8GZ/GN+8v0abX67fr0cdvvzEO
42M1s9qKlCTCderS9qFKFR48WoAfp6/D0l9Xji7d/f0mM9B8dvHr8zpZjr6LW8drrwzLWm3YiGG9
iDChoMvjuUVIWkm6fOfXYwu/TZ1n377CjlDfSn2CP5dgsK1JfZb6Y+oNDApS1TlXAwaQOBCc19n/
AgwA9bGfc9H+jtIAAAAASUVORK5CYII=
------=_NextPart_000_0F17_6C563163.865486AA
Content-Type: image/gif
Content-Transfer-Encoding: base64
Content-Location: http://jquery.malsup.com/form/submit.gif
R0lGODlhVwAoAIcAAAAAAAQEBAgICAwMDBAQEBQUFBgYGBwcHCAgICQkJCgoKCwsLDAwMDQ0NDg4
ODw8PEBAQEREREhISExMTFBQUFRUVFhYWFxcXGBgYGRkZGhoaGxsbHBwcHR0dHh4eHx8fICAgISE
hIiIiIyMjJCQkJSUlJiYmJycnKCgoKSkpKioqKysrLCwsLS0tLi4uLy8vMDAwMTExMjIyMzMzNDQ
0NTU1NjY2Nzc3ODg4OTk5Ojo6Ozs7PDw8PT09Pj4+Pz8/P///wAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAP8ALAAAAABXACgA
AAj/AIEIHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmyZEQaHBQIGIChh8mX
QHRgAECzJgaYJV8UACAgQwsbIAAMeJiCBE6JJQIAuKBj4A0ADBzWCGDgKEQPAAy8KPgBQAeHELxa
dVhCqIyCMQIUaMpQBYADPMYy1EEAwIqCNHayaOjjAAAVHjfcxBgUQsETAgAYbRgCQISLOig0IFgW
RMYFAFoMbMGA5uK5BALUuNgAwIeBNgQQiItxAIAcAi3QPKDZoQYAHDAWyOBSYNgUGhMPVHCgA+uG
Nqger/iD4AkABSokeHyxsw2BzSNOAHCi4466Nalb/ySBmyIMAA42urDAIPGCDytGY+wrQH7EzjM2
zkQAfXnGF1Bl9xALAFjQAQIFuFDQC1HFUIFAPGhQgGEDgfDAQD6EZcJHG4hVUA8YTOYDBhQQ1Fli
NE2GYQLwsQTEDH4BYJlAKHgIhAsAKCAgRz4oEEB+A/2w3WnkRSUQgdClEAMABBDUgQEuBBDADSy4
BoAE2eUwQAHHdaYgRjV4sBdBNATAgIAZ5OiDDwYAIMJAnQVAAxAyAKAinQF04FoGI2AGwAK9AUEB
ABseCQCFF42g1AIGdYWCQOf9CIQJNMEGBJIeCIRVCNgpYEACCQRAwQYOZGUpEC38KWCptVmUAgB5
+v8HRA12+iajQJhdKFBpCvgABA+hWRpUAORdiaMAQArU2VYC0QAAAgRxOhFmrRaEg1BAnIdAcwD+
JdAMNMEgUFAbNCvlCmEhwMMF5Q0E4AQEceDmQCSUOJFSso57KBAd5uZDZwNkd5u9OBBgAGthgWAD
TY8qAMCcA0kAQLJAPADAWUDEMMB1Ezk8JkE+KJoZEKVuNVOtQPjgWn4/lPplnauJECAQiQW6QwCM
EuRXXDcYMONEzxlAQg0/3PCCCG0GABwQrtUg7wjQ0UgTCzRI/LNsRlk85k721fiZQE27oEAFO0oU
glI11ZSAuMrWdFpn4paaNgYCGmCArwZkMJBsgwlNGsAOBYVFE9kY0SDdbBGwsCMLAhhQKIEEoMCA
BRXkuPRABiztq1MHwCsQAX0PFAMBB4RQtkibD4RCAbpiJEO+csUu++y012777bgvFBAAOw==
------=_NextPart_000_0F17_6C563163.865486AA--