Skip to content

Add functionality for supporting text input as depending field #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Add functionality for supporting text input as depending field #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e2c16de
Update jquery.dependent.fields.js
laravelcms-zz Jul 20, 2013
5a972e2
Update README.md
laravelcms-zz Jul 20, 2013
d350a63
Update README.md
laravelcms-zz Jul 20, 2013
ac4ebb2
Update README.md
laravelcms-zz Jul 20, 2013
1e95cc0
Update README.md
laravelcms-zz Jul 20, 2013
b40566c
Update example.html
laravelcms-zz Jul 20, 2013
76d1da3
Update jquery.dependent.fields.js
laravelcms-zz Jul 20, 2013
d9a7ea8
Update jquery.dependent.fields.js
laravelcms-zz Jul 20, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');`

Expand All @@ -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.
~~* 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.~~
97 changes: 50 additions & 47 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,62 @@
<head>
<meta charset="utf-8">
<title>Dependent field example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.dependent.fields.js"></script>
</head>
<body>
<h1>Dependent Fields Example</h1>

<form action="#">
<h3>Checkbox</h3>
<p>
<label for="master-checkbox">
Master Checkbox
</label>
<input id="master-checkbox" type="checkbox"/>
</p>
<p>
<label for="dependent-field1">
Depends on Master 1
</label>
<input id="dependent-field1" class="depends-on-master-checkbox" type="text"/>
</p>
<p>
<label for="dependent-field2">
Depends on Master 2
</label>
<textarea id="dependent-field2" class="depends-on-master-checkbox"></textarea>
</p>
<h3>Dropdown</h3>
<p>
<label for="master-dropdown">
Master Dropdown
</label>
<select id="master-dropdown">
<option value="">-- Select a Country --</option>
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="United States">United States</option>
</select>
</p>
<p>
<label for="dependent-dropdown">
Dependent Dropdown
</label>
<select id="dependent-dropdown">
<option value="">-- Select a State / Territory --</option>
<option value="Alabama">Alabama</option>
<option value="Saskatchewan">Saskatchewan</option>
</select>
</p>
<input type="submit"/>
<h3>Checkbox</h3>

<p id="check1">
<label for="master-checkbox">Master Checkbox</label>
<input id="master-checkbox" type="checkbox" />
</p>
<p class="depends-on-master-checkbox">
<label for="dependent-field1">Depends on Master 1</label>
<input id="dependent-field1" type="text" />
</p>
<p class="depends-on-master-checkbox">
<label for="dependent-field2">Depends on Master 2</label>
<textarea id="dependent-field2"></textarea>
</p>
<h3>Dropdown</h3>

<p id="dropdown1">
<label for="master-dropdown">Master Dropdown</label>
<select id="master-dropdown" multiple="true">
<option value="">-- Select a Country --</option>
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="United States">United States</option>
</select>
</p>
<p id="dependent-dropdown">
<label for="dependent-dropdown">Dependent Dropdown</label>
<select>
<option value="">-- Select a State / Territory --</option>
<option value="Alabama">Alabama</option>
<option value="Saskatchewan">Saskatchewan</option>
</select>
</p>
<h3>Textfield</h3>

<p>
<label for="text1">Master Dropdown</label>
<input id="text1" name="text1" />
</p>
<p id="text-deps">text:
<input />
</p>
<input type="submit" />
</form>
</body>
<script>
$('.depends-on-master-checkbox').dependsOn('#master-checkbox');
$('#dependent-dropdown').dependsOn('#master-dropdown', ['Canada', 'United States']);
$('.depends-on-master-checkbox').dependsOn('#master-checkbox');
$('#dependent-dropdown').dependsOn('#master-dropdown', ['Canada', 'United States']);
$("#text-deps").dependsOn("#text1", [/abc/, 'de', ['1', '2', '3']]);
</script>
</html>
</html>
96 changes: 66 additions & 30 deletions jquery.dependent.fields.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 );
//hide the dependent fields
return elements.hide();
};
})(jQuery);