diff --git a/README.md b/README.md index fefdaff..24650a4 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ A [jQuery](http://www.jquery.com/) plugin that will show or hide a "dependent" f Example Usage --------------- -You probably want to just [look at the example](https://github.com/znbailey/jQuery-Dependent-Fields/blob/master/example.html), but if you prefer to read prose instead of code, here goes -- +You probably want to just [look at the example](http://jsfiddle.net/wvMJc/), but if you prefer to read prose instead of code, here goes -- `$('#dependent-field').dependsOn('#master-field');` @@ -19,12 +19,29 @@ You may additionally specify a conditional value or values: This only makes sense when used with a select element - if the value of the selected option is any of the specified values, the dependent field will be shown. +`$('#dependent-field').dependsOn('#master-field', [/^\d+$/, 'value2']);` + +It also supports regex syntax + +Also you can custom define the show and hide jequry effect and duration by passing options to the third parameter. Default option is: + +``` + var defaultOptions = { + 'effectShow': 'fadeIn', + 'effectShowDuration': 300, + 'effectHide': 'fadeOut', + 'effectHideDuration': 300 + }; +``` + *Note*: Like you'd expect, you may use any jQuery selector for the first call. The plugin is also written to support idiomatic jQuery chain-ability so you can do things like: `$('input.depends-on-xyz').dependsOn('#xyz').somethingElse().anotherThing()` Known Limitations/Shortcomings --------------- +All these limitations are now supported in this version + +~~* Only works with checkboxes and select elements.~~ -* Only works with checkboxes and select elements. -* The plugin depends on your form field being wrapped in a row using a paragraph tag as it looks for the closest wrapping paragraph tag to show/hide. If you use a div or some other element type to wrap your form rows, you will need to modify the .closest('p') calls to use .closest('div') or whatnot. \ No newline at end of file +~~* The plugin depends on your form field being wrapped in a row using a paragraph tag as it looks for the closest wrapping paragraph tag to show/hide. If you use a div or some other element type to wrap your form rows, you will need to modify the .closest('p') calls to use .closest('div') or whatnot.~~ diff --git a/example.html b/example.html index bffb039..14b49d4 100644 --- a/example.html +++ b/example.html @@ -3,59 +3,62 @@ Dependent field example - +

Dependent Fields Example

+
-

Checkbox

-

- - -

-

- - -

-

- - -

-

Dropdown

-

- - -

-

- - -

- +

Checkbox

+ +

+ + +

+

+ + +

+

+ + +

+

Dropdown

+ + +

+ + +

+

Textfield

+ +

+ + +

+

text: + +

+
- \ No newline at end of file + diff --git a/jquery.dependent.fields.js b/jquery.dependent.fields.js index d25b009..259b3e5 100644 --- a/jquery.dependent.fields.js +++ b/jquery.dependent.fields.js @@ -1,31 +1,67 @@ -(function( $ ){ +(function ($) { + var defaultOptions = { + 'effectShow': 'fadeIn', + 'effectShowDuration': 300, + 'effectHide': 'fadeOut', + 'effectHideDuration': 300 + }; + $.fn.dependsOn = function (element, value, options) { + options = options || {}; + $.extend(options, defaultOptions); + var elements = this; + var checkMatch = function (fieldValue, value) { + var matched = false; + if ($.isArray(fieldValue)) { + for (var i in fieldValue) { + if (checkMatch(fieldValue[i], value)) { + return true; + } + } + return false; + } + if ($.isArray(value)) { + for (var j in value) { + if (checkMatch(fieldValue, value[j])) { + return true; + } + } + return false; + } + if (!value) { + matched = fieldValue && $.trim(fieldValue) !== ''; + } + else if (typeof (fieldValue) == "string") { + if (typeof (value) === 'string') { + matched = value == fieldValue; + } else if (value instanceof RegExp) { + matched = value.test(fieldValue); + } + } + return matched; + }; + //add change handler to element + $(element).change(function () { + var $this = $(this); + var showEm = false; + switch (true) { + case $this.is('input[type="checkbox"]'): + showEm = $this.is(':checked'); + break; + case $this.is('select'): + case $this.is(':text,[type=password],textarea, [type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=range], [type=search], [type=tel], [type=time], [type=url], [type=week]'): + var fieldValue = $this.val(); + showEm = checkMatch(fieldValue, value); + break; + } + if(showEm) { + elements[options.effectShow](options.effectShowDuration); + } + else { + elements[options.effectHide](options.effectHideDuration); + } + }); - $.fn.dependsOn = function(element, value) { - var elements = this; - //add change handler to element - $(element).change(function(){ - var $this = $(this); - var showEm = false; - if ( $this.is('input[type="checkbox"]') ) { - showEm = $this.is(':checked'); - } else if ( $this.is('select') ) { - var fieldValue = $this.find('option:selected').val(); - var showEm = false; - if ( !value ) { - showEm = fieldValue && $.trim(fieldValue) != ''; - } else if (typeof(value) === 'string') { - showEm = value == fieldValue; - } else if ($.isArray(value)) { - showEm = ($.inArray(fieldValue, value) !== -1); - } - } - elements.closest('p').toggle(showEm); - }); - - //hide the dependent fields - return elements.each(function(){ - var $this = $(this); - $this.closest('p').hide(); - }); - }; -})( jQuery ); \ No newline at end of file + //hide the dependent fields + return elements.hide(); + }; +})(jQuery);