Send Input box value in ajax call

Question

I want to send my input box value in my ajax call.

I am trying but not work.

My Input box

 <form>
     <input type="text" onkeydown="filter()" id="searchTxt" placeholder="Filter" value="" >
 </form>

My Javascript code

function filter()   
{
        filterText = $('#searchTxt').val();  


          $( ".pagination" ).html(totalOutput);
          $.ajax({
           type: "POST",
           url: ""+baseUrl+"userList4",
                   data: { searchText: filterText},
           success: function(msg) {



              $(".paginateData").html(msg);
           }
      });
}

Here filterText = $('#searchTxt').val(); always get null

Use `onkeyup` event. http://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown — Kiran, Aug 25 '14 at 18:48

score 0 · Answer 1 · answered Aug 25 '14 at 18:51

The code to get the value is correct. So, I would say there is another issue here outside of the code you have shared. It could be jquery can't find that field. Try outputting the length to make sure jquery has actually found that text box.

var textBox = $('#searchTxt');
console.log(textBox.length);

You could also just pass 'this' to the method and not have to use jquery at all, which I would suggest.

Another issue could be that the onekeydown is getting called before the text has even reached the textbox. So at the time the value would be null. But I would assume you tested with more than one keystroke?

Send Input box value in ajax call

1 Answers1