added a new feature inputFilter to FormDataOptions

brainfoolong · Apr 1, 2021 · fac6344 · fac6344
1 parent 86186fd
commit fac6344
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+### 1.3.0 - 1. April 2021
+* added a new feature `inputFilter` to `FormDataOptions` - Thanks to [@alcalyn](https://github.com/alcalyn) for the idea and initial coding in [#8](https://github.com/brainfoolong/form-data-json/issues/8)
+
 ### 1.2.2 - 9. December 2020
 * fixed node module usage [#7](https://github.com/brainfoolong/form-data-json/issues/7)
 

diff --git a/README.md b/README.md
@@ -61,6 +61,10 @@ let values = FormDataJson.formToJson(document.querySelector("form"), new FormDat
 ```javascript
 FormDataJson.formToJson(document.querySelector("form"), null, function(values){})
 ```
+###### Read form input values but filter out, for example,  all password fields
+```javascript
+let values = FormDataJson.formToJson(document.querySelector("form"), new FormDataJsonOptions({ inputFilter: function(inputElement) { return (inputElement.type || 'text') !== 'password' } }))
+``` 
 
 ###### Read a single input field
 ```javascript
@@ -71,41 +75,58 @@ let values = FormDataJson.getInputValue(document.querySelector("input"))
 ```javascript
 FormDataJson.fillFormFromJsonValues(document.querySelector("form"), {'name': 'BrainFooLong'})
 ```
+
 ###### Set form input values and unset all other existing input values
 ```javascript
 FormDataJson.fillFormFromJsonValues(document.querySelector("form"), {'name': 'BrainFooLong'}, new FormDataJsonOptions({ unsetAllInputsOnFill: true }))
 ```
 
+###### Set form input values but ignore, for example, password fields
+```javascript
+FormDataJson.fillFormFromJsonValues(document.querySelector("form"), {'name': 'BrainFooLong'}, new FormDataJsonOptions({ inputFilter: function(inputElement) { return (inputElement.type || 'text') !== 'password' } })
+```
+
 ###### Set a single input field
 ```javascript
 let values = FormDataJson.setInputValue(document.querySelector("input"), 'foo')
 ```
 
 ###### All options and their defaults
-You can edit this defaults to your needs.
+You can edit this defaults to your needs. You can pass this options directly to the `new FormDataOptions({...})` instantiation.
 ```javascript
 FormDataJsonOptions.defaults = {
-    /**
-     * Include all disabled inputs in result data
-     * @type {boolean}
-     */
-    includeDisabled: false,
-    /**
-     * Include checkboxes that are unchecked with a null, otherwise the key will not exist in result data
-     * @type {boolean}
-     */
-    includeUncheckedAsNull: false,
-    /**
-     * Include all input buttons/submits values, otherwise the key they will not exist in result data
-     * @type {boolean}
-     */
-    includeButtonValues: false,
-    /**
-     * Will unset all existing input fields in form when using fillFormFromJsonValues
-     * This will be helpful if you have checkboxes and want to fill from json object, but checkboxes still stay checked
-     * because the key not exist in the json data
-     * @type {boolean}
-     */
-    unsetAllInputsOnFill: false
-  }
+  /**
+   * Include all disabled inputs in result data
+   * @type {boolean}
+   */
+  includeDisabled,
+
+  /**
+   * Include checkboxes that are unchecked with a null, otherwise the key will not exist in result data
+   * @type {boolean}
+   */
+  includeUncheckedAsNull,
+
+  /**
+   * Include all input buttons/submits values, otherwise the key they will not exist in result data
+   * @type {boolean}
+   */
+  includeButtonValues,
+
+  /**
+   * Will unset all existing input fields in form when using fillFormFromJsonValues
+   * This will be helpful if you have checkboxes and want to fill from json object, but checkboxes still stay checked
+   * because the key not exist in the json data
+   * @type {boolean}
+   */
+  unsetAllInputsOnFill,
+
+  /**
+   * If set to a function, this will receive the current input element in progress of formToJson|fillFormFromJsonValues|unsetFormInputs
+   * It must return bool true to allow the script to progress the input element
+   * If other than true is returned, than the input will be skipped
+   * @type {FormDataJsonOptions~inputFilterCallback|null}
+   */
+  inputFilter
+}
 ```
diff --git a/dist/form-data-json.min.js b/dist/form-data-json.min.js
diff --git a/docs/example/playground.html b/docs/example/playground.html
@@ -70,7 +70,8 @@
     </style>
 </head>
 <body>
-<a href="https://github.com/brainfoolong/form-data-json"><img src="../logo-readme-github.png" alt="Form Data Json"></a><br/>
+<a href="https://github.com/brainfoolong/form-data-json"><img src="../logo-readme-github.png"
+                                                              alt="Form Data Json"></a><br/>
 <form name="myform" id="myform" autocomplete="off" spellcheck="false">
     <label class="field">
         <span class="label">First Name ([name='firstName'])</span>
@@ -155,6 +156,10 @@ <h3>Options</h3>
         <input type="checkbox" name="unsetAllInputsOnFill" value="1"> Unset all inputs that not exist in values when
         using fillFormFromJsonValues ("unsetAllInputsOnFill")
     </label>
+    <label class="field">
+        <input type="checkbox" name="inputFilter" value="1"> Ignore specific input elements with a filter, in this
+        example all 'password fields' ("inputFilter")
+    </label>
 </div>
 <div class="submit">
     <input class="button" type="button" id="tojson" value="Show JSON">
@@ -179,11 +184,25 @@ <h3>Results</h3>
 
     function getOptions () {
       let options = FormDataJson.formToJson(document.querySelector('.options'))
+      let optionsStringify = {}
       for (let i in options) {
+        optionsStringify[i] = options[i] === '1'
         options[i] = options[i] === '1'
+        if (i === 'inputFilter' && options[i]) {
+          optionsStringify[i] = '__inputFilter__'
+          options[i] = function (inputElement) {
+            return (inputElement.type || 'text') !== 'password'
+          }
+        }
+      }
+      let optionsStringified = JSON.stringify(optionsStringify)
+      optionsStringified = optionsStringified.replace(/"__inputFilter__"/ig, 'function(inputElement) { return (inputElement.type || \'text\') !== \'password\'}')
+      let optionsCall = Object.keys(options).length ? ', new FormDataJsonOptions(' + optionsStringified + ')' : ''
+      return {
+        'options': Object.keys(options).length ? new FormDataJsonOptions(options) : null,
+        'call': optionsCall,
+        'callfiles': optionsCall !== '' ? optionsCall : ', null'
       }
-      let optionsCall = Object.keys(options).length ? ', new FormDataJsonOptions(' + JSON.stringify(options) + ')' : ''
-      return { 'options': Object.keys(options).length ? new FormDataJsonOptions(options) : null, 'call': optionsCall, 'callfiles' : optionsCall !== '' ? optionsCall : ', null'}
     }
 
     function toJson () {