changes in js and html file

index.html

@@ -32,33 +32,29 @@ <h1>The User Interface Developer Test</h1>
 			</ul>
 		</div>
 	</div>
-	<form role="form">
-		<div class="form-group">
-			<input type="checkbox">Select All
-		</div>
-		<div class="form-group">
-			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Abstract
-			</label>
-			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Publication
-			</label>
-			<label class="checkbox">
-				<input type="checkbox" value="Abstract">Inventor
-			</label>
-			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Language
-			</label>
-			<label class="checkbox">
-				<input type="checkbox" name="field" value="Abstract">Source
-			</label>
-			<label class="checkbox">
-				<input type="checkbox" name="fields" value="Abstract">Priority
-			</label>
 
-		</div>
-		<button type="submit" class="btn btn-default">Submit</button>
-	</form>
-	<script>console.log('page loaded');</script>
+
+
+
+<form id="contacts"> 
+
+<input type="checkbox" value="Select All" id="main" >Select All<br>
+<input type="checkbox" name="fields" value="Abstract" id="Abstract" >Abstract<br>
+<input type="checkbox" name="fields" value="Publication" id="Publication">Publication<br>
+<input type="checkbox" name="fields" value="Inventor" id="Inventor">Inventor<br>
+<input type="checkbox" name="fields" value="Language" id="Language">Language<br>
+<input type="checkbox" name="fields" value="Source" id="Source">Source<br>
+<input type="checkbox" name="fields" value="Priority" id="Priority">Priority<br><br>
+
+<button id="submit" style="background:orange;width:80px;height:40px;color:white;">Submit</button>
+</form>
+
+
+
+
+
+<script src="js/index.js"></script>
+
+
 </body>
 </html>

js/index.js

@@ -0,0 +1,110 @@
+"use strict"
+
+$(document).ready(function() {
+
+	$('#main').change(function() {
+
+	    if ($(this).is(':checked')) {
+	    $('input[name="fields"]:checkbox').attr('checked', true);        
+
+	    } else {
+
+	        $('input[name="fields"]:checkbox').attr('checked', false);
+	    }
+	});
+
+
+$('input[name="fields"]:checkbox').change(function() {
+    var chkLength = $('input[name="fields"]:checkbox').length;
+    var checkedLen = $('input[name="fields"]:checkbox:checked').length;    
+    if (chkLength == checkedLen) {
+        $('#main').attr('checked', true);
+    } else {
+        $('#main').attr('checked', false);
+    }
+});
+
+
+$('#submit').on("click",function(){
+
+	var abstract = document.getElementById("Abstract");
+	var Publication = document.getElementById("Publication");
+	var Inventor = document.getElementById("Inventor");
+	var Language = document.getElementById("Language");
+	var Source = document.getElementById("Source");
+	var Priority = document.getElementById("Priority");
+
+
+	if (Language.checked == true &&
+	    document.getElementById("main").checked == false && 
+	    abstract.checked == false &&
+	    Publication.checked == false &&
+	    Inventor.checked == false &&
+	    Source.checked == false &&
+	    Priority.checked == false)
+	{
+		alert("ERROR-- Please choose more items!");
+
+	}
+
+	else if (
+		//document.getElementById("lang").checked == true ||
+	    document.getElementById("main").checked == true || 
+	    abstract.checked == true  ||
+	    Publication.checked == true  ||
+	    Inventor.checked == true  ||
+	    Source.checked == true  ||
+	    Priority.checked == true )
+	{ 
+
+		alert("success");
+		document.getElementById("contacts").action = "results.html";
+
+    }
+
+//-----------------------------------------------------------------------------------
+    		var d=document;
+			var contacts = d.getElementById('contacts');
+
+			//submit event registration
+
+			    var count = 0;
+			    var contactArray = inputsToArray(contacts.children);
+			    var data = serializeArray(contactArray, '');
+			    console.log(data);
+			   localStorage.setItem("count",data);
+
+
+
+			function inputsToArray (inputs) {
+			    var arr = [];
+			    for (var i = 0; i < inputs.length; i++) {
+			        if (inputs[i].checked)
+			            arr.push(inputs[i].value);
+			    }
+			    return arr;
+			}
+
+
+			function serializeArray (array, name) {
+			    var serialized = '';
+
+			    for(var i = 0, j = array.length; i < j; i++) {
+			         if(i>0) serialized += ''+"<br/>";
+
+                      serialized += name + '' + array[i];
+			    }
+			    return serialized;
+			}
+//--------------------------------------------------------------------------------------
+
+
+
+
+
+
+
+});
+
+
+});

js/results.js

@@ -0,0 +1,54 @@
+// "use strict"
+
+// function getParameters(){
+// 	var index = document.URL.indexOf('?');
+// 	var params = new Array();
+// 		if (index != -1) {
+// 		var pairs = document.URL.substring(index+1, document.URL.length).split('&');
+// 			for (var i=0; i<pairs.length; i++){
+// 			paramName = pairs[i].split('=');
+// 			params[paramName[0]] = paramName[1];
+// 			}
+
+// 		}
+// 	return params;
+
+// }
+
+// params = getParameters();
+// yourtext = unescape(params["yourtext"]);
+// document.write("Your Text = " + yourtext + "<br>");
+// fields = unescape(params["fields"]);
+// document.write("check box selected is = " + fields + "<br>");
+
+
+// "use strict"
+
+// var allVals = [];
+// $(function() {
+
+// 	  $('#myForm .btn btn-default').click(function() { 
+//            allVals = []
+//            alert("hello button");
+
+//             $('#myForm :checked').each(function() {
+//             allVals.push($(this).val());
+//             });
+//              alert("Values " + allVals);
+
+//              $.ajax({  
+//              type: "POST",  
+//              url: "file:///C:/sg/web/TestMe_lite/results.html",  
+//              data: "allVals=" + allVals,  
+//              success: function(response){  
+//                  $('#info').html("OK! Data [" + allVals + "] Sent with Response:" + response);  
+//              },  
+//              error: function(e){  
+//                  $('#info').html("selected Data[" + allVals +"] Not sent with Error:" + e);
+//              }  
+//          });
+
+//       });
+
+
+// });

results.html

@@ -31,7 +31,20 @@ <h1>You made it to the results page!</h1>
 			<li>Tastefully display the selections the user made .</li>
 			<li>Fix the json3 and css includes for IE7.</li>
 		</ul>
-
+		<p>The Items Selected is</p>
+
 	</div>
+	<div>
+	<label>
+		<script type="text/javascript">
+		document.write(localStorage.getItem("count"));
+		</script>
+		</label>
+<br><br>
+
+ <form action="index.html">
+ <button  style="background:green;width:80px;height:40px;color:white;">BACK</button> 
+ </form>
+
 </body>
 </html>