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