Jquery form plugin jquery. Form

Main plug-in methods:

Ajaxform
Ajaxsubmit
Formtoarray
Formserialize

Fieldserialize
Fieldvalue
Clearform
Clearfields
Resetform

 

ExampleCode:

// 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! ");
});
});

Project home: http://malsup.com/jquery/form/
: Http://malsup.com/jquery/form/jquery.form.js
Form plug-in API

Http://www.malsup.com/jquery/form/#api.

The form plug-in API provides several methods for you to easily manage form data and submit forms.

Ajaxform ()

Add all required event listeners to prepare for Ajax submission forms. The ajaxform cannot be submitted. In the ready function of document, ajaxform is used to prepare the Ajax submission form. Ajaxform accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.
Chainable: Yes.

Instance:

$ ('# Myformid'). ajaxform ();

Ajaxsubmit ()

Ajax will submit the form immediately. In most cases, ajaxsubmit is called to respond to a user's submitted form. Ajaxsubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an options object.
Chainable: Yes.

Instance:

// Bind the form submission event Processor
$ ('# Myformid'). Submit (function (){
// Submit the form
$ (This). ajaxsubmit ();
// To prevent normal browsers from submitting forms and generating page navigation (to prevent page refreshing ?) Returns false.
Return false;
});

Formserialize ()

Serializes (or serializes) A form into a query string. This method returns a string in the following format: name1 = value1 & name2 = value2.
Chainable: No. This method returns a string.

Instance:

VaR querystring = $ ('# myformid'). formserialize ();

// You can use $. Get, $. Post, and $. Ajax to submit data.
$. Post ('myscript. php', querystring );

Fieldserialize ()

Serializes (or serializes) The form field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized. This method returns a string in the following format: name1 = value1 & name2 = value2.
Chainable: No. This method returns a string.

Instance:

VaR querystring = $ ('# myformid. specialfields'). fieldserialize ();

Fieldvalue ()

Returns the value of the form element that matches the inserted array. From version 0.91, this method will always return data in the form of arrays. If the element value is determined to be invalid, the array is empty; otherwise, it contains one or more element values.
Chainable: No. This method returns an array.

Instance:

// Obtain the password input value
VaR value = $ ('# myformid: password'). fieldvalue ();
Alert ('the password is: '+ value [0]);

Resetform ()

Restore the form to its initial state by calling the original DOM method of the form element.
Chainable: Yes.

Instance:

$ ('# Myformid'). resetform ();

Clearform ()

Clear form elements. In this method, all text input fields, password input fields, and textarea fields are empty to clear the selected fields in any select element, and reset all the single-choice (radio) buttons and multiple-choice (checkbox) buttons to unselected states.
Chainable: Yes.

$ ('# Myformid'). clearform ();

Clearfields ()

Clear the field element. Only some form elements need to be cleared.
Chainable: Yes.

$ ('# Myformid. specialfields'). clearfields ();

Options object

Both ajaxform and ajaxsubmit support many option parameters, which can be provided using an options object. Options is just a JavaScript Object that contains the following set of attributes and values:

Target

Specifies the elements on the page that are updated by the server response. The element value may be specified as a jquery selector string, A jquery object, or a DOM element.
Default Value: null.

URL

Specifies the URL for submitting form data.
Default Value: The action attribute value of the form.

Type

Method used to submit form data: "Get" or "Post ".
Default Value: The method property value of the form (if not found, the default value is "get ").

Beforesubmit

The callback function called before the form is submitted. The "beforesubmit" callback function is provided as a hook to run the pre-commit logic or verify the form data. If the "beforesubmit" callback function returns false, the form will not be submitted. The "beforesubmit" callback function has three call parameters: form data in array form, jquery form object, and options object passed into ajaxform/ajaxsubmit. The form array accepts the following data:

[{Name: 'username', value: 'jresig'}, {Name: 'Password', value: 'secret'}]

Default Value: NULL

Success

Callback Function called after the form is successfully submitted. If the "success" callback function is provided, it is called when the slave server returns a response. The value of the datatype option determines whether to return the value of responsetext or responsexml.
Default Value: NULL

Datatype

Expected data type. Null, XML, script, or JSON. Datatype provides a method that specifies how to process server responses. This is directly reflected in the jquery. httpdata method. The following values are supported:

'Xml': If datatype = 'xml', the server response is treated as XML. If the "success" Callback method is specified, the responsexml value is returned.

'Json': If ype = 'json', the server response will be evaluated and passed to the "success" Callback method if it is specified.

'Script': If datatype = 'script', the server response value is plain text.

Default Value: NULL (responsetext value returned by the server)

Semantic

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 shoshould only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type = "image ".
Boolean sign, indicating whether data must strictly follow the semantic Order (slower ?) . Note: In general, the form has been serialized (or serialized) in the semantic order, except for the input element of type = "image. If your server has strict semantic requirements and the form contains an input element of type = "image", set semantic to true. Because this paragraph cannot be understood, the translation may not be satisfactory, but please correct it .)
Default Value: false

Resetform

Boolean flag, indicating whether to reset the form if it is submitted successfully.
Default Value: NULL

Clearform

Boolean flag, indicating whether to clear the form data if the form is submitted successfully.
Default Value: NULL

Instance:

// Prepare the options object
VaR Options = {
Target: '# divtoupdate ',
URL: 'comment. php ',
Success: function (){
Alert ('Thanks for your comment! ');
}};

// Pass options to ajaxform
$ ('# Myform'). ajaxform (options );

Note: The options object can also be used to pass the value to the $. Ajax method of jquery. If you are familiar with the options supported by $. Ajax, you can use them to pass options objects to ajaxform and ajaxsubmit.

Ajaxform ()This method is applicable to Ajax processing in Form submission mode (the form action, ID, and method must be provided. It is best to provide the submit button in the form) it greatly simplifies data transfer when using Ajax technology to submit a form. Using ajaxform (), you do not need to obtain the values of each form attribute individually in Javascript mode, in addition, data does not need to be transmitted by URL rewriting after the Request Path. Ajaxform () automatically collects the values of each attribute in the current form and submits the values to the target URL as a form. This method is safer to submit data and easier to use. You do not need to write too much redundant JavaScript code.

$ (Document). Ready (function (){ Registerform 'form ID Data callback data $ ('# Registerform'). ajaxform (function (data ){ Alert (data); // The callback result of the Ajax request is displayed. }); });

Ajaxsubmit()This method is applicable to submitting form forms (Click events of hyperlinks and images) using an event Mechanism Using ajax. It works similar to ajaxform (), but it is more flexible because it depends on the event mechanism, this method can be used as long as an event exists. You only need to specify the action attribute of the form and do not need to provide the submit button.

$ (document ). ready (function () { $ ('# BTN '). click (function () { $ ('# registerform '). ajaxsubmit (function (data) { alert (data); }); return false; }); This section of code is used when the button click event with the id btn in the form is triggered through ajaxsubmit () method: submit the form to the path indicated by the form action using Ajax technology

Formserialize()Is to serialize all form elements in a form using name as the key and value as the value, in this case, you must set the name attribute of each form element and fill in the value of the form Element value for each form element. It is best to set the ID to facilitate jquery to locate the form element. To use this method, you must set the name attribute of the form element and fill in the value of the form Element value. I forgot to set the name attribute for the first time, finally, I found this error after finding it for a long time with the help of my colleagues.

VaR STR = $ ('# registerform'). formserialize (); // registerform is form ID Alert (STR );

FIeldserialize()Is to serialize form elements in form with name as key, value as value for serialization, therefore, you must set the form element name attribute for each form element and fill in the value of the form Element value.

VaR STR = $ ('# username). fieldserialize (); Alert (STR );