Support radio/checkbox/select

holyjak · Feb 3, 2014 · e1b69d3 · e1b69d3
1 parent bd6798f
commit e1b69d3
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -77,13 +77,14 @@ Shortcomings
 ------------
 
 - URL is matched against the page URL, not iframe URL even if the form is in an iframe
+- Currently only works for fields that have the value attribute, i.e. not for radio/checkbox/select
 
 Todo
 ----------------
 
 - FORM:
   - find by label?
-  - (better) support for radio/check boxes
+  - (better) support for radio/check boxes/select list
 - Config
   - add option for turning autocomplete on/off
   - syntax highlighting and on-the-fly validation of JSON

diff --git a/src/testofill-run.js b/src/testofill-run.js
@@ -13,7 +13,7 @@ function fillForms(ruleSet) {
       unmatchedSelectors.push(field);
     } else {
       fieldElms.forEach(function(inputElm) {
-        inputElm.value = field.value;
+        fillField(inputElm, field);
       });
     }
   });
@@ -26,6 +26,21 @@ function fillForms(ruleSet) {
 
 }
 
+/* Apply rule to a field to fill it (exec. for each matching field, e.g. radio). */
+function fillField(fieldElm, fieldRule) {
+  if (fieldElm.type === 'checkbox') {
+    fieldElm.checked = fieldRule.value;
+  } else if (fieldElm.type === 'select-one') { // TODO select multi too
+    console.log("WARN: selects not yet supported");
+  } else if (fieldElm.type === 'radio') {
+    fieldElm.checked = (fieldElm.value === fieldRule.value);
+    // find the one with matching value or unset all
+    console.log("WARN: radio not yet supported");
+  } else {
+    fieldElm.value = fieldRule.value;
+  }
+}
+
 // Listen for message from the popup with the selected ruleSet
 chrome.runtime.onMessage.addListener(function(ruleSet, sender, sendResponseFn){
   //console.log("Msg retrieved; sender is extension: ", !sender.tab, ruleSet);

diff --git a/test.html b/test.html
@@ -1,9 +1,42 @@
 <html>
     <head><title>Testofill test</title></head>
     <body>
-        A form:
+        <h3>Food preferences</h3>
         <form>
-            <input type="text" name="q" id="box">
+            <p>
+            <input type="text" name="q" id="box" placeholder="My favourite meal name" size="30">
+            </p><p>
+            Soup?<input type="CHECKBOX" name="chboxin" value="checkbox1"><em>(-&gt; checked)</em>
+            Poisonous?<input type="CHECKBOX" name="chboxin_poisonous" value="xy" checked><em>(-&gt; unchecked)</em>
+            </p><p>
+            Preferred: <input type="RADIO" name="radioin" value="radio1_on" checked>Brokkoli
+            <input type="RADIO" name="radioin" value="radio2_off">Tomatoes
+            <em>(-&gt; Tomatoes)</em>
+            </p><p>
+            Eat at: <input type="RADIO" name="radioin_none" value="1" checked>Park
+            <input type="RADIO" name="radioin_none" value="2">Home
+            <em>(De-select so that nothing selected)</em>
+            </p><p>
+            <label>Image: <input type="file" name="filein"><em>(unsupported?)</em></label>
+            <input type="hidden" name="hiddenin">
+            </p><p>
+            <input type="password" name="passwordin" placeholder="Random password">
+            </p><p>
+            Spiceness: <select name="selectin">
+                <option value="hot">Hot</option>
+                <option value="veryhot">Very hot</option>
+            </select><em>(-&gt; very hot)</em>
+            </p><p>
+            Use: <select name="selectin_none">
+                <option value="">Select one</option>
+                <option value="knife">Knife &amp; fork</option>
+                <option value="veryhot" selected>Hands</option>
+            </select><em>(De-select so that nothing selected)</em>
+            </p><p>
+            <em>TODO Multiselect</em>
+            </p><p>
+            <input type="submit" value="Submit" />
+            </p>
         </form>
     </body>
 </html>