Twitter Bootstrap Question posted in

Why is this javascript/jquery not capturing user input?-Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search