Scribd
Upload
9 views14 pages

AJAX Form Handling and Validation Examples

The document provides a series of AJAX-based programming exercises, demonstrating how to create interactive web forms that respond to user input without page reloads. It includes examples for displaying welcome messages, converting strings to uppercase, handling selections from combo boxes, and validating user input for fields such as email and student IDs. Each exercise is accompanied by PHP scripts for server-side processing and AJAX calls to update the web page dynamically.

Uploaded by

hetvi08102004
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views14 pages

AJAX Form Handling and Validation Examples

The document provides a series of AJAX-based programming exercises, demonstrating how to create interactive web forms that respond to user input without page reloads. It includes examples for displaying welcome messages, converting strings to uppercase, handling selections from combo boxes, and validating user input for fields such as email and student IDs. Each exercise is accompanied by PHP scripts for server-side processing and AJAX calls to update the web page dynamically.

Uploaded by

hetvi08102004
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

uUnit - 3

1. Create a form containing one input field (Name). When the user enters
his/her name and as any key is released , the form should display a
welcome message for the user. Implement using AJAX.

Program:
[[Link]]
<script>
function myajax()
{
var name = [Link]("name").value;
var h = new XMLHttpRequest();
[Link]("GET","[Link]?na="+name,true);
[Link] = function(){
if( [Link] == 4 &&[Link] == 200)
{
[Link]("d1").innerHTML = [Link];
}
}
[Link]();
}
</script>
<form action="" method="post">
Name :<input type="text" id="name" onKeyUp="myajax()">
<div id="d1"></div>
</form>
[[Link]]
<?php
$na = $_GET["na"];
echo "WELCOME :".$na;
?>

23
Output:

2. Repeat the above question to demonstrate the use of keydown and keypress
events.

Program:
[[Link]]
<script>
function myajax()
{
var name = [Link]("name").value;

var h = new XMLHttpRequest();


[Link]("GET","[Link]?na="+name,true);
[Link] = function(){

if( [Link] == 4 &&[Link] == 200)


{
[Link]("d1").innerHTML = [Link];
}
}
[Link]();

}
</script>

<form action="" method="post">


Name :<input type="text" id="name" onKeyUp="myajax()">
<!--<input type="text" id="name" onKeyDown="myajax()"> -->
<h3 align="right"><div id="d1"></div></h1>
</form>

24
[[Link]]
<?php
$na = $_GET["na"];
echo "WELCOME :".$na;
?>
Output:

3. Write a program for converting a string into uppercase using AJAX.

Program:
[[Link]]
<script>
function sp(){
var x = [Link]("pro").value;
var h = new XMLHttpRequest();
[Link] = function(){
if([Link] == 200 &&[Link] == 4)
{
[Link]("d1").innerHTML = [Link];

}
}
[Link]("GET","[Link]?pid="+x,true);
[Link]();
}
</script>

<form>
Enter String :<input type="text" id="pro" onKeyUp="sp()"><br/>

25
<div id="d1"></div>
</form>
[[Link]]
<?php
$na = $_GET["pid"];
echo strtoupper($na);
?>
Output:

4. Create a form contaning a combobox with some product names as items.


Whenever a user selects a particular product from the combox, it shuold be
sent to the server asynchronously(i.e. without pressing submit button).
Implement using AJAX.

Program:
[[Link]]
<script>
function sp(){
var x = [Link]("pro").value;
alert(x);
var h = new XMLHttpRequest();
[Link] = function(){
if([Link] == 200 &&[Link] == 4)
{
[Link]("d1").innerHTML = [Link];

}
}
[Link]("GET","[Link]?pid="+x,true);
[Link]();
}

26
</script>

<?php
$con = mysqli_connect("localhost","root","","my_db_1");
$q = "select * from product";
$res = mysqli_query($con,$q)
?>
<form>
<select id="pro" onChange="sp()">
<?php
while($rd = mysqli_fetch_array($res))
{
?>
<option value="<?php echo $rd['pro_id']; ?>"><?php echo $rd['pro_name'];
?></option>
<?php
}
?>
</select>
<div id="d1"></div>
</form>
[[Link]]
<?php
$na = $_GET["pro_id"];
$con = mysqli_connect("localhost","root","","my_db_1");
$q = "select * from product where pro_id = '$na'";
$res = mysqli_query($con,$q);
if($rd = mysqli_fetch_array($res))
{
echo $rd['pro_id'];
echo $rd['pro_name'];
echo $rd['pro_price'];

27
echo $rd['pro_QOH'];
}
?>
Output:

5. Write a program to demostrate the example of sending items selected from


radio and checkbox to server asynchronously.

Program:
[[Link]]
<script>
function g(){
var x = [Link]("r");
var a = "";
for (var i= 0 ;i<[Link] ; i++)
{
if(x[i].checked)
a+=x[i].value;
}
var h = new XMLHttpRequest();
[Link] = function(){
if([Link] == 200 &&[Link] == 4)

28
{
[Link]("d1").innerHTML = [Link];
}
}
[Link]("GET","[Link]?g="+a,true);
[Link]();
}
function hobby(){
var y = [Link]("h");
var b = "";
for (var i= 0 ;i<[Link] ; i++)
{
if(y[i].checked)
b+=y[i].value+" ";
}
var h = new XMLHttpRequest();
[Link] = function(){
if([Link] == 200 &&[Link] == 4)
{
[Link]("d2").innerHTML = [Link];
}
}
[Link]("GET","[Link]?h="+b,true);
[Link]();
}
</script>

<form>
<input type="radio" name="r" value="Male" onChange="g()">MALE
<input type="radio" name="r" value="Female" onChange="g()">FEMALE
<div id ="d1"></div>

29
<input type= "checkbox" name="h" value="cricket" onClick="hobby()">Cricket
<input type= "checkbox" name="h" value="football" onClick="hobby()">Football
<input type= "checkbox" name="h" value="hockey" onClick="hobby()">Hockey
<input type= "checkbox" name="h" value="badminton" onClick="hobby()">badminton
<div id ="d2"></div>
</form>
[[Link]]
<?php
if(isset($_GET["g"]))
{
$na = $_GET["g"];
echo $na;
}
else if(isset($_GET["h"]))
{
$na = $_GET["h"];
echo $na;
}
?>
Output:

6. Write a program to validate a blank field and also validate the length of the
data entered(i.e. minimum lenght of 5).

Program:
[[Link]]
<script>
function call(){

30
var x = [Link]("t1").value;
var h = new XMLHttpRequest();
[Link] = function(){
if([Link] == 200 &&[Link] == 4)
{
[Link]("d1").innerHTML = [Link];
}
}
[Link]("GET","[Link]?str="+x,true);
[Link]();
}
</script>
String:
<input type="text" id="t1" onKeyUp="call()">

<div id="d1"></div>
<?php
?>
[[Link]]
<?php
$name = $_GET['str'];
$x = strlen($name);
if($x < 5)
{
if($name==""){
echo "pls enter something";
}
else{
echo "length greater than 5";
}
}
?>

31
Output:

7. Write a programto validate and Email ID using regular expression and by


using DOM.

Program:
[[Link]]
<script type="text/javascript">
function call(){
var x = [Link]("t1").value;
var reg =/^([a-zA-Z0-9\.-]+)@([a-zA-z0-9-]+).([a-z]{2,20})$/;
[Link] ="abc@[Link]";
if([Link](reg))
{
[Link] ("valid");
}else{
[Link]("invlaid");
}
var h = new XMLHttpRequest();
[Link] = function(){
if([Link] == 200 &&[Link] == 4)
{
[Link]("d1").innerHTML = [Link];
}
}
[Link]("GET","[Link]?str="+x,true);

32
[Link]();
}
</script>
<input type="text" id="t1" onKeyUp="call()" required >
<div id="d1"></div>
[[Link]]
<?php
$em = $_GET['str'];
if (!filter_var($em,FILTER_VALIDATE_EMAIL)==false)
{
echo("$em is a valid email adress");# code...
}
else
{
echo("$em is not a valid email adress");
}
?>
Output:

8. Write a program that checks a particular stuId already exits in the


student(stuId,stu_name,mob,country) table or not. If stuId exists then
display a message "User Already Exit. Try another stuId". If it does not
exits then add the data in the student [Link] using AJAX.

Program:
[[Link]]
<script type="text/javascript">

33
function call(){
var id = [Link]("sid").value;
var na = [Link]("sname").value;
var mob = [Link]("mob").value;
var c = [Link]("c").value;
var h = new XMLHttpRequest();
[Link] = function(){
if([Link] == 200 &&[Link] == 4)
{
[Link]("d1").innerHTML = [Link];
}
}
[Link]("GET","[Link]?
sid="+id+"&sname="+name+"&mob="+mob+"&c="+c,true);
[Link]();
}
</script>
id :<input type="text" id = "sid" onKeyUp="call()"><br/>
name :<input type="text" id ="sname"><br/>
mob :<input type="text" id ="mob"><br/>
county :<input type="text" id ="c"><br/>
<input type="submit" onClick="call()">
<div id="d1"></div>

[[Link]]
<?php
$con = mysqli_connect("localhost","root","","my_db_1");
$id = $_GET['sid'];
$name = $_GET['sname'];
$mob = $_GET['mob'];
$c = $_GET['c'];

34
$query = "select * from student where stuId = '$id'";
$res = mysqli_query($con,$query);
if($res1 = mysqli_fetch_array($res))
{
echo "User Already exist,<br> Try another student Id.";
}
else {
if($name=="" && $mob==""&&$c=="")
echo "pls fillup all fields";
else{
mysqli_query($con,"insert into student values('$id','$name','$mob','$c')");
echo "data added";
}
}
?>

Output:

35
36

You might also like