JQuery POST to get keyup data

Question

What i want to do

When writing to a text field, I want the <div class="result"> populated with PHP echoing.

But that will not work!

Jquery

 $(document).ready(function() { var search = $("#search"); if (search.val() !== '') { search.keyup(function() { $.post("index.php", { search : search.val()}, function(data) { $(".result").html(data); }); }); } }); 

Php

  if (isset($_POST['search'])) { echo 'hello'; } 

HTML

 <input type="text" name="search" id="search"/> <br /> <div class="result"></div> 

Problem

When filling in the input, nothing happens, and this meant POST of the entered data when the keyboard was activated (when entering a new character / or deleting.

What hinders the work? I am new to jQuery.

Thanks.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

Answer 1

It is not right.

 if (search.val() !== '') { 

The above line should be

 if (search.val() != '') { 

EDIT:

Then wrap the if condition inside the keyup function.

 $(document).ready(function() { var search = $("#search"); search.keyup(function() { if (search.val() != '') { $.post("getInputs.php", { search : search.val()}, function(data) { $(".result").html(data); }); } }); }); 

Answer 2

When I encounter situations like this, I just start parsing the problem in half to see where its error is. Here are a few things I would like to try.

First, in your jQuery, add some output to the console:

 if (search.val() !== '') { console.log("I am not empty so I should go to index.php"); search.keyup(function() { $.post("index.php", { search : search.val()}, function(data) { $(".result").html(data); }); }); } else { console.log("search val was empty"); } 

Of course, you can always check your browser network profiler to see if he made a POST to this resource. This will tell you if there is a problem in your search.val test.

Then, if you want to debug the PHP side, you can remove the isset test and just return “hello”. This will tell you if there is a problem with your POST variables or checks.

Finally, you can print the result of the data to make sure that something is returned at all. This will fix any problems with $(".result").html() :

 $.post("index.php", { search : search.val()}, function(data) { console.log(data); $(".result").html(data); }); 

If none of these functions work, maybe you can just switch to how you bind to keyup in the first place:

 $(document).ready(function() { $("#search").keyup(function() { if ($(this).val() !== '') { $.post("index.php", { search : $(this).val()}, function(data) { $(".result").html(data); }); }); } }); 

Answer 3

 $(document).ready(function() { var search = $("#search"); }); 

This fire only in the finished document, but not in keyup, means in var $ ("# search"). val () will be empty.

Change your code to fix the inpute value for each keystroke.

 $(document).ready(function() { search.keyup(function() { var value = $("#search").val(); if(value!="") { $.post("index.php", { search : value}, function(data) { $(".result").html(data); }); } }); }); 

Answer 4

Your logic is wrong. You install the keyup event handler only if your #search has text in it. Unfortunately, when this script runs on a finished document, #search does not have a NO value, so your keyup handler will never be installed, so it never fires.

Answer 5

I rewrote part of your logic and was able to make it work. One of them is how you check that you have value. Instead of comparing strings, I check the length. In addition, instead of attaching the event to a field, I bind the event to the document and configure it. Try:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <input type="text" name="search" id="search"/> <br /> <div class="result"></div> <script> $(document).ready(function() { $(document).on('keyup', 'input#search', function() { if($(this).val().length > 0) { $.post('index.php', {"search":$(this).val()}, function(data) { $('div.result').html(data); }); } }); }); </script> 

Answer 6

 // when the html is loaded $(document).ready(function() { // find an element with the id 'search' var search = $("#search"); // if this element value is NOT an empty string -- oh look, it is! if (search.val() !== '') { // well, going to skip all this here then search.keyup(function() { // don't care $.post("index.php", { search : search.val()}, function(data) { // don't care $(".result").html(data); // don't care }); }); } // YAAAAY! All done! }); 

Answer 7

There is really nothing wrong with the code. I tried my code myself. Only problem was that you called keyup function conditionally. Your Javascript code should look like this:

 $(document).ready(function() { var search = $("#search"); search.keyup(function() { if (search.val() != '') { $.post("index.php", { search : search.val()}, function(data) { $(".result").html(data); }); } }); }); 

Here the condition should be inside the keyup function.