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 | ArrayGet defaultValue of first element in the set of matched elements
-
defaultValue(value)(String, Array) -> jQuerySet defaultValue of each matched element
-
syncDefaultValue()-> jQuerySync 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
defaultValueproperty.
``` ```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
defaultSelectedequals 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
defaultSelectedequals 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
defaultCheckedproperty.
``` ```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
defaultCheckedproperty.
``` ```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
