How do I get inputs entered text to a json request?

Question

I'm trying to get the text typed inside of an input element to be usable for a JSON request.

$("document").ready(function() {
  var search = $('#input').val()
  var api =
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" +
    search +
    "&namespace=0&limit=10&profile=fuzzy&suggest=1";

  //   Button function
  $(".btn").click(function() {
    function listClear() {
      $("ul").empty();
    }
    listClear();
    $.getJSON(api, function(data) {
      function listCreate() {
        var arr = data[1];
        for (i = 0; i < arr.length; i++) {
          $("ul").append("<li>" + arr[i] + "</li>");
        }
      }

      listCreate();
    });
  });
});

and my element looks like this

<input type="search" id="input" class="form-control" placeholder=". . .">

When I do it like this, the console shows an error saying that the length of undefined cannot be found. I get that this means my current value retrieval method is not working. Any ideas?

ps. I'm also doing this coding on codepen (https://codepen.io/WatchConnorCode/pen/JybGVJ?editors=1010) I don't know if that would cause issues?

edit: I had it at val previously and forgot to change it back. It still is not working as intended.

You are trying to get your input value at dom ready, which at that point no one has entered anything into the box yet. You should be doing it in the button click handler. Also if you had actually checked the response you would have seen that the api was giving back an error, ie check `data.error`, saying you didnt provide a proper search parameter — Patrick Evans, Aug 08 '17 at 05:17
Also it should be $('#input').val(). Not $('#input').text() to read content of a textbox. — gjijo, Aug 08 '17 at 05:21
As @PatrickEvans said, you have to move var search = $('#input').val() & var api = .... to inside btn click function — gjijo, Aug 08 '17 at 05:26

score 1 · Answer 1 · answered Aug 08 '17 at 05:23

You're trying to retrieve the text of the input using text() but you should be using val() instead.

See How do I get the value of text input field using JavaScript? for even more details on the subject.

Moreover, you need to move the code that creates the api value inside your click function, as you're trying to get the text that exists in the input at the time of the button click. As is, you're evaluating it once, when the DOM finishes loading.

score 0 · Accepted Answer · answered Aug 08 '17 at 05:25

First use .val() instead of .text().

Second move the definition of search and api inside the on click function

$("document").ready(function() {

  //   Button function
  $(".btn").click(function() {
  var search = $('#input').val()
  var api =
    "https://en.wikipedia.org/w/api.php?callback=?&action=opensearch&format=json&search=" +
    search +
    "&namespace=0&limit=10&profile=fuzzy&suggest=1";
    function listClear() {
      $("ul").empty();
    }
    listClear();
    $.getJSON(api, function(data) {
      function listCreate() {
        var arr = data[1];
        for (i = 0; i < arr.length; i++) {
          $("ul").append("<li>" + arr[i] + "</li>");
        }
      }

      listCreate();
    });
  });
});

https://codepen.io/anon/pen/eEvWLz?editors=1010

How do I get inputs entered text to a json request?

2 Answers2