HTTP-and-Forms-Studio/index.html at master · buzzybounce/HTTP-and-Forms-Studio · 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
<!doctype html>

<head>
	<meta charset="utf-8">
	<script>
		// TODO: create a handler
		function setSearchEngine () {

			let radioElement = '';

				if (document.querySelector("input[name=engine]:checked") !== null) {

					radioElement = document.querySelector("input[name=engine]:checked").value;

				}

			let actions = {

				google: "https://www.google.com/",
				duckduckgo: "https://duckduckgo.com/",
				bing: "https://www.bing.com/",
				ask: "https://www.ask.com/"

			}

			let actionURL = actions[radioElement];

			let searchString = document.querySelector("input[name=q]").value;

			if (searchString === '' || radioElement === '') {

				window.alert ("Please fill in all fields.")
				event.preventDefault();

			}

			else {

				document.getElementById("searchForm").setAttribute("action", actionURL);

			}

		}

    	window.addEventListener("load", function(){

			let form = document.getElementById("searchForm");

      		form.addEventListener ("submit", function () {

				setSearchEngine();

			})

  	  });

	</script>

</head>

<body>

	<form id="searchForm" action="">
		<!-- TODO: add form elements -->
		<input type="text" name="q">
		<label><input type="radio" name="engine" value="google">Google</label>
		<label><input type="radio" name="engine" value="duckduckgo">DuckDuckGo</label>
		<label><input type="radio" name="engine" value="bing">Bing</label>
		<label><input type="radio" name="engine" value="ask">Ask</label>
		<button>Go!</button>
	</form>

</body>