티스토리 뷰
index.html
<!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
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 |
댓글