Onclick Button Get from Database and Display on a Input Field Live

Ajax LIve Search - Onclick Populate Input Value

See my comment concerning avoiding SQL Injection attacks.

When the document becomes ready you are attempting to set event handler so that all <a> tags within the <div id="#vehicle-output"> tag will respond to a click event. But at that point there are no such <a> tags because you haven't done any live searches yet. Just because you then subsequently append some <a> tags to the <div> doesn't cause an event handler to automatically get attached retroactively.

You need to move the setting of the "click" handlers from the "document ready" handler to the "success" return. The other issue is the call $('#vehicle-output').css('display', 'none'); to hide the results from the PHP script when the input loses focus. The problem is that the <a> element becomes invisible before the click event can possibly be taken.

You can do one of two things:

  1. Get rid of the focusin and focusout events altogether
$(document).ready(function(){
/// Live Search ///
$("#vehicle").keyup(function(){

var query = $(this).val();
if (query !="") {
$.ajax({
url:"includes/veh-search.php",
type:"POST",
cache:false,
data:{query:query},
success:function(data){

$("#vehicle-output").html(data);
$('#vehicle-output').css('display', 'block');

/// Click to enter result ///
$("#vehicle-output a").on("click", function(){
$("#vehicle").val($(this).html());
});
}

});
}

else {
$("#vehicle-output").html("");
$('#vehicle-output').css('display', 'none');
}

});

});


  1. Set a windows timer to change the CSS display value so that you are sure that the click event occurs (just be sure that you use a large enough timer value (500 ms. should do it)
                    $("#vehicle").focusout(function(){
window.setTimeout(function() {
$('#vehicle-output').css('display', 'none');
}, 500);
});

onClick to get the ID of the clicked button

You need to send the ID as the function parameters. Do it like this:

<button id="1" onClick="reply_click(this.id)">B1</button><button id="2" onClick="reply_click(this.id)">B2</button><button id="3" onClick="reply_click(this.id)">B3</button>    <script type="text/javascript">  function reply_click(clicked_id)  {      alert(clicked_id);  }</script>

Echo JS onclick fill function AJAX not working

you can use the ` sign instead of the single and double quotation for javascript.

Here you should just update the line 16 at ajax.php file like this.

echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']." 

Complete code
ajax.php file

<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_GET['search'])) {
//Search box value assigning to $Name variable.
$Name = $_GET['search'];
//Search query.
$Query = "SELECT Name FROM search WHERE Name LIKE '$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display result.
if ($ExecQuery->num_rows > 0) {
echo "<ul>";
while ($Result = MySQLi_fetch_array($ExecQuery)) {
echo "<li onclick='fill(`".$Result['Name']."`)'>".$Result['Name']."
</li>";
}
echo "</ul>";
}
}
die();
?>

JS codes.

//Getting value from "ajax.php".
function fill(Value) {
//Assigning value to "search" div in "index.php" file.
$('#search').val(Value);
//Hiding "display" div in "index.php" file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "indexd.php" file. This function will be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
$('#display').hide();
$('#backspace').css("display", "none");
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
//Assigning empty value to "display" div in "index.php" file.
$('#backspace').css("display", "block");
}
//If name is not empty.
else {
//AJAX is called.
$.ajax({
//AJAX type is "GET".
type: "GET",
//Data will be sent to "ajax.php".
url: "ajax.php",
//Data, that will be sent to "ajax.php".
data: {
//Assigning value of "name" into "search" variable.
search: name
},
//If result found, this funtion will be called.
success: function(html) {
if (html == '<ul><li>No Result Found!</li></ul>') {
$('#no-results').css("display", "block");
}else{
//Assigning result to "display" div in "index.php" file.
$("#display").html(html).show();
}
}
});
}
});
});


Related Topics



Leave a reply



Submit