jquery.defaultValue

Getting, setting and sync defaultValue with value property of HTML form elements via jQuery

Summary

jQuery defaultValue plugin works exactly like .val() native method except returns defaultValue rather than value property.

Installation

bower install jquery.defaultValue

API Reference

• defaultValue() -> String | Array

  Get defaultValue of first element in the set of matched elements

• defaultValue(value) (String, Array) -> jQuery

  Set defaultValue of each matched element

• syncDefaultValue() -> jQuery

  Sync defaultValue with current value of each matched element

Usage

Get the defaultValue of first element in the set of matched elements

• For text input element, it returns value based on its defaultValue property.

``` ```javascript $('input:text').defaultValue(); $('input:text').eq(1).defaultValue(); ``` Expected result: ```javascript "foo" "bar" ```

• For single select element, it returns value of nested option that defaultSelected equals true.

foo text bar text ``` ```javascript $('select').defaultValue(); ``` Expected result: ```javascript "bar" ```

• For multiple select element, it returns array of values of nested option that defaultSelected equals true.

hello text foo text bar text world text ``` ```javascript $('select').defaultValue(); ``` Expected result: ```javascript ["foo", "bar"] ```

• For checkbox input element, it returns value that is based on its defaultChecked property.

``` ```javascript $('input:checkbox').defaultValue(); $('input:checkbox').eq(1).defaultValue(); ``` Expected result: ```javascript "foo" undefined ```

• For radio input element, it returns value that is based on its defaultChecked property.

``` ```javascript $('input:radio').defaultValue(); $('input:radio').eq(1).defaultValue(); ``` Expected result: ```javascript undefined "bar" ```

Set the defaultValue of each matched element

For text input element, native DOM deafultValue property of each matched element will be updated to specified value.

$('input:text').defaultValue(value);

For **single select** element, `defaultSelected` property of option with specified value will be updated to `true`.

> ```html
<select>
  <option value="foo" selected>foo</option>
  <option value="bar">bar</option>
</select>

$('select').defaultValue('bar');

Expected result:

$('select').defaultValue();
-> "bar"

For multiple select element, it accepts an array as value.

foo bar baz ``` ```javascript $('select').defaultValue(['bar', 'baz']); ``` Expected result: ```javascript $('select').defaultValue(); -> ["bar", "baz"] ```

It also supports passing null or empty Array [] as none of options to be selected

foo bar baz ``` ```javascript $('select').defaultValue(null); // or $('select').defaultValue([]); ``` Expected result: ```javascript $('select').defaultValue(); -> null ```

For checkbox element, it accpets an boolean status as value.

``` ```javascript $('input:checkbox').defaultValue(false); ``` Expected result: ```javascript $('input:checkbox').defaultValue(); -> false ```

For radio element, it works exactly same with checkbox element.

Sync the defaultValue with value property of each matched element

syncDefaultValue() is helper method for simply sync defaultValue by current value property.

Typical scenario

In a single page application, we'd sync defaultValue for all form elments to make sure form.reset() method work as expected after the form has been submitted via Ajax.

Here's the code for this scenario:

var form = document.forms[0];
$.post(form.attr('action'), $(form).serialize())
 .done(function(){
   $(form.elements).syncDefaultValue();
 });

Change Log

• v0.2.0, 10.10.14, Add support for setting null to multiple select
• v0.1.0, 21.03.14, First release