The application is designed to display an image, along with the name and occupation based on user input when hovered. I am encountering the following issues: Notice: Undefined index: src in C:\xampp\htdocs\Ajax\Ajax_image\PHP_AJAX.php and Notice: Undefined index: name in C:\xampp\htdocs\Ajax\Ajax_image\PHP_AJAX.php
Since I am relatively new to Ajax, any assistance would be greatly appreciated.
$(document).ready(function() {
$('#view').click(function() {
var namevalue = $('#name').val();
$.post("PHP_AJAX.php", {
name: namevalue
}, function(data) {
$('#bar').html(data);
$("img").hover(function(e) {
var s1 = "<img src=";
var s2 = " width='110px' height='120px' />";
var srcval = s1.concat($(this).attr('src'), s2);
$.post("PHP_AJAX.php", {
src: srcval
}, function(data1) {
$('#info').css({
top: e.clientY,
left: e.clientX,
backgroundColor: 'yellow'
}).fadeIn().html(data1);
});
}, function() {
$('#info').fadeOut();
});
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="PHP_AJAX.js"></script>
<style>
#info {color:black; border:5px blue solid; width:150px; height:100px;display:none;position:absolute;}
</style>
</head>
<body>
<p id='bar'>Please enter name to view image! </p>
<p id='info'>info</p>
<form>
<p>Name : <input type='text' name='name'id ='name'/></p>
</form>
<button id='view' name ='view'>View</button>
</body>
</html>class Person
{
// some properties
private $name;
private $occupation;
private $image;
// constructor
public function __construct($nameval, $occuval, $imgval)
{
$this->name = $nameval;
$this->occupation = $occuval;
$this->image = "<img src=" . $imgval . " width='110px' height='120px' />";
}
// get name property
public function getname()
{
return $this->name;
}
// get occupation property
public function getoccupation()
{
return $this->occupation;
}
// get image property
public function getimage()
{
return $this->image;
}
}
$obj1 = new Person("Picasso", "Painter", "pi1.jpg");
$obj2 = new Person("Ronaldo", "Football Player", "ronaldo.jpg");
$obj3 = new Person("Picasso", "Teacher", "pi2.jpg");
$obj4 = new Person("Madonna", "Singer", "madonna.jpg");
// storing objects in an array
$arr = array($obj1, $obj2, $obj3, $obj4);
$count = 0;
for ($i = 0; $i < 4; $i++) {
// if name already exist
if ($arr[$i]->getname() == $_POST['name']) {
echo "<p>Image of " . $arr[$i]->getname() . "</p>";
echo "<p>" . $arr[$i]->getimage() . "</p>";
$count++;
}
if ($arr[$i]->getimage() == $_POST['src']) {
echo "<p>Name: " . $arr[$i]->getname() . "</p>";
echo "<p> Occupation:" . $arr[$i]->getoccupation() . "</p>";
$count++;
}
}
// if name doesn't exist
if ($count == 0) {
echo "<h3> NOT FOUND! </h3>";
}