Showing posts with label Form. Show all posts
Showing posts with label Form. Show all posts

Form Validation Using InnerHTML - HTML JAVASCRIPT



FORM VALIDATION USING INNERHTML
HTML JAVASCRIPT

Demo Registration Form

Male Female


* - Mandatory
HTML CODE: REGISTRATION.HTML 
<html >
<head>

<!--validation-->
<script typ="text/javascript" src="innerHTMLValidation.js" ></script>
     
</head>

<body>
<div class="container">
<div class="content">
 <center>
<form name="form1"  method="post" action="success.html">
 <fieldset>

<h1>Demo Registration Form</h1>
   <table border='0'>
 <tr>
  <td><LABEL for="firstname">First Name:<sup style="color:#F00">*</sup> </LABEL></td>
         <td><INPUT type="text" id="firstname"></td><td width="200px"><i style="color:red;" id="pointfn"></i></td>
 </tr>
 <tr>
  <td><LABEL for="lastname">Last Name:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="lastname"></td><td width="200px"><i style="color:red;" id="pointln"></i></td>
 </tr>
     
 <tr>
   <td><LABEL for="gender">Gender:<sup style="color:#F00">*</sup> </LABEL></td> <td><INPUT type="radio" name="gender" value="Male"> Male
   <INPUT type="radio" name="gender" value="Female"> Female</td><td width="200px"> <i style="color:red;" id="pointgendr"></i></td>
 </tr>
 <tr>
  <td><LABEL for="dob">Date of Birth:<sup style="color:#F00">*</sup> </LABEL></td>
  <td> 
  <select id="dd">
        <option value="dd">DD</option>
        <script type="text/javascript">
   for(var i=1;i<32;i++)
    document.write("<option value='"+i+"'>" + i+"</option> ");
   </script>
        </select>
                </select>
                 <select id="mmm">
         <option value="mmm">MMM</option>
         <option value="0">JAN</option>
         <option value="1">FEB</option>
         <option value="2">MAR </option>
         <option value="3">APR</option>
         <option value="4">MAY</option>
         <option value="5">JUN</option>
         <option value="6">JUL</option>
         <option value="7">AUG</option>
         <option value="8">SEP</option>
         <option value="9">OCT</option>
         <option value="10">Nov</option>
         <option value="11">DEC</option>
        </select>
        <select id="yyyy">
           <option value="yyyy"selected>YYYY</option>
        <script type="text/javascript">
   var dt= new Date();
   for(var i=1979;i<=dt.getFullYear()-18;i++)
    document.write("<option value='"+i+"'>" + i+"</option> ");
  </script>
  </select>
   </td><td width="200px"><i style="color:red;" id="pointdob"></i>
  </td>
 </tr>
 <tr>
  <td><LABEL for="address" style="text-align:left;">Address:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><textarea id="address"  name="address" rows="4" cols="20"></textarea></td><td width="200px"><i style="color:red;" id="pointadrs"></i>   
  </td>
  

 </tr>
 <tr>
  <td><LABEL for="contctno">Contact Number:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="contctno"></td><td width="200px"><i style="color:red;" id="pointcontct"></i></td>
 </tr>
 <tr>
  <td><LABEL for="email">Email:<sup style="color:red;">*</sup> </LABEL></td>
  <td><INPUT type="text" id="email"></td><td width="200px"><i style="color:red;" id="pointemail"></i></td>
 </tr>
 <tr>
  <td></td><td><br/><INPUT type="submit" onClick="return validateForm()" value="Submit">
  <INPUT type="reset" onClick="return confirmreset()"></td>
 </tr>
 
 <tr>
  <td></td><td style="font-size:12px;text-align:right;"><br/><i style="color:red;font-size:12px;align:right;" >* - Mandatory</i></td>
 </tr>
    </table>
<fieldset>
 </FORM></center>
 </div>
</div>


</body>
</html>

JAVASCRIPT CODE: innerHTMLValidation.js 

 var namepattern=/^[a-zA-Z]+$/
 var phonepattern = /^\d{10}$/
 var emailpattern =/^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.([a-zA-Z]{2,4})$/
 var emailpattern2 =/^[a-zA-Z][a-zA-Z0-9_]*(\.[a-zA-Z0-9_]+)*$/
 var idpattern=/^\d{6}$/;

function validateForm()
{
 
 var x=document.forms["form1"]["firstname"];
 if (x.value=="")
   {
  
  document.getElementById('pointfn').innerHTML="Please enter the first name.";
    x.focus();
  return false;
   }
 
 else if(x.value.length>20)
   {
  x.value="";
  document.getElementById('pointfn').innerHTML="Please enter less than 20 characters.";
  x.focus();
  return false;
   }
 else if ((!namepattern.test(x.value)))
   {
  document.getElementById('pointfn').innerHTML="Please enter only alphabets.";
    x.value="";
  x.focus();
  return false;
   }

 document.getElementById('pointfn').innerHTML='';

 x=document.forms["form1"]["lastname"];

 if(x.value=="")
   {
  document.getElementById('pointln').innerHTML="Please enter the Last name.";
  x.focus();
  return false;
 } 
  else if(x.value.length>20)
   {
  x.value="";
  document.getElementById('pointln').innerHTML="Please enter less than 20 characters.";
  x.focus();
  return false;
 }
 else if (!namepattern.test(x.value))
   {
  x.value="";
  document.getElementById('pointln').innerHTML="Please enter only alphabets.";
  x.focus();
  return false;
 }
 document.getElementById('pointln').innerHTML="";
 if((document.form1.gender[0].checked==false)&&(document.form1.gender[1].checked==false))
 {
  document.form1.gender[0].focus();
  document.getElementById('pointgendr').innerHTML='Please select a gender.';
  return false;
 }
 document.getElementById('pointgendr').innerHTML='';
 var dd=document.form1.dd.value;
 var mmm=document.form1.mmm.value;
 var yyyy=document.form1.yyyy.value;
 if(!validdate(dd,mmm,yyyy))
 {
  document.getElementById('pointdob').innerHTML="Plaese select a valid date.";
  return false;
 }
  
 document.getElementById('pointdob').innerHTML="";
 x= document.getElementById("address");
 if(x.value==null || x.value=="" )
 {
  x.value="";
  document.getElementById('pointadrs').innerHTML="Please enter the address.";
  x.focus();
  return false;
 }
 else if(x.value.length<20)
   {
  x.value="";
  document.getElementById('pointadrs').innerHTML="Please enter atleast 20 characters.";
  x.focus();
  return false;
 }
 document.getElementById('pointadrs').innerHTML="";

 x=document.form1.contctno;

 if(x.value=="")
 {
  
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter the contact number.";
  x.focus();
  return false;
 }
 else if(isNaN(x.value))
 {
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter only digits.";
  x.focus();
  return false;
 }
 else if(x.value.length!=10)
 {
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter only 10 digits.(Mobile number)";
  x.focus();
  return false;
 }
 else if(!phonepattern.test(x.value))
 {
  x.value="";
  document.getElementById('pointcontct').innerHTML="Please enter a valid contact number.";
  x.focus();
  return false;
 }
 document.getElementById('pointcontct').innerHTML="";

 x=document.form1.email;
 if(x.value=="")
 {
  x.value="";
  document.getElementById('pointemail').innerHTML="Please enter the email id.";
  x.focus();
  return false;
 }
 else if(!emailpattern.test(x.value))
 {
  x.value="";
  document.getElementById('pointemail').innerHTML="Please enter a valid email address.";
  x.focus();
  return false;
 }
 document.getElementById('pointemail').innerHTML="";
 return confirm("Do you want to submit the form?");
}
        function validdate(dd,mm,yyyy)
 {
  var dateobj = new Date(yyyy, mm, dd);
  var datecurrent= new Date();
  if((dateobj.getMonth()!=mm)||(dateobj.getDate()!=dd)||(dateobj.getFullYear()!=yyyy)||(dateobj>datecurrent))
  {
   return false;
  }
  return true;
 }
 
 function confirmreset()
 {
  if(confirm("Do you want to reset the form?"))
{
 document.getElementById('pointfn').innerHTML="";
 document.getElementById('pointln').innerHTML="";
 document.getElementById('pointgendr').innerHTML="";
 document.getElementById('pointdob').innerHTML="";
 document.getElementById('pointadrs').innerHTML="";
 document.getElementById('pointcontct').innerHTML="";
 document.getElementById('pointemail').innerHTML="";
 return true;
}
else
 return false;
 }
9 comments
Labels: , , , ,

Registration Form Validation Example - HTML JAVASCRIPT ALERT BOX


Demo Registration Form

Male Female


* - Mandatory


HTML code: Demo Registration.html 
<html >
<head>

       <!--external javascript-->
<script typ="text/javascript" src="validation.js" >
</script>

</head>
<body>

<center>
<h1>Demo Registration Form</h1>
<form name="form1"  method="post" action="success.html">
 
<table border='0'>
 <tr>
  <td><LABEL for="firstname">First Name:<sup style="color:#F00">*</sup> </LABEL></td>
         <td><INPUT type="text" id="firstname"></td>
 </tr>
 <tr>
  <td><LABEL for="lastname">Last Name:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="lastname"></td>
 </tr>
     
 <tr>
   <td><LABEL for="gender">Gender:<sup style="color:#F00">*</sup> </LABEL></td> <td><INPUT type="radio" name="gender" value="Male"> Male
   <INPUT type="radio" name="gender" value="Female"> Female </td>
 </tr>
 <tr>
  <td><LABEL for="dob">Date of Birth:<sup style="color:#F00">*</sup> </LABEL></td>
  <td> 
  <select id="dd">
        <option value="dd">DD</option>
        <script type="text/javascript">
   for(var i=1;i<32;i++)
    document.write("<option value='"+i+"'>" + i+"</option> ");
   </script>
        </select>
                </select>
                 <select id="mmm">
         <option value="mmm">MMM</option>
         <option value="0">JAN</option>
         <option value="1">FEB</option>
         <option value="2">MAR </option>
         <option value="3">APR</option>
         <option value="4">MAY</option>
         <option value="5">JUN</option>
         <option value="6">JUL</option>
         <option value="7">AUG</option>
         <option value="8">SEP</option>
         <option value="9">OCT</option>
         <option value="10">NOV</option>
         <option value="11">DEC</option>
        </select>
        <select id="yyyy">
           <option value="yyyy"selected>YYYY</option>
        <script type="text/javascript">
   var dt= new Date();
   for(var i=1979;i<=dt.getFullYear();i++)
    document.write("<option value='"+i+"'>" + i+"</option> ");
  </script>
  </select>
   
  </td>
 </tr>
 <tr>
  <td><LABEL for="address" style="text-align:left;">Address:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><textarea id="address"  name="address" rows="4" cols="20"></textarea>   
  </td>
  

 </tr>
 <tr>
  <td><LABEL for="contctno">Contact Number:<sup style="color:#F00">*</sup> </LABEL></td>
  <td><INPUT type="text" id="contctno"></td>
 </tr>
 <tr>
  <td><LABEL for="email">Email:<sup style="color:red;">*</sup> </LABEL></td>
  <td><INPUT type="text" id="email"></td>
 </tr>
 <tr>
  <td></td><td><br/><INPUT type="submit" onClick="return validateForm()" value="Submit">
  <INPUT type="reset" onClick="return confirmreset()"></td>
 </tr>
 
 <tr>
  <td></td><td style="font-size:12px;text-align:right;"><br/><i style="color:red;font-size:12px;align:right;" >* - Mandatory</i></td>
 </tr>
    </table>
 </FORM></center>



</body>
</html>

Javascript code: validation.js 
function validateForm()
{
 
 var x=document.forms["form1"]["firstname"];
 if (x.value=="")
   {
  alert("Please enter the First name.");
  x.focus();
  return false;
   }
 
 else if(x.value.length>20)
   {
   alert("First name cannot be greater than 20 characters.");
  x.value="";
  x.focus();
  return false;
   }
 else if ((!namepattern.test(x.value)))
   {
  alert("First name should contain only alphabets.");
  x.value="";
  x.focus();
  return false;
   }

 x=document.forms["form1"]["lastname"];
 if(x.value=="")
   {
  alert("Please enter the Last name.");
  x.focus();
  return false;
 } 
  else if(x.value.length>20)
   {
  alert("Last name cannot be greater than 20 characters.");
  x.value="";
  x.focus();
  return false;
 }
 else if (!namepattern.test(x.value))
   {
    alert("Last name should contain only alphabets.");
  x.value="";
  x.focus();
  return false;
 }

 if((document.form1.gender[0].checked==false)&&(document.form1.gender[1].checked==false))
 {
  document.form1.gender[0].focus();
  alert("Please select a gender.");
  return false;
 }
 var dd=document.form1.dd.value;
 var mmm=document.form1.mmm.value;
 var yyyy=document.form1.yyyy.value;
 if(!validdate(dd,mmm,yyyy))
 {
  return false;
 }
  
 x= document.getElementById("address");
 if(x.value==null || x.value=="" )
 {
  alert("Please enter the Address.");
  x.value="";
  x.focus();
  return false;
 }
 else if(x.value.length<20)
   {
  alert("Address should be greater than 20 characters.");
  x.value="";
  x.focus();
  return false;
 }

 x=document.form1.contctno;
 if(x.value=="")
 {
  alert("Please enter the Contact number.");
  x.value="";
  x.focus();
  return false;
 }
 else if(isNaN(x.value))
 {
  alert("Contact number should contain only digits.");
  x.value="";
  x.focus();
  return false;
 }
 else if(x.value.length!=10)
 {
  alert("Contact number should contain only 10 digits.(Mobile number)");
  x.value="";
  x.focus();
  return false;
 }
 else if(!phonepattern.test(x.value))
 {
  alert("Invalid Contact number.");
  x.value="";
  x.focus();
  return false;
 }

 x=document.form1.email;
 if(!emailpattern.test(x.value))
 {
  alert("Invalid email id.");
  x.value="";
  x.focus();
  return false;
 }

 if(confirm("Do you want to submit the form?"))
{
alert("Registration Form Submitted Successfully.");
}
else
return false;

}
function validdate(dd,mm,yyyy)
 {
  var dateobj = new Date(yyyy, mm, dd);
  var datecurrent= new Date();
  if((dateobj.getMonth()!=mm)||(dateobj.getDate()!=dd)||(dateobj.getFullYear()!=yyyy)||(dateobj>datecurrent))
  {
   alert("Please select a valid date.");
   return false;
  }
  return true;
 }
 
 function confirmreset()
 {
  return confirm("Do you want to reset the form?");
 }
15 comments
Labels: , , , , ,

PHP Examples - Student Details - Delete Data From Database - Form

PHP Examples - Student Details
Delete Data From Database -  Form

Program:

// php10.php

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP EXAMPLE 9 : Database with Form - Deletion </title>
</head>

<body>

<?php
 
 echo "<br/>PHP Example 9";
 echo"<br/>"; // line break
 echo"<h1>";
 echo"Delete Data From DATABASE";
 echo"</h1>";
 echo"<br/>";
 
 // echo"<br>CONNECTING...";
 $con = mysql_connect("localhost","root","");  // Connecting to the database
 if(!$con)
  die('Connection Failed'.mysql_error());
 echo"<br>CONNECTED...";
 if(!mysql_select_db("DB1",$con)) 
 {
  if(mysql_query("CREATE DATABASE DB1",$con)) // Creating database
   echo"<br><br>DB1 Created...";
  else
   echo 'Error Occured...'.mysql_error();
  
  mysql_select_db("DB1",$con);  // Creating tables
  
  mysql_query(" CREATE TABLE Students(
  Rollnum int NOT NULL,
  Name varchar(20),
  Mark int,
  PRIMARY KEY(Rollnum) )",$con);
 }
 $data= mysql_query(" SELECT Rollnum FROM Students ",$con); // Retreiving data
 echo"<center>
 <h2><b><u> STUDENT DETAILS </u></b></h2>
 <form method=\"post\" action=\"deletedata.php\"><br/><br/><br/>
 Select Roll Number: <select name=\"selection\">";

 while($rec=mysql_fetch_array($data))
 {
  echo "<option>".$rec['Rollnum']."</option>";  
 }
 
 echo "</select>
 <input type=\"submit\" value=\"Delete\" />
 </form>
 </center>";
 mysql_close($con);  // Closing connection
?>
</body>
</html>
// deletedata.php

<html >
<head>

<title>PHP EXAMPLE 9 : Database with Form - Deletion</title>
</head>

<body>
<?php
 
 echo "<br/>PHP Example 9";
 echo"<br/>"; // line break
 echo"<h1>";
 echo"Delete Data From DATABASE";
 echo"</h1>";
 echo"<br/>";
 
 //echo $_POST['selection'];
 
 echo"<br>CONNECTING...";
 $con = mysql_connect("localhost","root","");  // Connecting to the database
 if(!$con)
   die('Connection Failed'.mysql_error());
 echo"<br>CONNECTED...";
 if(!mysql_select_db("DB1",$con)) 
 {
  if(mysql_query("CREATE DATABASE DB1",$con)) // Creating database
   echo"<br><br>DB1 Created...";
  else
   echo 'Error Occured...'.mysql_error();
  mysql_select_db("DB1",$con);  // Creating tables
  mysql_query(" CREATE TABLE Students(
  Rollnum int NOT NULL,
  Name varchar(20),
  Mark int,
  PRIMARY KEY(Rollnum) )",$con);
 }
 $deleteqry="SELECT * FROM Students where Rollnum =". $_POST['selection'];
 $data1= mysql_query($deleteqry,$con); // Retreiving data
  
  //echo $data1;
  if($rec=mysql_fetch_array($data1))
   echo "<br/>Deleting...<br/>".$rec['Rollnum']." ".$rec['Name']." ".$rec['Mark']."<br/>";  
  else
   die( "<br/> Error in database access...".mysql_errno());  
  
  $deleterec = "DELETE FROM Students WHERE Rollnum=".$_POST['selection'];
 if(!mysql_query($deleterec,$con))
   die( "<br/> Error in deletion...".mysql_errno());  
 echo"<br><br>Record Deleted...<br/> Updated Table...";    

$data= mysql_query(" SELECT * FROM Students ",$con); // Retreiving data

 echo "<table border='2'>
   <tr> 
   <th> Roll No</th>
   <th> Name</th>
   <th> Mark </th>
   </tr>";

 while($rec=mysql_fetch_array($data))
 {
  echo "<tr><td>".$rec['Rollnum']."</td><td>".$rec['Name']."</td><td>".$rec['Mark']."</td></tr>";  
 }
 echo"</table>";
 
 // mysql_query(" DROP DB1 ",$con);
 mysql_close($con);  // Closing connection

 echo "<br/><br/><br/><br/><b>";
 echo"WWW.2K8618.BLOGSPOT.COM";
 echo"</b>";
?>


</body>
</html>

Output:



6 comments
Labels: , , , , , , , ,

PHP Examples - Form - Insert Data To Database

PHP Examples - Form 
 Insert Data To Database

Program:
// php9.php
<html >
<head>
<title>PHP EXAMPLE 9 : Database with Form - Insertion </title>
</head>

<body>

<?php
 
 echo "<br/>PHP Example 9";
 echo"<br/>"; // line break
 echo"<h1>";
 echo"Insert Form Data To DATABASE";
 echo"</h1>";
 echo"<br/>";
?>
<center>
<h2><b><u> STUDENT DETAILS </u></b></h2>
<form method="post" action="insertdata.php"><br/><br/><br/>
Roll No: <input type="text" value="" name="rollno"/><br/><br/><br/>
Name: <input type="text" value="" name="name1"/><br/><br/><br/>
Mark: <input type="text" value="" name="mark"/><br/><br/><br/>
<input type="submit" value="Submit" />

</form>
</center>
</body>
</html>


// insertdata.php

<html >
<head>

<title>PHP EXAMPLE 9 : Database with Form - Insertion</title>
</head>

<body>
<?php
 
 echo "<br/>PHP Example 9";
 echo"<br/>"; // line break
 echo"<h1>";
 echo"Insert Form Data To DATABASE";
 echo"</h1>";
 echo"<br/>";
 
 echo"<br>CONNECTING...";
 $con = mysql_connect("localhost","root","");  // Connecting to the database
 if(!$con)
   die('Connection Failed...'.mysql_error());
 echo"<br>CONNECTED...";
 if(!mysql_select_db("DB1",$con)) 
 {
  if(mysql_query("CREATE DATABASE DB1",$con)) // Creating database
   echo"<br><br>DB1 Created...";
  else
   echo 'Error Occured...'.mysql_error();
  mysql_select_db("DB1",$con);  // Creating tables
  mysql_query(" CREATE TABLE Students(
  Rollnum int NOT NULL,
  Name varchar(20),
  Mark int,
  PRIMARY KEY(Rollnum) )",$con);
  echo"<br><br>Table  Students Created...";  
 }

 
  
 echo"<br><br>Table  Students Created...";  
   // Inserting data
 $insertst = "INSERT INTO Students VALUES ('$_POST[rollno]','$_POST[name1]','$_POST[mark]')";
 if(!mysql_query($insertst,$con))
   die( "<br/> Error...".mysql_errno());  
 echo"<br><br>Records added...<br/> Updated Table...";    
 $data= mysql_query(" SELECT * FROM Students ",$con); // Retreiving data

 echo "<table border='2'>
   <tr> 
   <th> Roll No</th>
   <th> Name</th>
   <th> Mark </th>
   </tr>";

 while($rec=mysql_fetch_array($data))
 {
  echo "<tr><td>".$rec['Rollnum']."</td><td>".$rec['Name']."</td><td>".$rec['Mark']."</td></tr>";  
 }
 echo"</table>";
 
 // mysql_query(" DROP DB1 ",$con);
 mysql_close($con);  // Closing connection

 echo "<br/><br/><br/><br/><b>";
 echo"WWW.2K8618.BLOGSPOT.COM";
 echo"</b>";
?>


</body>
</html>

2 comments
Labels: , , , , , ,
Subscribe to: Posts (Atom)
Related Posts Plugin for WordPress, Blogger...