Update example and added JS library to verify input values

asumaran · Aug 13, 2013 · 62c5cd7 · 62c5cd7
1 parent ec8f4fa
commit 62c5cd7
Show file tree

Hide file tree

Showing 3 changed files with 432 additions and 26 deletions.
diff --git a/button.html b/button.html
@@ -5,39 +5,41 @@
   <meta charset="UTF-8">
   <title>Button jQuery Plugin</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+  <script src="form2js.js"></script>
+  <script src="jquery.toObject.js"></script>
   <script src="button.js"></script>
   <script src="scripts.js"></script>
   <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
 
-  <h2>Single Button</h2>
-
-  <a id="btn1" href="#" class="btn btn-single">Botón</a>
-
-  <h3>Radio Button Behaviour (Unique option)</h3>
-
-  <p>
-    <a href="#" class="btn btn-unique" data-button='{"behaviour": "radiobutton", "group" : ".btn-unique", "input": "input[name=\"checkbox-test-unique\"]", "value":"opt_1"}'>Option 1</a>
-    <input type="radio" name="checkbox-test-unique" value="opt_1"><br><br>
-    <a href="#" class="btn btn-unique" data-button='{"behaviour": "radiobutton", "group" : ".btn-unique", "input": "input[name=\"checkbox-test-unique\"]", "value":"opt_2"}'>Option 2</a>
-    <input type="radio" name="checkbox-test-unique" value="opt_2"><br><br>
-    <a href="#" class="btn btn-unique" data-button='{"behaviour": "radiobutton", "group" : ".btn-unique", "input": "input[name=\"checkbox-test-unique\"]", "value":"opt_3"}'>Option 3</a>
-    <input type="radio" name="checkbox-test-unique" value="opt_3">
-  </p>
-
-  <h3>Checkbox Button Behaviour (Multiple option)</h3>
-  <p>
-    <a href="#" class="btn btn-multiple" data-button='{"behaviour": "checkbox", "group" : ".btn-multiple", "input": "input[name=\"checkbox-test-multiple\"]", "value":"opt_1"}'>Option 1</a>
-    <input type="checkbox" name="checkbox-test-multiple" value="opt_1"><br><br>
-    <a href="#" class="btn btn-multiple" data-button='{"behaviour": "checkbox", "group" : ".btn-multiple", "input": "input[name=\"checkbox-test-multiple\"]", "value":"opt_2"}'>Option 2</a>
-    <input type="checkbox" name="checkbox-test-multiple" value="opt_2"><br><br>
-    <a href="#" class="btn btn-multiple" data-button='{"behaviour": "checkbox", "group" : ".btn-multiple", "input": "input[name=\"checkbox-test-multiple\"]", "value":"opt_3"}'>Option 3</a>
-    <input type="checkbox" name="checkbox-test-multiple" value="opt_3">
-  </p>
-
-
+  <form action="">
+    <h2>Single Button</h2>
+
+    <a id="btn1" href="#" class="btn btn-single">Botón</a>
+    
+    <h3>Radio Button Behaviour (Unique option)</h3>
+    
+    <p>
+      <a href="#" class="btn btn-unique" data-button='{"behaviour": "radiobutton", "group" : ".btn-unique", "input": "input[name=\"checkbox-test-unique\"]", "value":"opt_1"}'>Option 1</a>
+      <input type="radio" name="checkbox-test-unique" value="opt_1"><br><br>
+      <a href="#" class="btn btn-unique" data-button='{"behaviour": "radiobutton", "group" : ".btn-unique", "input": "input[name=\"checkbox-test-unique\"]", "value":"opt_2"}'>Option 2</a>
+      <input type="radio" name="checkbox-test-unique" value="opt_2"><br><br>
+      <a href="#" class="btn btn-unique" data-button='{"behaviour": "radiobutton", "group" : ".btn-unique", "input": "input[name=\"checkbox-test-unique\"]", "value":"opt_3"}'>Option 3</a>
+      <input type="radio" name="checkbox-test-unique" value="opt_3">
+    </p>
+
+    <h3>Checkbox Button Behaviour (Multiple option)</h3>
+    <p>
+      <a href="#" class="btn btn-multiple" data-button='{"behaviour": "checkbox", "group" : ".btn-multiple", "input": "input[name=\"checkbox-test-multiple[]\"]", "value":"opt_1"}'>Option 1</a>
+      <input type="checkbox" name="checkbox-test-multiple[]" value="opt_1"><br><br>
+      <a href="#" class="btn btn-multiple" data-button='{"behaviour": "checkbox", "group" : ".btn-multiple", "input": "input[name=\"checkbox-test-multiple[]\"]", "value":"opt_2"}'>Option 2</a>
+      <input type="checkbox" name="checkbox-test-multiple[]" value="opt_2"><br><br>
+      <a href="#" class="btn btn-multiple" data-button='{"behaviour": "checkbox", "group" : ".btn-multiple", "input": "input[name=\"checkbox-test-multiple[]\"]", "value":"opt_3"}'>Option 3</a>
+      <input type="checkbox" name="checkbox-test-multiple[]" value="opt_3">
+    </p>
+  </form>
 
 </body>