44 < meta charset ="utf-8 ">
55 < script >
66 // TODO: create a handler
7- window . addEventListener ( "load" , function ( ) {
8- // TODO: register the handler
9- } ) ;
7+ function setSearchEngine ( ) {
8+
9+ let radioElement = '' ;
10+
11+ if ( document . querySelector ( "input[name=engine]:checked" ) !== null ) {
12+
13+ radioElement = document . querySelector ( "input[name=engine]:checked" ) . value ;
14+
15+ }
16+
17+ let actions = {
18+
19+ google : "https://www.google.com/" ,
20+ duckduckgo : "https://duckduckgo.com/" ,
21+ bing : "https://www.bing.com/" ,
22+ ask : "https://www.ask.com/"
23+
24+ }
25+
26+ let actionURL = actions [ radioElement ] ;
27+
28+ let searchString = document . querySelector ( "input[name=q]" ) . value ;
29+
30+ if ( searchString === '' || radioElement === '' ) {
31+
32+ window . alert ( "Please fill in all fields." )
33+ event . preventDefault ( ) ;
34+
35+ }
36+
37+ else {
38+
39+ document . getElementById ( "searchForm" ) . setAttribute ( "action" , actionURL ) ;
40+
41+ }
42+
43+ }
44+
45+ window . addEventListener ( "load" , function ( ) {
46+
47+ let form = document . getElementById ( "searchForm" ) ;
48+
49+ form . addEventListener ( "submit" , function ( ) {
50+
51+ setSearchEngine ( ) ;
52+
53+ } )
54+
55+ } ) ;
56+
1057 </ script >
58+
1159</ head >
1260
1361< body >
1462
15- < form id ="searchForm ">
16- <!-- TODO: add form elements -->
63+ < form id ="searchForm " action ="">
64+ <!-- TODO: add form elements -->
65+ < input type ="text " name ="q ">
66+ < label > < input type ="radio " name ="engine " value ="google "> Google</ label >
67+ < label > < input type ="radio " name ="engine " value ="duckduckgo "> DuckDuckGo</ label >
68+ < label > < input type ="radio " name ="engine " value ="bing "> Bing</ label >
69+ < label > < input type ="radio " name ="engine " value ="ask "> Ask</ label >
70+ < button > Go!</ button >
1771 </ form >
1872
1973</ body >
0 commit comments