loading...

IT430 E-Commerce Assignment 3 Solution Spring 2013

Scenario
The HR department of XYZ firm wants to change their manual recruiting policy. Currently, they are handling all online applications manually and want to provide superior human resource solutions by providing an online application form.
You are required to create this online application for this department. The candidates may enter and submit their personal information using these forms. The forms should look like this:

Figure 1: Online Application Form

Figure 2: Validation for Empty Field

Suppose the candidate enters the above information and presses the ‘Submit’ button.
The following form displayed with the information entered in the last form.

Figure 3: Confirmation Form

Delete

For example, the candidate mistakenly enters the wrong CNIC no. Then he / she can correct it by pressing the ‘Edit’ button and this will take you in the previous form for editing. See the screenshot blow:

This digit has been corrected…

Figure 4: Editable Form

You have to fulfill these requirements.
· Background colors should be applied using CSS, Main heading style is also applied through CSS.
You have to validate following fields in first form.
· No field should be empty at submitting time.
· You have to implement validation like used in Figure 2 for Empty Name Field. The validations should be for Name, Email and CNIC.
· First name, last name, nationality should only contains characters.
· Email should be in proper format.
· Phone no. should contain only numbers not more than 11.
· CNIC should contain only numbers and not more than 13.

Solution:

<html>
<table border="4" align="center">
<!--[if !mso]>
<style>
v:* {behavior:url(#default#VML);}
o:* {behavior:url(#default#VML);}
w:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
h1
{mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
mso-pagination:widow-orphan;
mso-outline-level:1;
font-size:24.0pt;
font-family:"Times New Roman";}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>

 

<!--[if gte mso 10]>

 

<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";
mso-ansi-language:#0400;
mso-fareast-language:#0400;
mso-bidi-language:#0400;}
</style>
<![endif]--><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026"/>
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
</o:shapelayout></xml><![endif]-->
</head>
<body bgcolor=skyblue lang=EN-US link=blue vlink=blue style='tab-interval:.5in'>
<div>
<form action=loginscript method=post enctype="application/x-www-form-urlencoded">
<div align=center>
<table >
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
<td width=473 style='width:354.75pt;padding:.75pt .75pt .75pt .75pt'>
<h1 style='text-align:center' facecolor=brown><span style='color:#FF9900'>Online Application Form</span></h1>
</td>
</tr>
<tr style='mso-yfti-irow:1;mso-yfti-lastrow:yes'>
<td width=473 style='width:354.75pt;padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'>
<b>Please Fill Form According to Requirements</b></p>
</td>
</tr>
</table>

</div>
<p><span style='display:none;mso-hide:all'></span></p>
<div align=Left>
<table border=1 cellpadding=0 style='mso-cellspacing:1.5pt;
border:outset 1.5pt'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p><b>First Name*</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="text" MAXLENGTH="10"></b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b>Last Name:</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="text" MAXLENGTH="10"></b></p>
</td>
</tr>
<tr style='mso-yfti-irow:1'>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p><b>Gender:</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="Radio" name='gender' CHECKED>Male<INPUT TYPE="Radio" NAME="gender" VALUE="Female">Female</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b>Marital Status</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><SELECT NAME="Single">
<OPTION VALUE="value1">Single
<OPTION VALUE="value2">Married
</SELECT></b></p>
</td>
</tr>
<tr style='mso-yfti-irow:2'>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b>Nationality.... </b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="text"></b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b>CNIC</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="text" MAXLENGTH="13"></b></p>
</td>
</tr>
<tr style='mso-yfti-irow:3'>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b>Email</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="text"></b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b>Phone No.</b></p>
</td>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="text" MAXLENGTH="11"></b></p>
</td>
</tr>
<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes'>
<td style='padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b>Permanent
Address</b></p>
</td>
<td style='border:none;padding:.75pt .75pt .75pt .75pt'>
<p><span style='font-size:10.0pt'></span></p>
</td>
<td style='border:none;padding:.75pt .75pt .75pt .75pt'>
<p><span style='font-size:10.0pt'></span></p>
</td>
<td style='border:none;padding:.75pt .75pt .75pt .75pt'>
<p><span style='font-size:10.0pt'></span></p>
</td>
</tr>
</table>
</div>
<p><span style='display:none;mso-hide:all'></span></p>
<div align=Left>
<table >
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes;
height:53.1pt'>
<td width=482 style='width:361.5pt;padding:.75pt .75pt .75pt .75pt;
height:53.1pt'>
<p><TEXTAREA ROWS="3" COLS="64" NAME="message"></TEXTAREA></p>
</td>
</tr>
</table>
</div>
<p><span style='display:none;mso-hide:all'></span></p>
<div align=Left>
<table >
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td width=478 style='width:358.85pt;padding:.75pt .75pt .75pt .75pt'>
<p align=center style='text-align:center'><b><INPUT TYPE="submit" ACTION="loginscript" METHOD="post" NAME="Submit"><INPUT TYPE="reset" VALUE="reset"></b></p>
</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>

DOWNLOAD SOLUTION HERE
loading...