How to store text box value to be passed to getJson request as query parameter

Question

I need to be able to store the text value of a search box term, which can be used as a query parameter in a getJson request. I'm appending the search term to the end of the url the user is taken to after hitting the enter key, but the issue is that on the location replacement, it shows up as an error because the url for the page is /faq/search-results/.

$(".faq-search").keyup(function(e){
   if(e.which == 13) {
        window.location.replace("/faq/search-results/" + $(".faq-search").text());
   }
});

Once the user has been sent to the search results page, I have a script which, if the user is on that url, is supposed to grab the search term from the pathname in the url, and submit it as a query parameter to the getJson request:

    if(window.location.pathname == "/faq/search-results/"){
    $("document").ready(function(e) {
    var url = window.location.pathname;
    var exp = url.split(/^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/);
    var question = exp[5].split("/")[3];
    $.getJSON("//search.url-to-search.com?q=" + question + "&results_type=faq", {
    },
        //Get results and make 'em look good
        function(data) {
            console.log(data);
                $.each(data.data, function(i, data) {
                    if(data.type === "FAQ"){
                     $(".faq-results").append("<li class='result-item'><a href=\"" + data.permalink + "\"><h3>" + data.title + "</h3><p class=\"content\">" + data.text + "</p></a><p class=\"category\">" + data.type + "</p></li>");
                    }
            });
         });
});     
}

I believe the issue is that it won't fire off the request because its looking for only /faq/search-results/. I think I need a way to store the search term as a variable and pass it as a query parameter, but not sure how to accomplish this, as I believe it would make the variable out of scope.

MartinWebb MartinWebb · Accepted Answer · 2017-04-16T02:17:06

A couple of things are wrong in your code:

first to collect the input value use .val() note text().

Secondly you are not passing the input value as a query string you are adding it to the url path /helloWorld. I think it is better to add as a query string ?q=helloworld.

I have therefore adjusted your code, removed your code to extract the text from the path and implemented a function to extract a named query param, this function is called getParameterByName.

The code below should be pretty much self explanatory.

$("document").ready(function(e) {
  // 
  // Collects the input param as passes it as a query string note
  // ?q= our string
  //
  $(".faq-search").keyup(function(e) {
    if (e.which == 13) {
      window.location.assign("file:///C:/Users/spydre/Desktop/text.html?q=" + $(".faq-search").val());
    }
  });

  // snippet gets a query param from url 
  function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

  // collect any query string param whos name is q
  var question = getParameterByName("q");
  if (question) {

    // pass question to our getJson
    $.getJSON("//search.url-to-search.com?q=" + question + "&results_type=faq", {},
      //Get results and make 'em look good 
      function(data) {
        console.log(data);
        $.each(data.data, function(i, data) {
          if (data.type === "FAQ") {
            $(".faq-results").append("<li class='result-item'><a href=\"" + data.permalink + "\"><h3>" + data.title + "</h3><p class=\"content\">" + data.text + "</p></a><p class=\"category\">" + data.type + "</p></li>");
          }
        });
      });



  } //if question 

})

How to store text box value to be passed to getJson request as query parameter

1 Answers