jquery中 form&div 是什么意思？_百度知道
jquery中 form&div 是什么意思？
提问者采纳
是form元素后面“紧跟着”的div元素比如&form&&div&....&/div&&form&这个div是可以匹配的但是下面这个div是匹配不了的&form&&table&....&div&,,,,&/div&...&/table&&/form&大于号表示紧跟着的意思，中间不能嵌套任何其他html元素
其他类似问题
为您推荐：
您可能关注的推广回答者：
jquery的相关知识
其他2条回答
form元素下的div
Form 表单内的 div 元素
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁音节划分：con?form
中频词，你记住了吗？
[k?n'f?:m]
[k?n'f?:rm]
过去分词：
现在分词：
第三人称单数：
大家都在背：
1. Taxis must conform to the rigorous standards laid down by the police.
出租车必须遵守警方的严格规定。
来自柯林斯例句
2. Like most "peacetime wars" it did not conform to preconceived ideas.
如同大多数“和平时代的战争”一样，这与我们的预想不同。
来自柯林斯例句
3. Many children who can't or don't conform are often bullied.
很多不能或不按规矩行事的小孩常常被人欺负。
来自柯林斯例句
4. Does your electric blanket conform to BS 3456?
你们的电热毯达到英国的3456标准了吗？
来自柯林斯例句
5. There is considerable pressure on teenagers to conform.
年轻人被大力要求守规矩。
来自《权威词典》
1. “遵照;符合,相一致”释义下的同义词
其他释义下的同义词
：指人或物在原有情况下作某些改变以适应新的环境或不同的条件，强调改变的目的和重要性。
：多指与某模式或规则相符，也引申指改变习惯等以适应新的环境。
：书面用词，指以外部条件标准改变自己或某事以求得适应，着重改变或调节的有利。
：指适合要求，从而使人满意愉快。
：含义广，指人或物适合或适应某一目的或用途。
agree, accord, coincide, conform, correspond
这些动词均含“符合，一致”之意。
：侧重指经过比较后的所有主要部分均和谐一致，无冲突和矛盾。
：着重指性格、精神、语气或质量等方面的完全一致。
：多用于指观点、判断、愿望、利益或兴趣的一致或相符。偶尔用于人，强调意见或观点完全相同。
：强调在形状、性格以及主要特点等方面的相似或一致。
：指在进行比较时，两个事物在某一个重要方面或细节上互相匹配、一致。
遵守，遵从，符合(法律、意愿等) If something conforms to something such as a law or someone's wishes, it is of the required type or quality.&
【语法信息】：V to/with n
The Night Rider lamp has been designed to conform to new British Standard safety requirements...
“夜行者”灯的设计符合新的英国安全标准的要求。
The meat market can continue only if it is radically overhauled to conform with strict European standards.
肉类市场只有经过彻底的大检查，严格遵守欧洲标准，才能继续营业。
按规矩行事;顺从;随潮流 If you conform, you behave in the way that you are expected or supposed to behave.&
【语法信息】：V
【语法信息】：V to/with n
Many children who can't or don't conform are often bullied...
很多不能或不按规矩行事的小孩常常被人欺负。
He did not feel obliged to conform to the rules that applied to ordinary men...
他觉得自己不必遵守那些适用于普通人的规定。
We conformed with social and family expectations.
我们遵从社会和家庭的期望行事。
(与样式、类型等)非常相似，一致，相吻合 If someone or something conforms to a pattern or type, they are very similar to it.&
【语法信息】：V to n
I am well aware that we all conform to one stereotype or another...
我们所有人都能找到某种与自己相似的模式化形象，这一点我很清楚。
Like most 'peacetime wars' it did not conform to preconceived ideas.
如同大多数“和平时代的战争”一样，这与我们的预想不同。
1. 遵守, 符合，遵从，服从
The building does not conform to safety regulations.
这座建筑物不符合安全条例。
2. 顺应, 一致,顺从,随潮流
There is great pressure on schoolchildren to conform.
小学生有巨大的压力要去适应。
Her ideas do not conform with mine.
她的观点与我的不一致。
3. 相一致；相符合；相吻合
1. be similar, be in line with
2. adapt or conform oneself to new or
"We must adjust to the bad economic situation"
英语常见词根前缀后缀大全 ... reform 改革 conform 符合 grateful 衷心感谢的.
- 基于3014个网页
托福单词表 - 豆丁网 ... confine 限制 conform 遵守。 confront 面对，直接对抗.
- 基于1762个网页
英语词根词缀记忆大全 ... formulate v 公式化；系统陈述 conform v 使一致；遵从 conformity n 一致，相符.
- 基于558个网页
英语词根词缀记忆大全 ... formulate v 公式化；系统陈述 conform v 使一致；遵从 conformity n 一致，相符.
- 基于485个网页
inspection , quality conformance ., 质量符合性检查.
- 基于194个网页
构象(Conformation)：构象则是对C-C单键内旋转异构体的一种描述，有伸展型、无规线团、螺旋型和折叠链等几种构象。 光学异构体(…
- 基于1097个网页
conformance 一致性conformation 构造conformational analysis 构象分析
- 基于392个网页
英语词根词缀记忆大全 ... conform v 使一致；遵从 conformity n 一致，相符 deform v 使残废；变形.
- 基于1368个网页
道路工程英语词汇_专业词汇_专业英语_食品伙伴网 ... 确定，决定 definition 合格 conformity 不合格 nonconformity.
- 基于1296个网页
0){var rand = parseInt(Math.random() * (000)+100000);top.location.href='/'+encodeURIComponent(document.getElementById('s').value.trim().replace( / /g, '_'))+'?renovate='+}else{top.location.href='/'+encodeURIComponent(document.getElementById('s').value.trim().replace( / /g, '_'));};}" action="/">
查过的词自动加入生词本
Tip：此功能设置只能在登录状态下生效
需要改进的内容：
单词大小写
其他（请在下面补充描述）
错误描述：
您还可在这里补充说明下 O(∩_∩)O~
方便的话，请您留下一种联系方式，便于问题的解决：The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use
The main methods,
ajaxForm and ajaxSubmit,
gather information from the form element to determine how to manage the submit process.
Both of these methods support
numerous options which allows you to have full control over how the data is submitted.
Submitting a form with AJAX doesn't get any easier than this!
Quick Start Guide
Add a form to your page. Just a normal form, no special markup required:
&form id="myForm" action="comment.php" method="post"&
Name: &input type="text" name="name" /&
Comment: &textarea name="comment"&&/textarea&
&input type="submit" value="Submit Comment" /&
Include jQuery and the Form Plugin external script files and a short script to
initialize the form when the DOM is ready:
&script src="/ajax/libs/jquery/1.7/jquery.js"&&/script&
&script src="/jquery.form.js"&&/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!");
That's it!
When this form is submitted the name and comment fields
will be posted to comment.php.
If the server returns
a success status then the user will see a "Thank you" message.
Form Plugin API
The Form Plugin API provides several methods that allow you to easily manage form data and form submission.
Prepares a form to be submitted via AJAX
by adding all of the necessary event listeners.
It does not submit the form.
Use ajaxForm in your document's ready function to
prepare your form(s) for AJAX submission.
ajaxForm takes zero or one argument.
The single argument
can be either a callback function or an .
Chainable: Yes.
Note: You can pass any of the standard
options to ajaxForm
$('#myFormId').ajaxForm();
ajaxSubmit
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 the form.
ajaxSubmit takes zero or one argument.
The single argument
can be either a callback function or an .
Chainable: Yes.
Note: You can pass any of the standard
options to ajaxSubmit
// attach handler to form's submit event
$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
formSerialize
Serializes the form into a query string.
This method will return a string in the format:
name1=value1&name2=value2
Chainable: No, this method returns a String.
var queryString = $('#myFormId').formSerialize();
// the data could now be submitted using $.get, $.post, $.ajax, etc
$.post('myscript.php', queryString);
fieldSerialize
Serializes field elements into a query string.
This is handy when you need to serialize only
part of a form. This method will return a string in the format:
name1=value1&name2=value2
Chainable: No, this method returns a String.
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
Returns the value(s) of the element(s) in the matched set in an array.
As of version .91,
this method always returns an array.
If no valid value can be determined the
array will be empty, otherwise it will contain one or more values.
Chainable: No, this method returns an array.
// get the value of the password input
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
Resets the form to its original state by invoking the form element's native
DOM method.
Chainable: Yes.
$('#myFormId').resetForm();
Clears the form elements.
This method emptys all of the text inputs, password inputs and textarea elements, clears
the selection in any select elements, and unchecks all radio and checkbox inputs.
Chainable: Yes.
$('#myFormId').clearForm();
clearFields
Clears field elements.
This is handy when you need to clear only a part of the form.
Chainable: Yes.
$('#myFormId .specialFields').clearFields();
ajaxForm and ajaxSubmit Options
Note: Aside from the options listed below, you can also pass any of the standard
options to ajaxForm and ajaxSubmit.
Both ajaxForm and ajaxSubmit 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 follows:
beforeSerialize
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 beforeSerialize function is invoked with two arguments: the jQuery object for the form,
and the Options Object passed into ajaxForm/ajaxSubmit.
beforeSerialize: function($form, options) {
// return false to cancel submit
Default value: null
beforeSubmit
Callback function to be invoked before the form is submitted.
The 'beforeSubmit' callback can be provided as a hook for running pre-submit logic or for
validating the form data.
If the 'beforeSubmit' callback returns false then the form will
not be submitted. The 'beforeSubmit' callback is invoked with three arguments: the form data
in array format, the jQuery object for the form, and the Options Object passed into ajaxForm/ajaxSubmit.
beforeSubmit: function(arr, $form, options) {
// The array of form data takes the following form:
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// return false to cancel submit
Default value: null
Boolean flag indicating whether the form should be cleared if the submit is successful
Default value: null
An object containing extra data that should be submitted along with the form.
data: { key1: 'value1', key2: 'value2' }
Expected data type of the response.
One of: null, 'xml', 'script', or 'json'.
The dataType option provides a means for specifying how the server response should be handled.
This maps directly to the jQuery.httpData method.
The following values are supported:
'xml': if dataType == 'xml' the server response is treated as XML and the 'success'
callback method, if specified, will be passed the responseXML value
'json': if dataType == 'json' the server response will be evaluted and passed to
the 'success' callback, if specified
'script': if dataType == 'script' the server response is evaluated in the global context
Default value: null
Callback function to be invoked upon error.
Boolean value. Set to true to remove short delay before posting form when uploading files (or using the iframe option).
The delay is used to allow the browser to render DOM updates prior to performing a native form submit.
This improves
usability when displaying notifications to the user, such as "Please Wait..."
Default value: false
Added in v2.38
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 File Uploads
documentation on the
page for more info.
Default value: false
String value that should be used for the iframe's src attribute when/if an iframe is used.
Default value: about:blank
Default value for pages that use https protocol: javascript:false
iframeTarget
Identifies the iframe element to be used as the response target for file uploads.
By default, the plugin
will create a temporary iframe element to capture the response when uploading files.
This options allows you
to use an existing iframe if you wish. When using this option the plugin will make no attempt at handling
the response from the server.
Default value: null
Added in v2.76
replaceTarget
Optionally used along with the the target option. Set to true if the
target should be replaced or false if only the target contents should
be replaced.
Default value: false
Added in v2.43
Boolean flag indicating whether the form should be reset if the submit is successful
Default value: null
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the
normal form serialization is done in semantic order with the exception of input elements of type="image".
You should only set the semantic option to true if your server has strict semantic requirements
and your form contains an input element of type="image".
Default value: false
Callback function to be invoked after the form has been submitted.
If a 'success' callback function is provided it is invoked after the response has been returned
from the server.
It is passed the following arguments:
1.) responseText or responseXML value (depending on the value of the dataType option).
2.) statusText
3.) xhr (or the jQuery-wrapped form element if using jQuery & 1.4)
4.) jQuery-wrapped form element (or undefined if using jQuery & 1.4)
Default value: null
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 jQuery object,
or a DOM element.
Default value: null
The method in which the form data should be submitted, 'GET' or 'POST'.
Default value: value of form's method attribute (or 'GET' if none found)
uploadProgress
Callback function to be invoked with upload progress information (if supported by the browser).
The callback is passed the following arguments:
1.) the browser event
2.) position (integer)
3.) total (integer)
4.) percentComplete (integer)
Default value: null
URL to which the form data will be submitted.
Default value: value of form's action attribute
// prepare Options Object
var options = {
'#divToUpdate',
'comment.php',
function() {
alert('Thanks for your comment!');
// pass options to ajaxForm
$('#myForm').ajaxForm(options);
Note that the Options Object can also be used to pass values to jQuery's
If you are familiar with the options supported by $.ajax
you may use them in the Options Object passed to ajaxForm and
ajaxSubmit.
Code Samples
The following code controls the HTML form beneath it. It uses ajaxForm
to bind the form and demonstrates how to use pre- and post-submit callbacks.
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
'#output1',
// target element(s) to be updated with server response
beforeSubmit:
showRequest,
// pre-submit callback
showResponse
// post-submit callback
// other available options:
// override for form's 'action' attribute
// 'get' or 'post', override for form's 'method' attribute
//dataType:
// 'xml', 'script', or 'json' (expected server 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:
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formD 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 = $.param(formData);
// jqForm is a jQuery object encapsulating the form element.
To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form
// returning anything other than false will allow the form submit to continue
// post-submit callback
function showResponse(responseText, statusText, xhr, $form)
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// 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 responseText.');
Text:This is Form1
Output Div (#output1):
AJAX response will replace this content.
The following code controls the HTML form beneath it. It uses ajaxSubmit
to submit the form.
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
'#output2',
// target element(s) to be updated with server response
beforeSubmit:
showRequest,
// pre-submit callback
showResponse
// post-submit callback
// other available options:
// override for form's 'action' attribute
// 'get' or 'post', override for form's 'method' attribute
//dataType:
// 'xml', 'script', or 'json' (expected server 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:
// 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
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formD 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 = $.param(formData);
// jqForm is a jQuery object encapsulating the form element.
To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form
// returning anything other than false will allow the form submit to continue
// post-submit callback
function showResponse(responseText, statusText, xhr, $form)
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// 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 responseText.');
Text:This is Form2
Output Div (#output2):
AJAX response will replace this content.
This page gives several examples of how form data can be validated before it is sent to
the server.
The secret is in the beforeSubmit option.
pre-submit callback returns false, the submit process is aborted.
The following login form is used for each of the examples that follow.
Each example
will validate that both the username and password fields have been filled
in by the user.
Form Markup:
&form id="validationForm" action="dummy.php" method="post"&
Username: &input type="text" name="username" /&
Password: &input type="password" name="password" /&
&input type="submit" value="Submit" /&
First, we initialize the form and give it a beforeSubmit
callback function - this is the validation function.
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#myForm2').ajaxForm( { beforeSubmit: validate } );
Validate Using the formData Argument
function validate(formData, jqForm, options) {
// formData is an array of objects representing the name and value of each field
// that will b
it takes the following form:
username, value: valueOfUsernameInput },
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=0; i & formData. i++) {
if (!formData[i].value) {
alert('Please enter a value for both Username and Password');
alert('Both fields contain values.');
Validate Using the jqForm Argument
function validate(formData, jqForm, options) {
// 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 = jqForm[0];
if (!form.username.value || !form.password.value) {
alert('Please enter a value for both Username and Password');
alert('Both fields contain values.');
Validate Using the fieldValue Method
function validate(formData, jqForm, options) {
// 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 password
// fields and return true only if both evaluate to true
var usernameValue = $('input[name=username]').fieldValue();
var passwordValue = $('input[name=password]').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');
alert('Both fields contain values.');
You can find jQuery plugins that deal specifically with field validation
This page shows how to handle JSON data returned from the server.
The form below submits a message to the server and the server
echos it back in JSON format.
Form markup:
&form id="jsonForm" action="json-echo.php" method="post"&
Message: &input type="text" name="message" value="Hello JSON" /&
&input type="submit" value="Echo as JSON" /&
Server code in json-echo.php:
echo '{ "message": "' . $_POST['message'] . '" }';
JavaScript:
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#jsonForm').ajaxForm({
// dataType identifies the expected content type of the server response
// success identifies the function to invoke when the server response
// has been received
processJson
Callback function
function processJson(data) {
// 'data' is the json object returned from the server
alert(data.message);
This page shows how to handle XML data returned from the server.
The form below submits a message to the server and the server
echos it back in XML format.
Form markup:
&form id="xmlForm" action="xml-echo.php" method="post"&
Message: &input type="text" name="message" value="Hello XML" /&
&input type="submit" value="Echo as XML" /&
Server code in xml-echo.php:
// !!! IMPORTANT !!! - the server must set the content type to XML
header('Content-type: text/xml');
echo '&root&&message&' . $_POST['message'] . '&/message&&/root&';
JavaScript:
// 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 response
// success identifies the function to invoke when the server response
// has been received
processXml
Callback function
function processXml(responseXML) {
// 'responseXML' is the XML document re we use
// jQuery to extract the content of the message node from the XML doc
var message = $('message', responseXML).text();
alert(message);
This page shows how to handle HTML data returned from the server.
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 htmlExampleTarget div below.
Form markup:
&form id="htmlForm" action="html-echo.php" method="post"&
Message: &input type="text" name="message" value="Hello HTML" /&
&input type="submit" value="Echo as HTML" /&
Server code in html-echo.php:
echo '&div style="background-color:# padding:20px"&' . $_POST['message'] . '&/div&';
JavaScript:
// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',
// success identifies the function to invoke when the server response
// here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
htmlExampleTarget (output will be added below):
This page demonstrates the Form Plugin's file upload capabilities.
There is no special
coding required to handle file uploads. File input elements are automatically
detected and processed for you.
Browsers that support the
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
not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object.
This is a common fallback technique, but it has inherent limitations.
The iframe element is used as the target
of the form's submit operation which means that the server response is written to the iframe.
This is fine if the response type is HTML or XML, but doesn't work as well if the response type is
script or JSON, both of which often contain characters that need to be repesented using entity
references when found in HTML markup.
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 textarea element and it is recommended that you
do so for these response types when used in conjuction with file uploads and older browsers.
It is important to note that even when the dataType option is set to 'script', and the server is
actually responding with some javascript to a multipart form submission,
the response's Content-Type header should be forced to text/html, otherwise Internet
Explorer will prompt the user to download a "file".
Also note that if there is no file input in the form then the request uses normal
XHR to submit the form (not an iframe).
This puts the burden on your server code to know when
to use a textarea and when not to.
If you like, you can use the iframe
option of the plugin to force it to always use an iframe mode and then your server can
always embed the response in a textarea.
But the recommended solution is to test for the
'X-Requested-With' request header.
If the value of that header is 'XMLHttpRequest' then you
know that the form was posted via ajax.
The following PHP snippet shows how you can be sure to return content successfully:
$xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
if (!$xhr)
echo '&textarea>';
// main content of response here
if (!$xhr)
echo '&/textarea>';
The form below provides an input element of type "file" along with a select element
to specify the dataType of the response.
The form is submitted to
which uses the dataType to
determine what type of response to return.
Return Type:
Examples that show how to display upload progress:
Working With Fields
This page describes and demonstrates the Form Plugin's fieldValue and
fieldSerialize methods.
fieldValue
fieldValue
allows you to retrieve the current value of a field.
For example, to retrieve the value of the password
field in a form with the id of 'myForm' you would write:
var pwd = $('#myForm :password').fieldValue()[0];
This method always returns an array.
If no valid value can be determined the
array will be empty, otherwise it will contain one or more values.
fieldSerialize
fieldSerialize 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:
var queryString = $('#myForm :text').fieldSerialize();
Demonstration
Enter a jQuery expression into the textbox below and then click 'Test' to see the results
of the fieldValue and fieldSerialize
These methods are run against the test form that follows.
jQuery expression:
(ie: textarea, [@type='hidden'], :radio, :checkbox, etc)
Successful controls only [1]
&input type="hidden" name="Hidden" value="secret" /&
&input name="Name" type="text" value="MyName1" /&
&input name="Password" type="password" /&
&select name="Multiple" multiple="multiple"&
&select name="Single"&
&input type="checkbox" name="Check" value="1" /&
&input type="checkbox" name="Check" value="2" /&
&input type="checkbox" name="Check" value="3" /&
&input type="checkbox" name="Check2" value="4" /&
&input type="checkbox" name="Check2" value="5" /&
&input type="checkbox" name="Check3" /&
&input type="radio" name="Radio" value="1" /&
&input type="radio" name="Radio" value="2" /&
&input type="radio" name="Radio" value="3" /&
&input type="radio" name="Radio2" value="4" /&
&input type="radio" name="Radio2" value="5" /&
&textarea name="Text" rows="2" cols="20"&&/textarea&
&input type="reset" name="resetButton" value="Reset" /&
&input type="submit" name="sub" value="Submit" /&
By default, fieldValue and fieldSerialize only function on
'successful controls'.
This means that if you run the following code on a checkbox that is not checked, the result will
be an empty array.
// value will be an empty array if checkbox is not checked:
var value = $('#myUncheckedCheckbox').fieldValue();
// value.length == 0
However, if you really want to know the 'value' of the checkbox element, even if it's unchecked, you can
write this:
// value will hold the checkbox value even if it's not checked:
var value = $('#myUncheckedCheckbox').fieldValue(false);
// value.length == 1
Frequently Asked Questions
What versions of jQuery is the Form Plugin compatible with?
The Form Plugin is compatible with jQuery v1.5 and later.
Does the Form Plugin have any dependencies on other plugins?
Is the Form Plugin fast?
Does it serialize forms accurately?
for a look at how the Form Plugin compares to other libraries (including Prototype and dojo).
What is the easiet way to use the Form Plugin?
ajaxForm provides the simplest way to enable your HTML form to use AJAX.
It's the one-stop-shopping
method for preparing forms.
What is the difference between ajaxForm and ajaxSubmit?
There are two main differences between these methods:
ajaxSubmit submits the form, ajaxForm does not.
When you invoke ajaxSubmit
it immediately serializes the
form data and sends it to the server.
When you invoke ajaxForm it adds the necessary event listeners to the form
so that it can detect when the form is submitted by the user.
When this occurs ajaxSubmit is called for you.
When using ajaxForm the submitted data will include the name and value of the submitting element (or its click coordinates if the
submitting element is an image).
How can I cancel a form submit?
You can prevent a form from being submitted by adding a 'beforeSubmit' callback
function and returning false from that function.
See the Code Samples page
for an example.
Is there a unit test suite for the Form Plugin?
The Form Plugin has an extensive set of tests that are used to validate its functionality.
Does the Form Plugin support file uploads?
Why aren't all my input values posted?
jQuery form serialization aheres closely to the HTML spec.
are valid for submission.
How do I display upload progress information?
The Official Form Plugin is available here:
the plugin's .
Minified version:
There are many other useful
available from the
Support for the Form Plugin is available through the
This is a very active group to which many jQuery developers and users subscribe.
Contributors
Development of the Form Plugin was a community effort with many people contributing ideas and code.
The following people have made contributions of one kind or another:
John Resig
Mike Alsup
Mark Constable
Klaus Hartl
Matt Grimm
Yehuda Katz
J&rn Zaefferer
Sam Collett
Gilles van den Hoven
Kevin Glowacz
Alex Andrienko
Send me an email if I've forgotten someone.}