Dear Friends,
Designing an HTML form with Java script validation and associated PHP code will eat much of our coding time. So a cut and paste code will prove to be useful in this regard.
Here the steps can be spitted to 3
1. Form creation and JS Validation
2. DB and Table creation
3. PHP Code to save it.
Step I.
HMTL Code for the same - index.php
<html>
<head>
<!--
Coded by Prof. Sajeev Jaladharan
Date : 27.11.2015
email: sajeevjal@gmail.com
-->
<title>SNIT MCA Online Registration</title>
<script language="javascript" type="text/javascript">
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("Invalid E-mail ID")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(" ")!=-1){
alert("Invalid E-mail ID")
return false
}
return true
}
function checkform()
{
alert('HUP');
if (document.reg.Name.value=="")
{
// something is wrong
alert('Enter first name ');
document.reg.Name.focus();
return false;
}
else if (document.reg.Housename.value=="")
{
// something is wrong
alert('Enter Housename');
document.reg.Housename.focus();
return false;
}
else if (document.reg.Residence.value=="")
{
// something is wrong
alert('Enter Addressline2 number');
document.reg.Residence.focus();
return false;
}
else if (document.reg.City.value=="")
{
// something is wrong
alert('Enter City name');
document.reg.City.focus();
return false;
}
else if (document.reg.State.value=="")
{
// something is wrong
alert('Enter State name');
document.reg.State.focus();
return false;
}
else if (document.reg.Pin.value=="")
{
// something is wrong
alert('Enter Pin Number');
document.reg.Pin.focus();
return false;
}
else if ((document.reg.Email.value==null)||(document.reg.email.value==""))
{
alert("Enter your Email ID");
document.reg.Email.focus();
return false;
}
else if(echeck(document.reg.Email.value)==false)
{
alert('Enter email address properly \n[abc@abc.com]\nyourname@hostname.domainname\nExample:\nname@gmail.com');
document.reg.Email.focus();
return false;
}
else if (document.reg.Land.value=="")
{
// something is wrong
alert('Enter Land phone information');
document.reg.Land.focus();
return false;
}
else if (document.reg.Mobile1.value=="")
{
// something is wrong
alert('Enter Student Mobile phone information');
document.reg.Mobile1.focus();
return false;
}
else if (document.reg.Mobile2.value=="")
{
// something is wrong
alert('Enter Parent Mobile phone information');
document.reg.Mobile2.focus();
return false;
}
else if (document.reg.Qualification.value=="")
{
// something is wrong
alert('Enter Qualification information');
document.reg.Qualification.focus();
return false;
}
else if (document.reg.Subject.value=="")
{
// something is wrong
alert('Enter Subject information');
document.reg.Subject.focus();
return false;
}
else if (document.reg.College.value=="")
{
// something is wrong
alert('Enter College information');
document.reg.College.focus();
return false;
}
/* */
//document.reg.id.disabled=false;
return true;
}
</script>
</head>
<body background="img.jpg" >
<table border=0 width=63% align="center" bgcolor="#EFFBFC">
<tr><td>
<form name="reg" class="wufoo topLabel page" method="post" action="saveadmission.php" onSubmit="return checkform()">
<table style="border-color:#669999;border-style:dashed ;" align="center" cellpadding="2" cellspacing="2" width="85%">
<tbody>
<tr>
<td>Name </td>
<td><input id="Name" name="Name" style="width:150px" size="20" tabindex="2" type="text"></td></tr>
<td colspan="2"><strong><blockquote class="style1"><span>For Communication Purpose</span></blockquote></strong></td></tr>
<tr>
<td>House Name </td>
<td><span class="full addr1">
<input id="Housename" name="Housename" style="width:150px" class="field text addr" tabindex="6" type="text">
</span></td></tr>
<tr><td>Residence Name & No </td>
<td><span class="full addr2">
<input id="Residence" style="width:150px" name="Residence" class="field text addr" tabindex="7" type="text">
</span></td></tr>
<tr>
<td>City</td>
<td><span class="full addr1">
<input id="City" name="City" style="width:150px" class="field text addr" tabindex="8" type="text">
</span></td></tr>
<tr><td>State</td>
<td><span class="full addr2">
<input id="State" style="width:150px" name="State" class="field text addr" tabindex="9" type="text">
</span></td></tr>
<tr>
<td>Pin </td>
<td><span class="left">
<input id="Pin" style="width:150px" name="Pin" class="field text addr" maxlength="10" tabindex="10" type="text">
</span></td></tr>
<tr><td>Email Address </td>
<td><span class="left">
<input id="email" style="width:150px" name="Email" tabindex="11" class="field text addr" maxlength="27" type="text">
</span></td></tr>
<tr>
<td colspan="2"><strong><blockquote class="style1"><span>Contact Numbers</span></blockquote></strong></td></tr>
<tr>
<td>Land number [put NA if No Land Phone] </td>
<td><input id="Land" style="width:150px" name="Land" class="field text" size="15" maxlength="10" tabindex="12" type="text"></td></tr>
<td>Mobile Number of Student </td>
<td><input id="Mobile1" style="width:150px" name="Mobile1" class="field text" size="15" maxlength="13" tabindex="13" type="text"></td></tr>
<tr><td>Mobile Number of Parent </td>
<td><input id="Mobile2" style="width:150px" name="Mobile2" class="field text" size="15" maxlength="13" tabindex="13" type="text"></td></tr>
<tr bordercolor="#6699CC">
<td colspan="2"><strong><blockquote class="style1"><span>Under Graduate Course Details</span></blockquote></strong></td></tr>
<tr bordercolor="#6699CC">
<td>Basic Qualification </td>
<td><label>
<select name="Qualification" id="Qualification" tabindex="17" >
<option selected="selected" value="BSC">BSC</option>
<option value="BCA">BCA</option>
<option value="BCOM">BCOM</option>
<option value="Others">Others</option>
</select>
</label></td></tr>
<tr><td>Degree Subject </td>
<td><span class=" ">
<input name="Subject" style="width:150px" id="Subject" type="text" tabindex="18" >
</span></td></tr>
<tr><td>College of Current Study </td>
<td><span class=" ">
<input name="College" style="width:150px" id="College" type="text" tabindex="20" >
</span></td></tr>
<td colspan="2"><div align="center">
<input name="Save" id="Save" value="Save Data" type="submit" tabindex="21">
<label>
<input name="Reset" value="Clear Form" type="reset">
</label>
</div></td></tr>
</tbody></table>
<div class="info" align="center">
</div>
</form>
</td></tr></table>
</body>
</html>
Design
-------------
Step II
Creation of DB- Take phpmyadmin console and type the database name "snit" in the box provided.
[NB: Database need to be created only once]
----------------------------------------------------------------------------------------------------
Create Table
-----------------
SQL :
CREATE TABLE IF NOT EXISTS `student` (
`id` int(3) NOT NULL,
`Name` tinytext NOT NULL,
`Housename` tinytext NOT NULL,
`Residence` tinytext NOT NULL,
`City` tinytext NOT NULL,
`State` tinytext NOT NULL,
`Pin` tinytext NOT NULL,
`Email` tinytext NOT NULL,
`Land` tinytext NOT NULL,
`Mobile1` tinytext NOT NULL,
`Mobile2` tinytext NOT NULL,
`Qualification` tinytext NOT NULL,
`Subject` tinytext NOT NULL,
`College` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
After the creation of the Database, you click the SQL tab shown in the figure and copy the above SQL query and paste in the box provided in the screen and press GO.
Step III
PHP code to Save - saveadmission.php
------------------------------------------------------------------
<html >
<body>
<!--
Coded by Prof. Sajeev Jaladharan
Date : 27.11.2015
email: sajeevjal@gmail.com
-->
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("snit",$con);
$Name=$_POST['Name'];
$Housename=$_POST['Housename'];
$Residence=$_POST['Residence'];
$City=$_POST['City'];
$State=$_POST['State'];
$Pin=$_POST['Pin'];
$Email=$_POST['Email'];
$Land=$_POST['Land'];
$Mobile1=$_POST['Mobile1'];
$Mobile2=$_POST['Mobile2'];
//email address is set as the username
$Qualification=$_POST['Qualification'];
$Subject=$_POST['Subject'];
$College=$_POST['College'];
$id=0;
$sql="select max(id)+1 as maxid from student";
$data=mysql_query($sql,$con);
while($row=mysql_fetch_array($data))
{
$id=$row['maxid'];
}
$sql1="INSERT INTO `snit`.`student` (`id`, `Name`, `Housename`, `Residence`, `City`, `State`,`Pin`, `Email`, `Land`, `Mobile1`, `Mobile2`, `Qualification`, `Subject`, `College`) VALUES ('$id', '$Name', '$Housename', '$Residence', '$City', '$State', '$Pin', '$Email', '$Land', '$Mobile1', '$Mobile2', '$Qualification', '$Subject','$College')";
if (!mysql_query($sql1,$con))
{
die('Error: ' . mysql_error());
}
echo "<center>Congrats...Your data saved. Thank you. Wishing you all the best </center>";
mysql_close($con);
?>
<p> </p><p> </p><p> </p><p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
</body>
<?php
echo "<script>alert('Thanks for Registration'); </script>";
echo "<script>location.href='index.php';</script>";
?>
</html>
NB: Put these files in the project folder inside 'WWW' folder of WAMP/LAMP/XAMPP
mail me for more clarifications : sajeevjal@gmail.com
Designing an HTML form with Java script validation and associated PHP code will eat much of our coding time. So a cut and paste code will prove to be useful in this regard.
Here the steps can be spitted to 3
1. Form creation and JS Validation
2. DB and Table creation
3. PHP Code to save it.
Step I.
HMTL Code for the same - index.php
<html>
<head>
<!--
Coded by Prof. Sajeev Jaladharan
Date : 27.11.2015
email: sajeevjal@gmail.com
-->
<title>SNIT MCA Online Registration</title>
<script language="javascript" type="text/javascript">
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("Invalid E-mail ID")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("Invalid E-mail ID")
return false
}
if (str.indexOf(" ")!=-1){
alert("Invalid E-mail ID")
return false
}
return true
}
function checkform()
{
alert('HUP');
if (document.reg.Name.value=="")
{
// something is wrong
alert('Enter first name ');
document.reg.Name.focus();
return false;
}
else if (document.reg.Housename.value=="")
{
// something is wrong
alert('Enter Housename');
document.reg.Housename.focus();
return false;
}
else if (document.reg.Residence.value=="")
{
// something is wrong
alert('Enter Addressline2 number');
document.reg.Residence.focus();
return false;
}
else if (document.reg.City.value=="")
{
// something is wrong
alert('Enter City name');
document.reg.City.focus();
return false;
}
else if (document.reg.State.value=="")
{
// something is wrong
alert('Enter State name');
document.reg.State.focus();
return false;
}
else if (document.reg.Pin.value=="")
{
// something is wrong
alert('Enter Pin Number');
document.reg.Pin.focus();
return false;
}
else if ((document.reg.Email.value==null)||(document.reg.email.value==""))
{
alert("Enter your Email ID");
document.reg.Email.focus();
return false;
}
else if(echeck(document.reg.Email.value)==false)
{
alert('Enter email address properly \n[abc@abc.com]\nyourname@hostname.domainname\nExample:\nname@gmail.com');
document.reg.Email.focus();
return false;
}
else if (document.reg.Land.value=="")
{
// something is wrong
alert('Enter Land phone information');
document.reg.Land.focus();
return false;
}
else if (document.reg.Mobile1.value=="")
{
// something is wrong
alert('Enter Student Mobile phone information');
document.reg.Mobile1.focus();
return false;
}
else if (document.reg.Mobile2.value=="")
{
// something is wrong
alert('Enter Parent Mobile phone information');
document.reg.Mobile2.focus();
return false;
}
else if (document.reg.Qualification.value=="")
{
// something is wrong
alert('Enter Qualification information');
document.reg.Qualification.focus();
return false;
}
else if (document.reg.Subject.value=="")
{
// something is wrong
alert('Enter Subject information');
document.reg.Subject.focus();
return false;
}
else if (document.reg.College.value=="")
{
// something is wrong
alert('Enter College information');
document.reg.College.focus();
return false;
}
/* */
//document.reg.id.disabled=false;
return true;
}
</script>
</head>
<body background="img.jpg" >
<table border=0 width=63% align="center" bgcolor="#EFFBFC">
<tr><td>
<form name="reg" class="wufoo topLabel page" method="post" action="saveadmission.php" onSubmit="return checkform()">
<table style="border-color:#669999;border-style:dashed ;" align="center" cellpadding="2" cellspacing="2" width="85%">
<tbody>
<tr>
<td>Name </td>
<td><input id="Name" name="Name" style="width:150px" size="20" tabindex="2" type="text"></td></tr>
<td colspan="2"><strong><blockquote class="style1"><span>For Communication Purpose</span></blockquote></strong></td></tr>
<tr>
<td>House Name </td>
<td><span class="full addr1">
<input id="Housename" name="Housename" style="width:150px" class="field text addr" tabindex="6" type="text">
</span></td></tr>
<tr><td>Residence Name & No </td>
<td><span class="full addr2">
<input id="Residence" style="width:150px" name="Residence" class="field text addr" tabindex="7" type="text">
</span></td></tr>
<tr>
<td>City</td>
<td><span class="full addr1">
<input id="City" name="City" style="width:150px" class="field text addr" tabindex="8" type="text">
</span></td></tr>
<tr><td>State</td>
<td><span class="full addr2">
<input id="State" style="width:150px" name="State" class="field text addr" tabindex="9" type="text">
</span></td></tr>
<tr>
<td>Pin </td>
<td><span class="left">
<input id="Pin" style="width:150px" name="Pin" class="field text addr" maxlength="10" tabindex="10" type="text">
</span></td></tr>
<tr><td>Email Address </td>
<td><span class="left">
<input id="email" style="width:150px" name="Email" tabindex="11" class="field text addr" maxlength="27" type="text">
</span></td></tr>
<tr>
<td colspan="2"><strong><blockquote class="style1"><span>Contact Numbers</span></blockquote></strong></td></tr>
<tr>
<td>Land number [put NA if No Land Phone] </td>
<td><input id="Land" style="width:150px" name="Land" class="field text" size="15" maxlength="10" tabindex="12" type="text"></td></tr>
<td>Mobile Number of Student </td>
<td><input id="Mobile1" style="width:150px" name="Mobile1" class="field text" size="15" maxlength="13" tabindex="13" type="text"></td></tr>
<tr><td>Mobile Number of Parent </td>
<td><input id="Mobile2" style="width:150px" name="Mobile2" class="field text" size="15" maxlength="13" tabindex="13" type="text"></td></tr>
<tr bordercolor="#6699CC">
<td colspan="2"><strong><blockquote class="style1"><span>Under Graduate Course Details</span></blockquote></strong></td></tr>
<tr bordercolor="#6699CC">
<td>Basic Qualification </td>
<td><label>
<select name="Qualification" id="Qualification" tabindex="17" >
<option selected="selected" value="BSC">BSC</option>
<option value="BCA">BCA</option>
<option value="BCOM">BCOM</option>
<option value="Others">Others</option>
</select>
</label></td></tr>
<tr><td>Degree Subject </td>
<td><span class=" ">
<input name="Subject" style="width:150px" id="Subject" type="text" tabindex="18" >
</span></td></tr>
<tr><td>College of Current Study </td>
<td><span class=" ">
<input name="College" style="width:150px" id="College" type="text" tabindex="20" >
</span></td></tr>
<td colspan="2"><div align="center">
<input name="Save" id="Save" value="Save Data" type="submit" tabindex="21">
<label>
<input name="Reset" value="Clear Form" type="reset">
</label>
</div></td></tr>
</tbody></table>
<div class="info" align="center">
</div>
</form>
</td></tr></table>
</body>
</html>
Design
-------------
Step II
Creation of DB- Take phpmyadmin console and type the database name "snit" in the box provided.
[NB: Database need to be created only once]
----------------------------------------------------------------------------------------------------
Create Table
-----------------
SQL :
CREATE TABLE IF NOT EXISTS `student` (
`id` int(3) NOT NULL,
`Name` tinytext NOT NULL,
`Housename` tinytext NOT NULL,
`Residence` tinytext NOT NULL,
`City` tinytext NOT NULL,
`State` tinytext NOT NULL,
`Pin` tinytext NOT NULL,
`Email` tinytext NOT NULL,
`Land` tinytext NOT NULL,
`Mobile1` tinytext NOT NULL,
`Mobile2` tinytext NOT NULL,
`Qualification` tinytext NOT NULL,
`Subject` tinytext NOT NULL,
`College` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
After the creation of the Database, you click the SQL tab shown in the figure and copy the above SQL query and paste in the box provided in the screen and press GO.
Step III
PHP code to Save - saveadmission.php
------------------------------------------------------------------
<html >
<body>
<!--
Coded by Prof. Sajeev Jaladharan
Date : 27.11.2015
email: sajeevjal@gmail.com
-->
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("snit",$con);
$Name=$_POST['Name'];
$Housename=$_POST['Housename'];
$Residence=$_POST['Residence'];
$City=$_POST['City'];
$State=$_POST['State'];
$Pin=$_POST['Pin'];
$Email=$_POST['Email'];
$Land=$_POST['Land'];
$Mobile1=$_POST['Mobile1'];
$Mobile2=$_POST['Mobile2'];
//email address is set as the username
$Qualification=$_POST['Qualification'];
$Subject=$_POST['Subject'];
$College=$_POST['College'];
$id=0;
$sql="select max(id)+1 as maxid from student";
$data=mysql_query($sql,$con);
while($row=mysql_fetch_array($data))
{
$id=$row['maxid'];
}
$sql1="INSERT INTO `snit`.`student` (`id`, `Name`, `Housename`, `Residence`, `City`, `State`,`Pin`, `Email`, `Land`, `Mobile1`, `Mobile2`, `Qualification`, `Subject`, `College`) VALUES ('$id', '$Name', '$Housename', '$Residence', '$City', '$State', '$Pin', '$Email', '$Land', '$Mobile1', '$Mobile2', '$Qualification', '$Subject','$College')";
if (!mysql_query($sql1,$con))
{
die('Error: ' . mysql_error());
}
echo "<center>Congrats...Your data saved. Thank you. Wishing you all the best </center>";
mysql_close($con);
?>
<p> </p><p> </p><p> </p><p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
</body>
<?php
echo "<script>alert('Thanks for Registration'); </script>";
echo "<script>location.href='index.php';</script>";
?>
</html>
NB: Put these files in the project folder inside 'WWW' folder of WAMP/LAMP/XAMPP
mail me for more clarifications : sajeevjal@gmail.com