I have 2 input fields
- Student Name Input Field
- Group Name Input Field
I have implemented 2 different ajax logic to fetch list of students and groups for autocomplete in textboxes separately in different tag.
But when I click one value from any autocomplete value either student list or group list, both input fields are being filled up with selected value
Image :
Group List
Image:
Both fields are filling up
Code for fetch Student (JavaScript) :
<script>
$(document).ready(function()
{
$("#studentname").keyup(function()
{
var studentName = $(this).val();
if(studentName != '')
{
$.ajax({
url: "SearchStudent.php",
method: "POST",
data:{studentName:studentName},
success: function(data)
{
$('#students').fadeIn();
$('#students').html(data);
}
});
}
else
{
$('#students').fadeOut();
$('#students').html("");
}
});
$(document).on('click','li',function()
{
$('#studentname').val($(this).text());
$('#students').fadeOut();
});
});
</script>
Code for Fetch Group (JavaScript):
<script>
$(document).ready(function()
{
$("#groupname").keyup(function()
{
var groupName = $(this).val();
if(groupName != '')
{
$.ajax({
url: "SearchGroup.php",
method: "POST",
data:{groupName:groupName},
success: function(Groupdata)
{
$('#groups').fadeIn();
$('#groups').html(Groupdata);
}
});
}
else
{
$('#groups').fadeOut();
$('#groups').html("");
}
});
$(document).on('click','li',function()
{
$('#groupname').val($(this).text());
$('#groups').fadeOut();
});
});
</script>
PHP Code (SearchStudent.php):
<?php
session_start();
require_once "../../config/connection.php";
if(isset($_SESSION['admin']) && $_POST['studentName'])
{
$StudentName = $_POST['studentName'];
$output = '';
$searchStudent = "SELECT StudentName FROM student_details WHERE StudentName LIKE '%$StudentName%' LIMIT 10";
$searchStudentFire = mysqli_query($conn, $searchStudent);
$output = "<ul style='list-style-type: none;'>";
if(mysqli_num_rows($searchStudentFire) > 0)
{
while($StudentList = mysqli_fetch_assoc($searchStudentFire))
{
$output.= "<li style='font-weight:bold; border: 1px; padding: 10px; box-shadow: 5px 10px 18px #888888;'>".$StudentList['StudentName']."</li>";
}
}
else
{
$output.= "<li>No Student Found</li>";
}
$output .= "</ul>";
echo $output;
}
else
{
echo "Unautorizarion Error !!";
}
?>
PHP Code (SearchGroup.php):
<?php
session_start();
require_once "../../config/connection.php";
if(isset($_SESSION['admin']) && $_POST['groupName'])
{
$GroupName = $_POST['groupName'];
$output = '';
$searchGroup = "SELECT GroupName FROM groups WHERE GroupName LIKE '%$GroupName%' LIMIT 10";
$searchGroupFire = mysqli_query($conn, $searchGroup);
$output = "<ul style='list-style-type: none;'>";
if(mysqli_num_rows($searchGroupFire) > 0)
{
while($GroupList = mysqli_fetch_assoc($searchGroupFire))
{
$output.= "<li style='font-weight:bold; border: 1px; padding: 10px; box-shadow: 5px 10px 18px #888888;'>".$GroupList['GroupName']."</li>";
}
}
else
{
$output.= "<li>No Group Found</li>";
}
$output .= "</ul>";
echo $output;
}
else
{
echo "Unautorizarion Error !!";
}
?>
Input Fields & Autocomplete area :
<input autocomplete="off" class="input--style-5" type="text" name="studentname" id="studentname"> <!--Student Field-->
<div style="" id="students" name="students"></div> <!--Auto Complete Area Div-->
<input autocomplete="off" class="input--style-5" type="text" id="groupname" name="groupname"><!--Group Field-->
<div id="groups" name="groups"></div><!--Autocomplete area-->
2
Answers
The following two blocks are your problem, they both respond to a click on any
li
You need to adjust your selectors to target the respective lists as follows:
Or like this:
You selectors are not specific enough in your “on” functions. Try:
and:
instead. Hope this helps. Cheers.