티스토리 뷰

AU Study/TAFE Assessment

Javascript Portfolio

Last72 2017. 10. 24. 14:27



index.html


?
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
<!DOCTYPE html>
<!-- 
Date 22/10/2017
Detail : WAD(World Association of Detectives) Form
-->
 
  <head>
    <title>World Association of Detectives</title>
    <script src="js/myScript.js"></script>
  </head>
   
    <form id="myForm">
      <h1>Welcome the World Association of Detectives</h1>
      <p id="demo">Please use this form if you are attending the monthly meeting.</p>
      <fieldset>
      <legend>Personal Details</legend>
      Full Name: <input type="text" name="fname"><br>
      <label>Membership Type</label>
      <select id = "Membership">
        <option value = "Associate">Associate</option>
        <option value = "Professional">Professional</option>
        <option value = "Executive">Executive</option>
      </select><br>
      Membership Number: <input type="text" name="membershipNum"><br>
      Mobile Phone: <input type="text" name="mobileNum"><br>
      </fieldset>
      <fieldset>
        <legend>Catering Details</legend>
        Do you require the special dietary menu?
        <input type="radio" value = "Yes" name="specialdietary">Yes
        <input type="radio" value = "No" name="specialdietary" checked="checked">No<br>
        What drink would you like during the meeting?<br>
        <input type="checkbox" value = "Beer">Beer<br>
        <input type="checkbox" value = "Red Wine">Red Wine<br>
        <input type="checkbox" value = "White Wine">White Wine<br>
        <input type="checkbox" value = "Cocktails">Cocktails<br>
        <input type="checkbox" value = "Spirits">Spirits<br>
        <input type="checkbox" value = "Juice">Juice<br>
        <input type="checkbox" value = "Non-alcoholic">Non-alcoholic<br>
        <table>
          <tr>
            <th></th>
            <th>Menu</th>
            <th></th>
          </tr>
          <tr>
            <td>Entrée<br>
            <input type="radio" value = "Tuscan Bean Soup" name="Entree">Tuscan Bean Soup<br>
            <input type="radio" value = "Romaine Caesar Salad" name="Entree">Romaine Caesar Salad<br>
            <input type="radio" value = " Wild Mushroom Pie" name="Entree"> Wild Mushroom Pie<br>
            </td>
            <td>Main<br>
            <input type="radio" value = "Roast Muscovy Duck" name="Main">Roast Muscovy Duck<br>
            <input type="radio" value = "Pepper Steak" name="Main">Pepper Steak<br>
            <input type="radio" value = "Wild Field Salad" name="Main">Wild Field Salad<br>
            </td>
            <td>Dessert<br>
            <input type="radio" value = "Strawberry Tart" name="Dessert">Strawberry Tart<br>
            <input type="radio" value = "Chocolate Souffle" name="Dessert">Chocolate Souffle<br>
            <input type="radio" value = " Lemon Cake" name="Dessert"> Lemon Cake<br>
            </td>
          </tr>
        </table>
      </fieldset>
      <fieldset>
        <legend>Departure Arrangements</legend>
        Do you require a return taxi?
        <input type="radio" value = "Yes" name="requiretaxi">Yes
        <input type="radio" value = "No" name="requiretaxi">No<br>
        What time will you be departing?
        <select id = "departingTime">
          <option value = "10.00pm">10.00pm</option>
          <option value = "10.30pm">10.30pm</option>
          <option value = "11.00pm">11.00pm</option>
          <option value = "11.30pm">11.30pm</option>
        </select><br>
        What is your destination Suburb? <input type="text"><br>
      </fieldset>
      <fieldset>
        <legend>Feedback</legend>
        How do you wish to be notified?
        <input type="checkbox" value = "Aus Post">Aus Post
        <input type="checkbox" value = "Email">Email
        <input type="checkbox" value = "SMS">SMS
        <input type="checkbox" value = "None">None<br>
        Do you have any comments?<br>
        <textarea rows="4" cols="80"></textarea>
      <button type="submit" name="submit" onclick="return Validate()">Submit Query</button>
      <button type="button" onclick="resetForm()">Reset</button>
    </form>
  </body>
</html>


js/myScript.js

?
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
function resetForm(){//reset the entire form
    document.getElementById("myForm").reset();
}
 
function Validate() {
    var fname = document.forms["myForm"]["fname"].value;
    var membershipNum = document.forms["myForm"]["membershipNum"].value;
    var mobileNum = document.forms["myForm"]["mobileNum"].value;
     
    var fname_length = fname.length;
    var membershipNum_length = membershipNum.length;
    var mobileNum_length = mobileNum.length;
 
    if (fname == "" ) {//check the full name
        alert("Name must be filled out");
        return false;
    }else if (membershipNum == ""){//check the membership number
        alert("Membership Number must be filled out");
        return false;
    }else if (mobileNum == ""){//check the mobile number
        alert("Mobile Number must be filled out");
        return false;
    }
     
     
    if (fname_length > 40) {//check is shorter than 40 characters
        alert("Name must be less than 40 characters");
        return false;
    } else if (membershipNum_length != 7 || isNaN(membershipNum)) {//check is 7 number long
        alert("Membership Number must be 7 number long");
        return false;
    } else if (mobileNum_length != 8 || isNaN(mobileNum)) {//check is 8 number long
        alert("Mobile Number must be 8 number long");
        return false;
    }
     
     
     
}

screenshot




저작자표시 비영리 동일조건 (새창열림)

'AU Study > TAFE Assessment' 카테고리의 다른 글

C sharp programming AT 1.1  (0) 2017.10.25
C sharp programming AT 1.2  (0) 2017.10.25
C sharp programming AT 1.4  (0) 2017.10.25
C sharp programming AT 2  (1) 2017.10.22
C sharp programming AT 1.3  (0) 2017.09.29
공유하기 링크
댓글
Announcement
Recent Posts
Recent Comments
Total
Today
Yesterday
Link
TAG
more
«   2025/08   »
일 월 화 수 목 금 토
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
Search by month