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

<head>
	<meta charset="utf-8">
	<script>
		let actions = {
			"google": "https://www.google.com/search",
			"duckDuckGo": "https://duckduckgo.com/",
			"bing": "https://www.bing.com/search",
			"ask": "https://www.ask.com/web"
		}
		// TODO: create a handler
		function setSearchEngine() {
			console.log("setSearchEngine has run");
			let buttons = document.getElementsByName('engine');
			let submitForm = document.getElementById('searchForm');

			//ALTERNATIVE VERSION IF FOLLOWING CODE DOES NOT WORK
			// if (buttons[0].checked) {
			// 	submitForm.action = actions["google"];
			// } else if (buttons[1].checked) {
			// 	submitForm.action = actions["duckDuckGo"];
			// } else if (buttons[2].checked) {
			// 	submitForm.action = actions["bing"];
			// } else {
			// 	submitForm.action = actions["ask"];
			// }

			let selectedBtn = document.querySelector('input[name=engine]:checked');
			submitForm.action = actions[selectedBtn.id];

		}

		window.addEventListener("load", function(event) {
			let goButton = document.getElementById("goButton");
			let googleButton = document.getElementById('google');
			googleButton.checked = true;
			goButton.addEventListener("click", function(literallyAnything) {
				setSearchEngine();
			})
		});
	</script>
</head>

<body>

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

</body>