0

I cannot get my input to be echo when I input text in my search field. I do get the alert javascript but not the echo 2 to be display into the srv_search_mini_display field. Im thinking that the ajax cant access the find_Service.php

search.php

 <input id="service_search_box" class="form-control mr-sm-2" type="text" name="search" placeholder="Search Services..." oninput="searchService()">
 <div id="service_search_div" class="srv_search_mini_display d-none"></div>

<script type="application/javascript">

function searchService(){

    var srv_search = document.getElementById("service_search_box").value;

    var param = "service_search_box="+srv_search;

    if(srv_search.length > 0){

        $("#search_search_div").removeClass("d-none");

        var ajax = new XMLHttpRequest();

        ajax.onreadystatechange = function(){

            if(ajax.readyState === 4 && ajax.status === 200){

                if(ajax.responseText === ""){

                    document.getElementById("service_search_div").innerHTML = "";
                    $("#service_search_div").addClass("d-none");

                } else {

                    alert(param); document.getElementById("service_search_div").innerHTML = ajax.responseText;
                }

            }
        };

        ajax.open("POST",'find_Service.php',false);
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        ajax.send(param);

    } else{

        document.getElementById("service_search_div").innerHTML = "";
        $("#service_search_div").addClass("d-none");
    }

}
</script>

find_Service.php

 <?php

 require_once('database.php');
 $heidisql = pdo_con();

 echo 2; // does not even appear
  ?>
11
  • "echo 2; // does not even appear" Where should that appear? Commented Jan 18, 2019 at 9:09
  • inside the <div id="service_search_div" class="srv_search_mini_display d-none"></div> Commented Jan 18, 2019 at 9:14
  • 1
    document.getElementById("service_search_div").innerHTML = ajax.responseText; why this in the comment section. it should be in the next line to set the HTML. Commented Jan 18, 2019 at 9:16
  • 1
    Enable error_reporting in 'find_Service.php' and check. If you run the find_Service.php separately in browser is it echoing '2' have you checked that Commented Jan 18, 2019 at 9:58
  • 1
    Have you checked in browser console. Does it display any error related to javascript Commented Jan 18, 2019 at 10:05

1 Answer 1

1

First you have to make sure that your PHP file work, you can check it by open find_Service.php separately or like @ADyson said check it from inspect console in network tab.

Since I saw you using jQuery, I simplify your code a little bit by using jQuery's ajax and select element with $ sign.

I use fake API server to make it work here.

function searchService(){
  var srv_search = $('#service_search_box').val();
  var $srv_search_div = $('#service_search_div');

  if(srv_search.length > 0){
    $("#search_search_div").removeClass("d-none");

    $.post("https://jsonplaceholder.typicode.com/posts", //replace with "/find_Service.php"
    {
      service_search_box: srv_search,
    },
    function(data, status){
      if(status === "success" ){
        $srv_search_div.html(data.service_search_box); //replace with data
        $srv_search_div.addClass("d-none");
      }
      console.log(data);
    });

  }else{
    $srv_search_div.html("");
    $("#service_search_div").addClass("d-none");
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input id="service_search_box" class="form-control mr-sm-2" type="text" name="search" placeholder="Search Services..." oninput="searchService()">
 <div id="service_search_div" class="srv_search_mini_display d-none"></div>

Sign up to request clarification or add additional context in comments.

2 Comments

ok i manage to get the 2 appear in console, but still nothing appear in the div
if you use my code change $srv_search_div.html(data.service_search_box); to $srv_search_div.html(data);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.