Scribd
Upload
14 views7 pages

Practical 2 2.1 Create A Web Page Can Communicate With A Web Server While User Type Character in An Input Field Using PHP

The document describes creating a web page that can communicate with a web server while a user types in an input field using PHP. It provides HTML code to create a form with an input field and JavaScript code to call a PHP file. The PHP code contains an array of names and code to return name suggestions matching the user input.

Uploaded by

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

Practical 2 2.1 Create A Web Page Can Communicate With A Web Server While User Type Character in An Input Field Using PHP

The document describes creating a web page that can communicate with a web server while a user types in an input field using PHP. It provides HTML code to create a form with an input field and JavaScript code to call a PHP file. The PHP code contains an array of names and code to return name suggestions matching the user input.

Uploaded by

Faisal Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Subject Name: Application of AWT (CA218)

StudentID:21102065

Practical 2
2.1 Create a web Page can communicate with a web server while user type
character in an input field using php.

Code:
1) Put HTML Code
<!DOCTYPE html>
<html lang="en">
<body>
<h1>The XML Http Request Object</h1>
<h3>
Start Typing a name in the input field below
</h3>
<form action="">
First Name : <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestion :<span id="txtHint"></p>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
Subject Name: Application of AWT (CA218)
StudentID:21102065

xmlhttp.open("GET", "gethint.php?q=" + str, true);


xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

2) Put PHP Code


<?php
//Array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Daniya";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hega";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
Subject Name: Application of AWT (CA218)
StudentID:21102065

$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tova";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from url
$q =$_REQUEST["q"];
$hint ="";
//lookup all hints from array if $q is different from ""
if($q !==""){
$q = strtolower($q);
$len = strlen($q);
foreach($a as $name){
if(stristr($q,substr($name,0,$len))){
if($hint === ""){
$hint = $name;
Subject Name: Application of AWT (CA218)
StudentID:21102065

}else{
$hint.=",$name";
}
}
}
}
//output "no suggestion" if no hint was found or output correct values
echo $hint ===""?"no suggestion":$hint;

OUTPUT

2.2 Aim: - Create a webpage can communicate with the web server while a
user type character in an input field using the php.
Code:
1. Put HTML Code

<html>
<head><title>BURGER</title>
<body>
<center><u><b><h1>COLD DRINKS</h1></b></u></center>
<center><img src="https://d2td6mzj4f4e1e.cloudfront.net/wp-
content/uploads/sites/9/2019/04/soft-drinks.jpg" width="400" height="300"
></center>
</br>
Subject Name: Application of AWT (CA218)
StudentID:21102065

</br>
</br>
<form action="">
<center>Search Menu:</br> <input type="Text" id="text1"
onkeyup="showHint(this.value)" ></center>
</form>
<center><p>OPTIONS: <span id="txtHint"></span></p></center>
<script>
function showHint(str){
var xhttp;
if (str.length==0)
{ document.getElementById("txtHint").innerHTML="";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()

{
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","ayaan.php?q="+str,true);
xmlhttp.send();
}
</script>
</script>
</br>
</body>
</html>
Subject Name: Application of AWT (CA218)
StudentID:21102065

2.Put PHP Code


<?php
$drinks = array(
$a[]="coke Rs.80",
$a[]="orange Rs.50",
$a[]="sprite Rs.70",
$a[]="limca Rs.60",

);
$q=$_REQUEST["q"];
$hint1="";
//lookup all hints from array if $q is different from ""
if ($q !=="") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $drinks) {
if(stristr($q, substr($drinks,0,$len))) {
if($hint1 ==="") {

$hint1 = $drinks;
} else {
$hint1 .= ", $drinks";
}
}
}
}
// Output "no suggestion" if no hint was found or output correct values
echo $hint1 === "" ? "no suggestion" : $hint1;

OUTPUT
Subject Name: Application of AWT (CA218)
StudentID:21102065

You might also like