Unable to get the value of the clicked button which is getting pasted after ajax search on the php page

Question

I am stumbled upon this problem for 3 days and tried every sort of possible code to resolve it.

Here the search results from ajax call are printed

<input type="text" name="search" onkeyup="showHint(this.value)" placeholder="Search..">
<hr/>
<span id="results"></span>

Here is the code for ajax call(learned and implemented from w3schools)

<script>
    function showHint(str) {
        if (str.length == 0 || str == " ") {
            document.getElementById("txtHint").innnerHTML = "";
            return;
        }
        else{
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function(){
                if(this.readyState == 4 && this.status == 200){
                    document.getElementById("results").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET", "instant_search.php?q="+ str, true);
            xmlhttp.send();
        }
    }
//What I am trying to do is, get the value of the button clicked by user and print it's value in idv tag or span tag or anywhere in html
    $("button").on("click",function(){
        var id = this.id;
        $("#checking").text(id);
    });
</script>

This is where I am trying to print <br><div id="checking"></div>

And here is the php file where the search is happening

    <?php
    session_start();
    $temp_arr = $_SESSION["temp_search"];
    $q = $_REQUEST["q"];
    $hint = "";
$i=0;
    if ($q !== "") {
        $q = strtolower($q);
        $len=strlen($q);
        foreach($temp_arr as $name) {
            if (stristr($q, substr($name, 0, $len))) {
                if ($hint === "") {
                    $hint = $name;
                } else {
                    $hint .= "<button id='<?php echo $i;?>' onclick='btnClick()'>$name</button>";
                    $i++;
                }
            }
        }
    }
    echo $hint === "" ? "no sugesstion" : $hint;
?>

I sort of have the id but I am unable to understand how to do this. I might be doing some silly mistake here so please tell how to do this correctly.

I am a newbie with jquery so explain it in simple terms. :)

The basic idea is to replace `$("button").on("click",function(){` with `$(document).on("click", "button", function() {` — , Aug 21 '17 at 12:31
Also, don't use w3schools. And since you're already using jQuery, I suggest using `$.ajax()` and so on. — , Aug 21 '17 at 12:33
Also I already tried `$(this).attr('id')` but it did not work — Naman Khandelwal, Aug 21 '17 at 12:33
ok but I just started doing this and not good with it, so @ChrisG can you tell me how to do this with $.ajax(). Or can you tell me where I can learn to do it with it. — Naman Khandelwal, Aug 21 '17 at 12:37
OK @ChrisG Sir, I tried what you told me. And it worked. Thanks a lot for the help — Naman Khandelwal, Aug 21 '17 at 12:40
You need to google first. Always google first. http://api.jquery.com/jquery.ajax/ — , Aug 21 '17 at 12:41
Ok Sir, just one last thing. I got the ID, what if I just want the names instead of their id's @ChrisG and get them stored in a session variable — Naman Khandelwal, Aug 21 '17 at 12:43

Unable to get the value of the clicked button which is getting pasted after ajax search on the php page

0 Answers0