The Form module in Zepto handles form submission, which encompasses two main tasks: formatting form data into a structured format and triggering the submit event to send the data. This article dissects the core methods of this module using Zepto version 1.2.0.

.serializeArray()

$.fn.serializeArray = function() {
  var name, type, result = [],
      add = function(value) {
        if (value.forEach) return value.forEach(add)
        result.push({ name: name, value: value })
      }
  if (this[0]) $.each(this[0].elements, function(_, field){
    type = field.type, name = field.name
    if (name && field.nodeName.toLowerCase() != 'fieldset' &&
        !field.disabled && type != 'submit' && type != 'reset' && type != 'button' && type != 'file' &&
        ((type != 'radio' && type != 'checkbox') || field.checked))
      add($(field).val())
  })
  return result
}

serializeArray is the foundational method for data formatting, later used internally by serialize. It returns an array where each item is an object with name and value properties, representing the form element's name attribute and its value.

The add Helper

The add function processes each field value. If the value is an array (detected by the presence of forEach), it recursively traverses each element; otherwise, it pushes a { name, value } object into the result array.

Iterating Over Form Elements

The method targets only the first form element in the collection (this[0]) and accesses its fields via this[0].elements. The conditional filter excludes certain element types:

• fieldset elements are skipped.
• Disabled fields are ignored.
• Buttons (submit, reset, button) and file input are excluded.
• Radio buttons and checkboxes are included only when checked (field.checked is true).

Only fields with a name attribute that pass these checks are processed by add.

.serialize()

$.fn.serialize = function(){
  var result = []
  this.serializeArray().forEach(function(elm){
    result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
  })
  return result.join('&')
}

This method converts the structured array into a URL-encoded query string format (name=value&name2=value2). For each object, it applies encodeURIComponent to both the name and value, concatenates them with =, and joins all pairs with &. This string is suitable for standard form submissions or AJAX requests.

.submit()

$.fn.submit = function(callback) {
  if (0 in arguments) this.bind('submit', callback)
  else if (this.length) {
    var event = $.Event('submit')
    this.eq(0).trigger(event)
    if (!event.isDefaultPrevented()) this.get(0).submit()
  }
  return this
}

The submit method manages the actual form submission:

• If a callback argument is provided, it binds the callback to the submit event on the current element(s) using bind.
• Otherwise, it creates a synthetic submit event using $.Event and triggers it on the first form element in the collection (this.eq(0) returns a Zepto object). If the event's default action is not prevented (isDefaultPrevented() returns false), it calls the native submit() method on the underlying DOM element (this.get(0) returns a raw DOM node).

Note that eq() returns a Zepto object while get() returns the actual DOM element, enabling access to native methods.