Permalink
Browse files

Version 1.1.7

- Removed jquery.min.js file
- Combined examples.html and new_examples.html
- Resolved issues #3, #4, #5 (from pull request of @beatobongco)
- Clean up merge from pull request of @beatobongco
- Allows passing values for multi-valued elements using an array
- Fixed bug when class selector is used for checkboxes when an array of
values is passed
- Removed new_examples.html
- Updated README.md to include new features
- Cleaned up code
  • Loading branch information...
hyubs committed Mar 3, 2013
1 parent 88da528 commit 32ed7493a4760585b76d3835d3ec93403f335bc2
Showing with 160 additions and 274 deletions.
  1. +94 −0 README.md
  2. +45 −16 examples.html
  3. +1 −1 floodling.jquery.json
  4. +18 −35 jquery.floodling.js
  5. +2 −2 jquery.floodling.min.js
  6. +0 −100 jquery.floodlingbackup.js
  7. +0 −5 jquery.min.js
  8. +0 −115 new_examples.html
View
@@ -92,6 +92,90 @@ $('#myForm').floodling({
});
```
+### Setting multiple values of an element ###
+
+This is applicable to multiple selects and checkbox groups.
+
+Follow the same syntax as above but pass an array.
+
+#### Setting the value of a single element - With scope selector ####
+
+```html
+<form id="myForm">
+ Foo 1<br />
+ <select name="f1[]" id="myMulti" multiple="multiple">
+ <option value="boo">boo</option>
+ <option value="foo">foo</option>
+ <option value="gloo">gloo</option>
+ <option value="doo">doo</option>
+ </select><br />
+
+ Foo 2<br />
+ <input type="checkbox" name="f2[]" value="boo" /> boo<br />
+ <input type="checkbox" name="f2[]" value="foo" /> foo<br />
+ <input type="checkbox" name="f2[]" value="gloo" /> gloo<br />
+ <input type="checkbox" name="f2[]" value="doo" /> doo
+</form>
+```
+
+```javascript
+$('#myForm').floodling('f1', ["boo", "gloo"]);
+$('#myForm').floodling('f2', ["foo", "gloo"]);
+```
+
+#### Setting the value of a single element - Element selector ####
+
+```html
+<form id="myForm">
+ Foo 1<br />
+ <select name="f1[]" id="myMulti" multiple="multiple">
+ <option value="boo">boo</option>
+ <option value="foo">foo</option>
+ <option value="gloo">gloo</option>
+ <option value="doo">doo</option>
+ </select><br />
+
+ Foo 2<br />
+ <input type="checkbox" name="f2[]" class="f2" value="boo" /> boo<br />
+ <input type="checkbox" name="f2[]" class="f2" value="foo" /> foo<br />
+ <input type="checkbox" name="f2[]" class="f2" value="gloo" /> gloo<br />
+ <input type="checkbox" name="f2[]" class="f2" value="doo" /> doo
+</form>
+```
+
+```javascript
+$('#myForm').floodling(["boo", "gloo"]);
+$('.f2').floodling(["foo", "doo"]);
+```
+
+#### Setting the values of multiple elements ####
+
+```html
+<form id="myForm">
+ Foo 1<br />
+ <select name="f1[]" id="myMulti" multiple="multiple">
+ <option value="boo">boo</option>
+ <option value="foo">foo</option>
+ <option value="gloo">gloo</option>
+ <option value="doo">doo</option>
+ </select><br />
+
+ Foo 2<br />
+ <input type="checkbox" name="f2[]" value="boo" /> boo<br />
+ <input type="checkbox" name="f2[]" value="foo" /> foo<br />
+ <input type="checkbox" name="f2[]" value="gloo" /> gloo<br />
+ <input type="checkbox" name="f2[]" value="doo" /> doo
+</form>
+```
+
+```javascript
+$('#myForm').floodling({
+ f1: ["boo", "gloo"],
+ f2: ["foo", "gloo"]
+});
+```
+
+
## Works For ##
@@ -127,3 +211,13 @@ Floodling can populate the following form elements:
* reset
* textarea
* select (single and multiple)
+
+
+## License ##
+
+[MIT License](http://www.opensource.org/licenses/mit-license.php)
+
+
+## Contributors ##
+
+* [beatobongco](https://github.com/beatobongco)
View
@@ -26,7 +26,7 @@ <h3>Single Select (Dropdown)</h3>
</p>
<h3>Multiple Select</h3>
<p>
- <select name="f5[]" multiple="multiple">
+ <select name="f5[]" id="myMulti" multiple="multiple">
<option value="boo">boo</option>
<option value="foo">foo</option>
<option value="gloo">gloo</option>
@@ -48,11 +48,11 @@ <h3>Check Box</h3>
<input type="checkbox" name="f7d" value="doo" /> doo
</p>
<h3>Check Box Group</h3>
- <p>
- <input type="checkbox" name="f8[]" value="boo" /> boo<br />
- <input type="checkbox" name="f8[]" value="foo" /> foo<br />
- <input type="checkbox" name="f8[]" value="gloo" /> gloo<br />
- <input type="checkbox" name="f8[]" value="doo" /> doo
+ <p id="myCBG">
+ <input type="checkbox" name="f8[]" class="f8" value="boo" /> boo<br />
+ <input type="checkbox" name="f8[]" class="f8" value="foo" /> foo<br />
+ <input type="checkbox" name="f8[]" class="f8" value="gloo" /> gloo<br />
+ <input type="checkbox" name="f8[]" class="f8" value="doo" /> doo
</p>
<h3>Buttons - submit, reset, button</h3>
<p>
@@ -67,32 +67,61 @@ <h3>Image Button</h3>
<p>&nbsp;</p>
<p>Check <a href="//github.com/hyubs/floodling">GitHub</a> for a complete list of supported form elements.</p>
</form>
-<script src="jquery.min.js"></script>
-<script src="jquery.floodling.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script src="jquery.floodling.min.js"></script>
<script>
$(function() {
+ // [BASIC USAGE]
+
// You can use a selector for the specific element
$('#myF1').floodling('hello');
-
- // Or, you can use a JSON object
+
+ // Or, select a specific form and change the values of multiple elements using a JSON object
$('#myForm').floodling({
f2: "foo2",
f3: "foo3",
f4: "foo"
});
- // Or, pass a name+value pair
- $('#myForm').floodling('f5[]', 'foo');
- $('#myForm').floodling('f5[]', 'doo');
- $('#myForm').floodling('f6', "foo");
+ // Or, select a specific form and change the value of a specific element
+ $('#myForm').floodling('f6', 'gloo');
$('#myForm').floodling('f7b', 0);
$('#myForm').floodling('f7d', true);
- $('#myForm').floodling('f8[]', 'foo');
- $('#myForm').floodling('f8[]', 'gloo');
$('#myForm').floodling('f9', 'doos');
$('#myForm').floodling('f10', 'door');
$('#myForm').floodling('f11', 'doob');
$('#myForm').floodling('f12', 'http://lorempixel.com/200/200/food/');
+
+ // [PASSING ARRAYS FOR MULTI-VALUED ELEMENTS]
+
+ // MULTIPLE SELECT
+ // scope selector, JSON - selects boo, foo
+ $('#myForm').floodling({
+ 'f5[]': ["boo","foo"]
+ });
+
+ // element selector, values only - deselects boo, selects gloo
+ $('#myMulti').floodling(['boo','gloo']);
+ // result: selected: foo, gloo
+
+ // scope selector, name and values - delesects foo, selects doo
+ $('#myForm').floodling('f5[]', ['foo','doo']);
+ // end result: selected: gloo, doo
+
+ // CHECKBOX
+ // element selector, values only - selects gloo, doo
+ $('.f8').floodling(['gloo','doo']);
+ // result: selected: gloo, doo
+
+ // scope selector: name and values - selects boo; deselects doo
+ $('#myForm').floodling('f8[]', ['boo','doo']);
+ // result: boo, gloo
+
+ //scope selector: JSON - selects foo; deselects boo
+ $('#myForm').floodling({
+ 'f8[]': ["boo", "foo"]
+ });
+ // result: foo, gloo
});
</script>
View
@@ -7,7 +7,7 @@
"form",
"input"
],
- "version": "1.1.6",
+ "version": "1.1.7",
"author": {
"name": "Hyubs Ursua",
"url": "https://github.com/hyubs/floodling"
View
@@ -1,19 +1,10 @@
/**
- * jQuery floodling v1.1.6 https://github.com/hyubs/floodling
+ * jQuery floodling v1.1.7 https://github.com/hyubs/floodling
* Written by Hyubs Ursua
* Copyright (c) 2013
* Website: https://github.com/hyubs/floodling
* License: http://www.opensource.org/licenses/mit-license.php
*/
- /**
- * Changelog:
- * 1. Changed instances of attr to prop, applied necessary corrections.
- * 2. Changed Object.prototype.toString.call to typeof
- * 3. Fixed bug with radio button by allowing the passing of "name" parameter.
- * 4. Allowed passing of arrays only for multiple selects and checkboxes
- * 5. Removed var nameLen = name.length; from else if tag=='select', multiple
- * 6. Using floodling on an already selected or checked value (for multi selects and checkboxes) now deselects it
- */
(function( $ ) {
$.fn.floodling = function() {
var parent, elem, val, names, elemSelector;
@@ -27,6 +18,7 @@
parent = $('body');
elem = $(this);
val = arguments[0];
+ name = elem.attr('name');
setValue(parent, elem, val, name);
return;
}
@@ -42,9 +34,9 @@
val = names[name];
elem = parent.find('[name="' + name + '"]');
setValue(parent, elem, val, name);
-
}
};
+
function setValue(parent, elem, val, name) {
if(typeof elem !== 'undefined' && elem.length > 0) {
var tag = elem.prop("tagName").toLowerCase();
@@ -55,29 +47,28 @@
elem.val(val);
}
else if(type == 'radio') {
- //changed to .prop("checked", true) because prop was added in jQuery 1.6 and attr does not work well anymore
parent.find('[name="' + name + '"][value="' + val + '"]').prop("checked", true);
}
else if(type == 'checkbox') {
var nameLen = name.length;
if(nameLen > 2 && name.substring(nameLen - 2, nameLen) == '[]') {
- if(val instanceof Array){
+ if(val instanceof Array) {
for (var i = 0; i < val.length; i++){
var cbox = parent.find('[name="' + name + '"][value="' + val[i] + '"]');
- if(cbox.prop('checked')==true){
+ if(cbox.prop('checked')) {
cbox.prop('checked', false);
}
- else{
+ else {
cbox.prop('checked', true);
}
}
}
- else{
+ else {
var cbox = parent.find('[name="' + name + '"][value="' + val + '"]');
- if(cbox.prop('checked')==true){
+ if(cbox.prop('checked')) {
cbox.prop('checked', false);
}
- else{
+ else {
cbox.prop('checked', true);
}
}
@@ -87,7 +78,7 @@
elem.prop('checked', true);
}
else {
- elem.removeAttr('checked');
+ elem.prop('checked', false);
}
}
}
@@ -113,39 +104,31 @@
else if(typeof selectVal === 'string') {
selectVal = [selectVal];
}
- if(val instanceof Array)
- {
+ if(val instanceof Array) {
for (var i = 0; i < val.length; i++) {
-
var ms = parent.find('[value="' + val[i] + '"]');
if(ms.prop('selected')==true){
ms.prop('selected', false);
}
else{
ms.prop('selected', true);
}
- //selectVal.push(val[i]);
- //elem.val(selectVal);
}
}
- else{
+ else {
var ms = parent.find('[value="' + val + '"]');
- if(ms.prop('selected')==true){
- ms.prop('selected', false);
- }
- else{
- ms.prop('selected', true);
- }
- //selectVal.push(val);
- //elem.val(selectVal);
+ if(ms.prop('selected')==true) {
+ ms.prop('selected', false);
+ }
+ else {
+ ms.prop('selected', true);
+ }
}
-
}
else {
elem.val(val);
}
}
-
}
else {
console.error('Element $("' + elem.selector +'") was not found.');
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 32ed749

Please sign in to comment.