Form-Module/form_module.html at master · KyleEvan/Form-Module · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>

    <head>
       <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Form Module</title>
    </head>
	<script src="jquery-1.12.1.min.js" type="text/javascript"></script>
<script>

    $(document).ready(function(){
		// on click, pull the values (stringified JSON) from the drop down selection and append to output div.
		$("#submit").click(function(){
			var output = $(".artists").val();
			$(".artists").each(function(){
				$("#output").append($(this).val()+"<br>");
			});
		});

		$.getJSON("artist_wrapper.json", function(data) {
			 // value = each artist from the JSON file
			$.each(data, function(key, value){
				$.each(value, function (ind){
					var artist = JSON.stringify(value[ind]);
					$(".artists").append("<option class='option' value='"+artist+"'>"+value[ind].artistName+"</option>");

									/* Alternative way of looping through artists

									for(var i = 0; i<value.length; i++){
										$("#artists").append("<option value='"+value[i].artistName+"'>"+value[i].artistName+"</option>");
									}

									*/
				});
			});
		});


	});


</script>
<style>
	ul{
		list-style-type:decimal;
	}
	li{
		padding:20px;
	}
</style>
<body>


<form>
<ul>
	<li>
		Choose and Artist:
		<select class="artists">
		</select>
	</li>

	<li>
		Choose and Artist:
		<select class="artists">
		</select>
	</li>
</ul>
 <button type="button" id="submit">Submit Selections</button>
</form>

<div id="output"></div>


</body>
</html>