loading...

CS101 Assignment 2 Solution Spring 2018

You are required to write HTML with Java Script code to create VU Sign Up web page shown as below:

 Solution Guidelines:

  • Create Heading “VU Sing Up Form” using H1 tag.
  • Create text boxes for Name and Father Name and show your own name and father name as default value.
  • Next you will be required to create two radio buttons for Gender. Default value should be selected as per your own gender when the page will be run. Make sure only one option will be selected at a time.
  • Create text box showing your own date of birth.
  • Using Select tags, create any 5 study programs options i.e Certificate, BS, MCS, MIT, MS etc but on running web page, by default your own study program should be selected.
  • Create text area for comments using columns and rows of your own choice and in comments, describe about yourself in 20 to 30 words. i.e Hobbies, VU Experience etc.
  • For email you can use text box and show your student email as default value i.e bc1234567@vu.edu.pk
  • For Password and Confirm Password, text boxes should remain blank.
  • Create two buttons labeled as Sign Up and Reset.  By clicking on Sign Up button, the JavaScript function “CheckForm()” should be called to check Password and Confirm Password matches or not. Alert Message should be shown accordingly.

 

  • Similarly, when any change in Study program options occur, the function ShowMessage() of JavaScript should be called to show alert as:
  • If all the requirements of the form are complete, then the message should be displayed as below on clicking on Sign Up button:
Solution Idea:

<!-DocType Html->
<html>
<head>
                <title>CS101_Solution</title>
</head>
                <style type="text/css">
                                form {
                                                position: relative;
                                                margin: 30px auto;
                                                width: 500px;
                                                border: 8px solid #000000;
                                padding: 5px;
                                }
                </style>
<body>
                <form name="SignUp">
                <center>
<h1>      VU Sign Up Form</h1>
<br><br>
<table colspan="2" border="0">
<tr>
                <td>Name:</td>
                <td><input type="text" name="name" value="Ali Ahmed"></td>
</tr>
<tr>
                <td>Father Name:</td>
                <td><input type="text" name="fathername" value="Javed Ahmad"></td>
</tr>
<tr>
                <td>Gender:</td>
</tr>
<tr>
                <td>Male</td>
                <td><input type="radio" name="radio" checked value="Male"></td>
</tr>
                <td>Female</td>
                <td><input type="radio" name="radio"></td>
</tr>
<tr>
                <td>Date of Birth</td>
                <td><input type="text" name="DOB" value="09 /06 /1995"></td>
</tr>
<tr>
                <td valign="top">Study Program:</td>
                <td>
                                <select name="Studyprogram" size="1" onchange="ShowMessage()">
                                <option value="Certificate">Certificate
                                <option value="BS" selected>BS
                                <option value="MCS">MCS
                                <option value="MIT">MIT
                                <option value="MS">MS
                                </select></td>
<tr>
                <td>Comments:</td>
                <td><textarea name="Comments" rows="10" cols="22" value="">Desribe about yourself in few words i.e 20 to 30 words</textarea></td>
</tr>
<tr>
                <td>E-mail:</td>
                <td><input type="text" name="Email" value="bc1234567@gmail.com"></td>
</tr>
<tr>
                <td>Password:</td>
                <td><input type="Password" name="Password" id="Password1"></td>
</tr>
<tr>
                <td>Confirm Password:</td>
                <td><input type="Password" name="Password" id="Password2"></td>
</tr>
</table>
<br><br>
<p>
                <input type="submit" name="SignUp" value="Sign Up" onclick="CheckForm()">
                <input type="reset" value="Reset">
</p>
</center>
</form>
<script type="text/javascript">                  <!- JAVA SCRIPT CODE->
                function CheckForm(){
                                var a = document.getElementById("Password1").value;
                                var b = document.getElementById("Password2").value;
                                if (a != b) {
                                                window.alert("No Match of Password and Confirm password");
                                                return false;
                                }
                                else if (a.length == 0 && b.length == 0) {
                                                window.alert("Password Field Empty! Please Enter The Password")
                                }             
                                else{
                                                window.alert("Congratulations! You have successfully registered.")
                                }
                }
                function ShowMessage(){
                                window.alert("Your Study Program Changed");
                }
</script>
</body>
</html>
DOWNLOAD SOLUTION HERE
loading...