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>
2 answers
solution1
1 ACCPTED 2019-06-23 04:11:01
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>
solution2
1 2019-06-23 04:12:13
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.