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:
[pro1.php]
<script>
function myajax()
{
var name = document.getElementById("name").value;
var h = new XMLHttpRequest();
h.open("GET","ajax1.php?na="+name,true);
h.onreadystatechange = function(){
if( this.readyState == 4 &&this.status == 200)
{
document.getElementById("d1").innerHTML = this.responseText;
}
}
h.send();
}
</script>
<form action="" method="post">
Name :<input type="text" id="name" onKeyUp="myajax()">
<div id="d1"></div>
</form>
[ajax1.php]
<?php
$na = $_GET["na"];
echo "WELCOME :".$na;
?>

23
 Output:

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

Program:
[pro2.php]
<script>
function myajax()
{
var name = document.getElementById("name").value;

var h = new XMLHttpRequest();

h.open("GET","ajax1.php?na="+name,true);
h.onreadystatechange = function(){

if( this.readyState == 4 &&this.status == 200)

{
document.getElementById("d1").innerHTML = this.responseText;
}
}
h.send();

}
</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
 [ajax2.php]
<?php
$na = $_GET["na"];
echo "WELCOME :".$na;
?>
Output:

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

Program:
[pro3.php]
<script>
function sp(){
var x = document.getElementById("pro").value;
var h = new XMLHttpRequest();
h.onreadystatechange = function(){
if(this.status == 200 &&this.readyState == 4)
{
document.getElementById("d1").innerHTML = this.responseText;

}
}
h.open("GET","ajax3.php?pid="+x,true);
h.send();
}
</script>

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

25
 <div id="d1"></div>
</form>
[ajax3.php]
<?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:
[pro4.php]
<script>
function sp(){
var x = document.getElementById("pro").value;
alert(x);
var h = new XMLHttpRequest();
h.onreadystatechange = function(){
if(this.status == 200 &&this.readyState == 4)
{
document.getElementById("d1").innerHTML = this.responseText;

}
}
h.open("GET","ajax4.php?pid="+x,true);
h.send();
}

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>
[ajax4.php]
<?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:
[pro5.php]
<script>
function g(){
var x = document.getElementsByName("r");
var a = "";
for (var i= 0 ;i<x.length ; i++)
{
if(x[i].checked)
a+=x[i].value;
}
var h = new XMLHttpRequest();
h.onreadystatechange = function(){
if(this.status == 200 &&this.readyState == 4)

28
 {
document.getElementById("d1").innerHTML = this.responseText;
}
}
h.open("GET","ajax5.php?g="+a,true);
h.send();
}
function hobby(){
var y = document.getElementsByName("h");
var b = "";
for (var i= 0 ;i<y.length ; i++)
{
if(y[i].checked)
b+=y[i].value+" ";
}
var h = new XMLHttpRequest();
h.onreadystatechange = function(){
if(this.status == 200 &&this.readyState == 4)
{
document.getElementById("d2").innerHTML = this.responseText;
}
}
h.open("GET","ajax5.php?h="+b,true);
h.send();
}
</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>
[ajax5.php]
<?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:
[pro6.php]
<script>
function call(){

30
 var x = document.getElementById("t1").value;
var h = new XMLHttpRequest();
h.onreadystatechange = function(){
if(this.status == 200 &&this.readyState == 4)
{
document.getElementById("d1").innerHTML = this.responseText;
}
}
h.open("GET","ajax6.php?str="+x,true);
h.send();
}
</script>
String:
<input type="text" id="t1" onKeyUp="call()">

<div id="d1"></div>
<?php
?>
[ajax6.php]
<?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:
[pro7.php]
<script type="text/javascript">
function call(){
var x = document.getElementById("t1").value;
var reg =/^([a-zA-Z0-9\.-]+)@([a-zA-z0-9-]+).([a-z]{2,20})$/;
x.title ="[email protected]";
if(reg.test(reg))
{
console.log ("valid");
}else{
console.log("invlaid");
}
var h = new XMLHttpRequest();
h.onreadystatechange = function(){
if(this.status == 200 &&this.readyState == 4)
{
document.getElementById("d1").innerHTML = this.responseText;
}
}
h.open("GET","ajax7.php?str="+x,true);

32
 h.send();
}
</script>
<input type="text" id="t1" onKeyUp="call()" required >
<div id="d1"></div>
[ajax6.php]
<?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 table.Implement using AJAX.

Program:
[pro8.php]
<script type="text/javascript">

33
 function call(){
var id = document.getElementById("sid").value;
var na = document.getElementById("sname").value;
var mob = document.getElementById("mob").value;
var c = document.getElementById("c").value;
var h = new XMLHttpRequest();
h.onreadystatechange = function(){
if(this.status == 200 &&this.readyState == 4)
{
document.getElementById("d1").innerHTML = this.responseText;
}
}
h.open("GET","ajax8.php?
sid="+id+"&sname="+name+"&mob="+mob+"&c="+c,true);
h.send();
}
</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>

[ajax8.php]
<?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