Why is this javascript/jquery not capturing user input?

Question

I can't figure out why the user input from the search-field input box isn't being captured when I go to make a query. When I console log out queryURL the query from the input box is absent. See my code below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    <title>Document</title>

</head>

<body>
    <div class="container">
        <h1>gifTastic!</h1>
        <label for="search-field">Find a TV Show: </label>
        <input type="text" id="search-field">
        <input id="find-giphy" type="submit" value="giphy Search">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var baseURL = "http://api.giphy.com/v1/gifs/search?q="
        var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
        var input = $("#search-field").val();
        
        var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";

        $("#find-giphy").on("click", function () {
            $.ajax({
                url: queryURL,
                method: "GET"
            }).then(function (response) {
                console.log(response);
                console.log(queryURL);
            })
        })
    </script>
</body>

</html>

Mamun · Accepted Answer · 2019-06-23 04:17:23Z

1

The issue is, you are taking value from the input on page load and that value is empty.

You should take the value of the input field inside the click handler function like the following way:

var baseURL = "http://api.giphy.com/v1/gifs/search?q="
var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
$("#find-giphy").on("click", function () {
  var input = $("#search-field").val();
  var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";
  $.ajax({
      url: queryURL,
      method: "GET"
  }).then(function (response) {
      console.log(response);
      console.log(queryURL);
  })
})

<div class="container">
    <h1>gifTastic!</h1>
    <label for="search-field">Find a TV Show: </label>
    <input type="text" id="search-field">
    <input id="find-giphy" type="submit" value="giphy Search">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

edited Jun 23, 2019 at 4:17

answered Jun 23, 2019 at 4:11

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

Comments

msg · Accepted Answer · 2019-06-23 04:12:13Z

You have to build the query when you actually click the button so you can grab the value.

var baseURL = "http://api.giphy.com/v1/gifs/search?q="
var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"

$("#find-giphy").on("click", function() {
  var input = $("#search-field").val();
  var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";
  $.ajax({
    url: queryURL,
    method: "GET"
  }).then(function(response) {
    console.log(response);
    console.log(queryURL);
  })
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <h1>gifTastic!</h1>
  <label for="search-field">Find a TV Show: </label>
  <input type="text" id="search-field">
  <input id="find-giphy" type="submit" value="giphy Search">
</div>

Collectives™ on Stack Overflow

Why is this javascript/jquery not capturing user input?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related