jQuery - Form

jquery

https://www.sitepoint.com/10-jquery-form-plugins/
http://malsup.com/jquery/form/
https://github.com/malsup/form
http://www.jqueryrain.com/example/jquery-form-plugin/
http://blog.teamtreehouse.com/best-free-jquery-form-plugins-to-improve-user-experience

How many jQuery plugins are available for working with forms?

There are a lot of jQuery plugins available for working with forms. The most noticeable was jQuery Form, but we should look at other plugins for working with forms as well.

What are the methods offered by the jQuery Form plugin?

  1. fieldValue
  2. formSerialize
  3. fieldSerialize

What are the differences between fieldValue() and val()?

We can get the values of form controls using the fieldValue() command. At first glance, you might think that fieldValue() and val() are redundant. But prior to jQuery 1.2, the val() command was considerably less capable, and fieldValue() was designed to make up for its deficiencies.

The first major difference is that fieldValue() returns an array of all the values for form controls in its wrapped set, whereas val() only returns the value of the first element and only if that element is a form control. In fact, fieldValue() always returns an array, even if it only has one value or no values to return.

What is the default behavior of the fieldValue() method?

Like val(), the fieldValue() method, by default, returns values only for controls that are deemed successful according to the HTML Specification ( http://www.w3.org/TR/REC-html40/ ). In a nutshell, successful controls are those that have the name attributes, aren't disabled, and are checked (for check boxes or radio buttons). Some controls such as the reset button are always considered as unsuccessful and never participate in a form submission. Other controls such as the select control must have a selected value to be considered successful. The fieldValue() method gives us a choice whether to include unsuccessful values or not:

fieldValue(excludeUnsuccessful)

Collects the values of all successful controls in the wrapped set and returns them as an array of strings. If no values are found, an empty array is returned.

  1. excludeUnsuccessful: (Boolean). If true or omitted, specified that any unsuccessful controls in the wrapped set be ignored.

What is the purpose and signature of the formSerialize() method?

The formSerialize() method accepts a form in the wrapped set and serialize all the successful child controls

formSerialize(semantic)

Creates and returns a properly formatted and encoded query string from the values of all successful controls in the wrapped form.

  1. semantic: (Boolean). Specifies that the order of the values in the query string follows the semantic order of the elements, the order in which the elements are declared in the form. This option can be slower than allowing random order.

What is the purpose and signature of the fieldSerialize() method?

The fieldSerialize() method serializes all of the controls in the wrapped set and is useful for serializing only a portion of a form.

fieldSerialize(excludeUnsuccessful)

Creates and returns a properly formatted and encoded query string from the values of controls in the wrapped set.

  1. excludeUnsuccessful: (Boolean). If true, or omitted, specifies that any unsuccessful controls in the wrapped set be ignored.

What is the difference between clearForm() and resetForm()?

The clearForm() method clears all fields in the wrapped form, whereas the resetForm() command reset the fields. When resetForm() is called, it uses the native reset() method. This reverts the value of the controls to what is specified in the original HTML markup. For examples, controls such as text fields are reverted to the value specified in the value attribute, and other control types revert to settings specified by checked or selected attributes. In other words, use the clearForm() method if we need to clear all the fields rather than reverting to the default values.

How can we submit a form using the ajaxSubmit method?

The ajaxSubmit method is provided by the jQuery Form plugin. If we do not have the jQuery Form plugin loaded, we can still submit a form using AJAX via the combination of $.post and the serialize() method.

ajaxSubmit(options)

Generates an Ajax request using the successful controls within the form in the wrapped set. The options parameters can be used to specify optional settings.

  1. options: (Object | Function). An optional object hash containing properties. If the only desired option is a success callback, it can be passed in place of the options hash.
  1. url: (String). The URL to which the Ajax request will be submitted. If omitted, the URL will be taken from the action attribute of the target form.
  2. type: (String). The HTTP method to use when submitting the request, such as GET or POST. If omitted, the value specified by the target form's method is used. If not specified and the form has not method attribute, GET is used.
  3. dataType: (String). The expected data type of the response, which determine how the response body will be post-processed. If specified, it must be one of the following:
    1. xml: Treated as XML data. Any success callback will be passed the responseXML document
    2. json: Treated as a JSON construct. The JSON is evaluated, and the result is passed to any success callback.
    3. script: Treated as JavaScript. The script will be evaluated in the global context.
    4. If omitted, no post-processing of the data, except as specified by other options such as target, take place.
  4. target: (String | Object | Element). Specifies a DOM element or elements to receive the response body as content. This can be a string depicting a jQuery selector, a jQuery wrapper containing the target element, or a DOM element. If omitted, no element receives the response body.
  5. beforeSubmit: (Function). Specifies a callback function invoked prior to initiating the Ajax request. This callback is useful for performing any pre-processing operation including validation. If this callback returns the value false, the form submission is cancelled. This callback is passed the following parameters:
    1. An array of data values passed to the request as parameters. This is an array of objects; each containing two properties, name and value, containing the name and value of a request parameter.
    2. The jQuery matched set that the command was applied to.
    3. The options object that was passed to the command
    4. If omitted, no pre-processing callback is invoked.
  6. success: (Function). Specifies a callback invoked after the request has completed and returned as response with successful status. This callback is passed the following parameters:
    1. The response body as interpreted according to the dataType option.
    2. A string containing 'success'.
    3. The jQuery matched set that the command was applied to.
    4. If omitted, no success callback is invoked. If this is the only option to be specified, this function can be passed directly to the command in place of the options hash. Note that no provision had been made for a callback upon error conditions.
  7. clearForm: (Boolean). If specified and true, the form is cleared after a successful submission.
  8. resetForm: (Boolean). If specified and true, the form is reset after a successful submission.
  9. semantic: (Boolean). If specified and true, the form parameters are arranged in semantic order.
  10. other options: See the options that are available with the $.ajax() method.

How can we submit a form using ajaxSubmit and have the result displayed in a specific element?

$('#targetForm').ajaxSubmit({ target: '#target' });

What is the difference between ajaxSubmit() and ajaxForm()?

We could leverage our knowledge of event handling and ajaxSubmit() to submit the form ourselves. However, we do not have to. The ajaxForm() method instruments the form so that the submission is blocked when the form is submitted through one of the normal event such as clicking on the submit button or pressing the Enter key when the form has focus.

ajaxForm() uses ajaxSubmit() internally.

ajaxForm(options)

Instruments the form so that when submission of the form is triggered, the submission is handled via ajaxSubmit().

  1. options: The options parameter passed to this method is passed onto the ajaxSubmit call.
$('#targetForm').ajaxForm()

What is the purpose of the ajaxFormUnbind() method?

If we have bind ajaxForm to a form, but for some reason, we want to undo that, we can use ajaxFormUnbind().

$('#targetForm').ajaxFormUnbind()

How can we handle file upload using the jQuery Form plugin?

A somewhat hidden but useful feature of the jQuery Form plugin is its ability to automatically detect and deal with forms that need to upload files specified by input element of type="file". Because AJAX is unable to accommodate such requests, the ajaxSubmit() function, and the ajaxForm() function dynamically create a hidden iframe, while setting the content type of the request correctly as multipart/form-data.

From the perspective of the page, this works exactly like regular ajaxSubmit function.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License