Hello All,
After getting inspired from Neo, I have started a bit of JS learning these days. Whenever I learn something I will try to post it here(as of now my learning is NOT exactly bookish where I am going chapter by chapter etc, it could be more like small-small project vice kind of), I would like to request you all to correct me if I am wrong somewhere, any improvements or discussions are welcome.
GOAL of this post(creation of a simple UI): For basic learning I have gone for my college project 
where I had created almost 10 years back a "Student registration form", I tried to build it here. UI's goal is to get information from new students who are willing to join any college and if any detail is missing it should alert student, once all details are done it should show as a message to Student(Keeping it simple as of now).
Prerequisites before starting creating UI:
1- Download Visual studio code software from net first.
2- Now install an extension named "Live server:" in it.
3- Now create a folder your machine, in my case I had created "js learning".
4- Use open folder option in Visual code studio and select newly created folder there.
5- Now create your html and js files(mentioned in further description) in same folder in Visual studio code.
Coding part comes now: Before we start coding I would like to mention(which most of the people know), html is a markup language in which for doing dynamic kind of stuff we need scripting language where JS comes. So we will be creating UI in html and then data fields validation parts we will handle by JS.
- Create HTML code file for UI:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Student registration form.</title>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onSubmit="return(validate());">
<table cellpadding="2" width="100%" bgcolor="#ADD8E6" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Mother Name</td>
<td><input type="text" name="mothername" id="mothername"
size="30">
</td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select>
</td>
</tr>
<tr>
<td>Course</td>
<td>
<select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select>
</td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select>
</td>
</tr>
<tr>
<td>State</td>
<td>
<select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select>
</td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2">
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</td>
</tr>
</table>
</form>
</body>
</html>
I believe most of the people have read html so I will only touch upon its functions.
Brief explanation of HTML file:
1- Basic structure of html file:
<html>
<head>
......................more statements here...........
</head>
<body>
.......UI's components etc here.......
</body>
</html>
2- JS will be placed inside <head> tags like:
<script type="text/javascript" src="validate.js"></script>
Either we could write a different js file with js code and call it here in <script type> here or we could write JS code in here itself, I am taking first approach keeping JS file separate and calling it in HTML file.
3- Few more explanations:
<table> as Name suggests table tag is for creation of table on UI.
<form> ,is to create forms on UI.
<tr> , is for inserting a line in Table.
<td> , is for inserting a cell in line of table, it should be always in <tr> .
input type , will define which kind of input type we have on UI eg--> text box, radio button, drop down menu etc etc.
4- Basically we have created a form and inside it created a table with few rows and columns which will have text boxes, radio buttons etc to gather details from user who is using UI.
Now comes the JS part: HTML will create UI for us but it can not validate data for us, for that purpose I have created a js file which will make sure user is NOT leaving any field empty.
function validate() {
//This is a js function to validate all the functions of UI.
var form = document.getElementById("StudentRegistration");
if(document.StudentRegistration.textnames.value==""){
alert('Please provide your Name! This is a mandatory field can not be empty!!');
document.StudentRegistration.textnames.focus();
return false;
}
if(document.StudentRegistration.mothername.value==""){
alert('Please do enter your Mother name, it can not be empty.');
document.StudentRegistration.mothername.focus();
return false;
}
if(document.StudentRegistration.fathername.value==""){
alert('Please enter your father name details:');
document.StudentRegistration.fathername.focus();
return false;
}
if(document.StudentRegistration.paddress.value==""){
alert('Please enter your address as it is a mandatory field.');
document.StudentRegistration.paddress.focus();
return false;
}
if(document.StudentRegistration.personaladdress.value==""){
alert('Please enter your email id as it is mandatory field of form:' );
document.StudentRegistration.personaladdress.focus();
return false;
}
if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) ){
alert('Please enter your gender details, you can not leave this option empty:');
return false;
}
if(document.StudentRegistration.City.value=="-1"){
alert('Please select city details, you can not leave it empty.');
return false;
}
if(document.StudentRegistration.Course.value=="-1"){
alert('Please select course details, it can not be empty in form.');
return false;
}
if(document.StudentRegistration.District.value=="-1"){
alert('Please select your district out of the list.');
return false;
}
if(document.StudentRegistration.State.value=="-1"){
alert('Please select your State details as it is mandatory for form.');
return false;
}
if(document.StudentRegistration.pincode.value==""){
alert('Please do enter your PIN code details.');
return false;
}
if(document.StudentRegistration.emailid.value==""){
alert('Please do enter your email id as it can not be empty.');
return false;
}
if(document.StudentRegistration.dob.value==""){
alert('Please do enter your D.O.B(Date of Birth) as it can not be empty.');
return false;
}
if(document.StudentRegistration.mobileno.value==""){
alert('You can not leave Mobile number field empty, please enter 10 digits number in form.');
return false;
}
}
Explanation on JS code:
1- Created a function in js named validate , which will be called on submit button hit(though I have not completed it yet).
2- Mainly checking conditions that each field should have values.
if(document.StudentRegistration.textnames.value==""){
In above statement taking value from FORM whose name is "StudentRegistration" then taking its specific item's(input type=text)'s name and checking its value if it is EQUAL to NULL then:
alert('Please provide your Name! This is a mandatory field can not be empty!!');
Using alert to get a message for user to fill that field.
document.StudentRegistration.textnames.focus();
Above statement .focus takes cursor to the mentioned field so user need NOT to move cursor/mouse to missing field.
Like that I have done for all fields.
Here is how UI will look like:
Here is how user will be prompted for entering values in UI:
Any suggestions are welcome, I will post more learning here.
PS: Off course lot of googling I did for this very first post, references were taken(few links mentioned in post) and from roseindia site(I did make some changes in js and html parts).
Thanks,
R. Singh
