File tree 1 file changed +25
-6
lines changed
user-input-with-forms/studio
1 file changed +25
-6
lines changed Original file line number Diff line number Diff line change 3
3
< head >
4
4
< meta charset ="utf-8 ">
5
5
< script >
6
- // TODO: create a handler
7
- window . addEventListener ( "load" , function ( ) {
8
- // TODO: register the handler
6
+
7
+ let actions = {
8
+ google : 'https://www.google.com/search' ,
9
+ duckDuckGo : 'https://www.duckduckgo.com' ,
10
+ bing : 'https://www.bing.com/search' ,
11
+ ask : 'https://www.ask.com/web'
12
+ }
13
+ function setSearchEngine ( ) {
14
+ const buttonSelected = document . querySelector ( 'input[name=engine]:checked' ) ;
15
+ const form = document . getElementById ( "searchForm" ) ;
16
+ let url = actions [ buttonSelected . value ] ;
17
+ form . action = url
18
+ }
19
+
20
+ window . addEventListener ( "load" , function ( ) {
21
+ const form = document . getElementById ( "searchForm" ) ;
22
+ form . addEventListener ( "submit" , setSearchEngine ) ;
9
23
} ) ;
10
24
</ script >
11
25
</ head >
12
26
13
27
< body >
14
28
15
- < form id ="searchForm ">
16
- <!-- TODO: add form elements -->
29
+ < form id ="searchForm " target ="_blank ">
30
+ < input type ="text " id ="q " name ="q "/>
31
+ < label > < input type ="radio " name ="engine " value ="google " /> Google</ label >
32
+ < label > < input type ="radio " name ="engine " value ="duckDuckGo " /> DuckDuckGo</ label >
33
+ < label > < input type ="radio " name ="engine " value ="bing " /> Bing</ label >
34
+ < label > < input type ="radio " name ="engine " value ="ask " /> Ask</ label >
35
+ < button id ="submit " value ="Go! "> Go!</ button >
17
36
</ form >
18
-
37
+
19
38
</ body >
You can’t perform that action at this time.
0 commit comments