Live search results with JQuery Ajax

+1 Steven the awesome · June 18, 2015
So I have this form in HTML with a search input field in it. And when you click on the submit button. It goes to another page, were it shows all the results. But I want to get all the results in a div underneath it. How can I do this with JQuery ajax I have never really worked with ajax. 



<form action="object/zoeken.php" method="POST">

          <input type="search" name="zoeken" placeholder="Zoek naar personen" class="zoeken" >
          <input type="submit" name="versturen" id="zoeken" value="zoeken" class="zoeken1"></button>

</form>
   
   


Thanks in advance.

Post a Reply

Replies

Oldest  Newest  Rating
0 saer siis · June 19, 2015
!1 means false

http://api.jquery.com/jquery.ajax/ Refer to the following url to get the meaning of these options and all other options you could use !! . Glad you asked
0 Steven the awesome · June 19, 2015
He thanks man, I really appreciate that did this for me. One question though what do you mean with these three functions?

cache: !1,
contentType: !1,
processData: !1,
0 saer siis · June 18, 2015
if u want to use jquery then i dont think you also need a form just use the following code


$(document).on("click",".zoeken1",function(){

var zoeken=$('.zoeken').val();//Store the search value
$.ajax({
            url:"url of your form =>object/zoeken.php",
            data: {zoeken:zoeken},
            cache: !1,
            contentType: !1,
            processData: !1,
            type: "POST",
            success: function(data) 
            {



           $('.name of your div').html(data);//data is the returned data from the object/zoeken.php file

                 }

                });


});
  • 1

Javascript

107,163 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators