Javascript_CNIT133/hw3-part2.html at master · tegsheeb/Javascript_CNIT133 · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<title>Text box, radio buttons, checkbox and select items</title>
<meta charset="utf-8">
<meta name="description" content="CNIT 133 homeworks at CCSF">

<script>
    function validateForm() {
           var formValue1 = document.myForm.userName.value;
           var formValue2 = document.myForm.gender;
           var formValue3 = document.myForm.hobby;
           var formValue4 = document.myForm.howDidYouHear.value;
           var isChecked = false;

           if (formValue1 == ""){
               alert("Please enter username");
               return false;
           };

           for (var i = 0; i < formValue2.length; i++){
               if (formValue2[i].checked){
                   break;
               };
               if (i == formValue2.length - 1){
                   alert("Please select gender");
                   return false;
               };
           }

           for (var i = 0; i < formValue3.length; i++){
               if (formValue3[i].checked){
                   console.log(formValue3[i].checked);
                   break;
               };

               if (i == formValue3.length - 1){
                   alert("Please select your favorite activities");
                   return false;
               };


           $(function() {
            var requiredCheckBoxes = $('.hobbys :checkbox[required]');
            requiredCheckBoxes.change(function(){
                if(requiredCheckBoxes.is(':checked')){
                    requiredCheckBoxes.removeAttr('required');
                } else {
                    requiredCheckBoxes.attr('required', 'required');
                }
            });
           });


            if (formValue4 == ""){
                console.log(formValue4);
                alert("Please select an option");
                return false;
           };
        };
</script>
</head>

<body>
<header class="topnav">
    <a href="index.html">Home </a>
    <a href="hw2.html">Homework 2 </a>
    <a class="active" href="hw3.html">Homework 3 </a>
    <a href="hw4.html">Homework 4 </a>

</header>

<div>
    <header>
<h1 >Homework 3, Part 2 <br>
    Text box, radio buttons, checkbox and select items</h1>
    </header>

<form name="myForm" action="hw3-part2-submission.html" method="post">
    <label for="userName">Enter your username: </label><input type="text" name="userName" id="userName" required>
    <br><br>
    Select gender:
    <input type="radio" name="gender" value="Male" required>Male
    <input type="radio" name="gender" value="Female" required>Female
    <input type="radio" name="gender" value="Others" required>Others
    <br><br>
    Your favorite outdoor activities:
    <input type="checkbox" name="hobby"  value="hiking" required/> hiking
    <input type="checkbox" name="hobby"  value="surfing" required/> surfing
    <input type="checkbox" name="hobby"  value="cycling" required/> cycling
    <input type="checkbox" name="hobby"  value="running" required/> running
    <input type="checkbox" name="hobby"  value="other" required/> other

    <br><br>
    How did you hear about us?
    <select name="howDidYouHear" id="howDidYouHear" size="5" required>
        <option value = "" aria-required="true">Choose an option</option>
        <option value = "1" aria-required="true">Web search</option>
        <option value = "2" aria-required="true">From friend</option>
        <option value = "3" aria-required="true">From School</option>
        <option value = "4" aria-required="true">Other</option>
      </select>
    <br><br>
    <input type="submit" onclick="validateForm();" value="Submit" id="sub">
    <input type="reset" value="Clear Form" id="clear">
    <div id="results"></div>
</form>


<footer>
    <p>
    Student name: <a href="https://www.linkedin.com/in/tegshbayar-baasan-48526428"> Tegshbayar Baasan </a>
    <br>
    E-mail address: <a href="mailto:tbaasan@mail.ccsf.edu">tbaasan@mail.ccsf.edu</a>
    </p>
</footer>

</div>
</body>

</html>