search
HomeWeb Front-endJS TutorialJquery submission form Form.js official plug-in introduction_jquery

Let’s first talk about the commonly used Form plug-ins, which support Ajax and Ajax file upload. They are powerful and can basically meet daily applications.
1. Download the latest JQuery framework software package
jquery.js compressed package
jquery.js non-compressed package
2. Download the Form plug-in
form.js

3. A simple introduction to the Form plug-in
Step 1: Add a form
Code:

Copy the code The code is as follows:


Name:
Comment:



Step 2: Include the jquery.js and form.js files
code:
Copy code The code is as follows:


> ;




3. Detailed usage and application examples of the Form plug-in
http://www.malsup.com/jquery/form/
=========== =================
The author of this plug-in said this when introducing form.js:
Quote:
Submitting a form with AJAX doesn't get any easier than this!
It means that you can't get any easier than this when using Ajax to submit a form. Haha——, whether it blows water or not, you will know after using it.

Form plug-in API

English original text: http://www.malsup.com/jquery/form/#api
The form plug-in API provides several methods to allow you to easily manage Form data and making form submissions.
ajaxForm
Add all required event listeners to prepare the form for AJAX submission. ajaxForm cannot submit the form. In the document's ready function, use ajaxForm to prepare for AJAX submission of the form. ajaxForm accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:
Copy code The code is as follows:

$( '#myFormId').ajaxForm();
ajaxSubmit

The form will be submitted by AJAX immediately. In most cases, ajaxSubmit is called to respond to the user submitting the form. ajaxSubmit accepts 0 or 1 parameters. This single parameter can be either a callback function or an Options object.
Chainable: Yes.
Example:
Code:
Copy code The code is as follows:

// Bind the form submission event handler
$('#myFormId').submit(function() {
// Submit the form
$(this).ajaxSubmit();
// In order to prevent Ordinary browsers perform form submission and generate page navigation (prevent page refresh?) return false
return false;
});
formSerialize

Serialize the form (or serialized) into a query string. This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:
Copy code The code is as follows:

var queryString = $('#myFormId').formSerialize();
// Now you can use $.get, $.post, $.ajax, etc. to submit data
$.post('myscript.php', queryString );
fieldSerialize

Serialize (or serialize) the form's field elements into a query string. This is convenient when only some form fields need to be serialized (or serialized). This method will return a string in the following format: name1=value1&name2=value2.
Chainable: No, this method returns a string.
Example:
Code:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
Returns the form element value that matches the inserted array. As of version 0.91, this method will always return data as an array. If the element value is judged to be potentially invalid, the array is empty, otherwise it contains one or more element values.
Chainable: No, this method returns an array.
Example:
Code:
Copy code The code is as follows:

// Get 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.
Example:
Code:
$('#myFormId').resetForm();
clearForm
Clear the form element. This method clears all text input fields, password input fields, and textarea fields, clears the selection in any select elements, and clears all radio buttons and multi-selects. (checkbox) button resets to its unselected state.
Chainable: Yes.
Code:
$('#myFormId').clearForm();
clearFields
Clear field elements. It is convenient to use only when some form elements need to be cleared.
Chainable: Yes.
Code:
$('#myFormId .specialFields').clearFields();
Options object
Both ajaxForm and ajaxSubmit support numerous option parameters, which can be provided using an Options object . Options is just a JavaScript object, which contains the following collection of attributes and values:
target
indicates the element in the page that is updated by the server response. The element's 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
Specifies the method for submitting form data: "GET" or "POST".
Default value: The method attribute value of the form (defaults to "GET" if not found).
beforeSubmit
Callback function called before the form is submitted. The "beforeSubmit" callback function is provided as a hook to run pre-submit logic or validate form data. If the "beforeSubmit" callback function returns false, the form will not be submitted. The "beforeSubmit" callback function takes three calling parameters: form data in the form of an array, jQuery form object, and the Options object passed in ajaxForm/ajaxSubmit. The form array accepts data in the following manner:
Code:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
Default value :null
success
Callback function called after the form is successfully submitted. If a "success" callback function is provided, it is called when the response is returned from the server. Then the dataType option value determines whether the value of responseText or responseXML is returned.
Default value: null
dataType
The data type expected to be returned. One of null, "xml", "script" or "json". dataType provides a method that specifies how to handle the server's response. This is reflected directly into the jQuery.httpData method. The following values ​​are supported:
'xml': If dataType == 'xml', the server response will be treated as XML. At the same time, if the "success" callback method is specified, the responseXML value will be returned.
'json': If dataType == '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 will evaluate to plain text.
(Annotation: Some of the places above were not clear, so I had to paraphrase them, hoping to express the original meaning.)
Default value: null (the server returns the responseText value)
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 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".
Boolean flag indicating whether the data must be submitted in strict semantic order (slower?). Note: Generally speaking, forms are serialized (or serialized) in semantic order, except for input elements of type="image". If your server has strict semantic requirements and the form contains an input element of type="image", you should set semantic to true. (Translation note: Because this paragraph is incomprehensible, the translation may not be clear, but please correct me.)
Default value: false
resetForm
Boolean flag, indicating whether to reset if the form 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:
Code:
[/code]
// Prepare Options object
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
} };
// Pass options to ajaxForm
$('#myForm').ajaxForm(options);
[/code]
Note: The Options object can also be used to pass values ​​to jQuery’s $.ajax method. If you are familiar with the options supported by $.ajax, you can use them to pass Options objects to ajaxForm and ajaxSubmit.
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UsePython vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesPython vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C   to JavaScript: How It All WorksFrom C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsJavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldBeyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools