Getting my Search Form to Trigger JQuery Ajax request

Question

I've set up an Ajax request to the Ebay API using Jquery, which works while I have a search term/keyword hardcoded, but I cannot figure out how to write the code to make my (bootstrap) button trigger the Ajax request using the search form input. I've tried various things to no avail. I'm completely new to this and this is my first time making an Ajax request and using JQuery so hopefully this makes sense.

Jquery:

$(document).ready(function() {
  url = "http://svcs.ebay.com/services/search/FindingService/v1";
  url += "?OPERATION-NAME=findCompletedItems";
  url += "&SERVICE-VERSION=1.13.0";
  url += "&SERVICE-NAME=FindingService";
  url += "&SECURITY-APPNAME=deleted for privacy";
  url += "&GLOBAL-ID=EBAY-US";
  url += "&RESPONSE-DATA-FORMAT=JSON";
  url += "&REST-PAYLOAD";
  url += "&paginationInput.pageNumber=1";
  url += "&paginationInput.entriesPerPage=10";
  url += "&keywords=rare soul 45";  //This would get deleted?
  url += "&sortOrder=StartTimeNewest";

    $.ajax({
      type: "GET",
      url: url,
      dataType: "jsonp",
      success: function(res){
        console.log(res);
        var items = res.findCompletedItemsResponse[0].searchResult[0].item;
        var ins = "";
        for (var i = 0; i < items.length; i++){
          ins += "<div>";
          ins += "<img src='" + items[i].galleryURL + "  '/>";
          ins += "  " + items[i].title + " - ";
          ins += "Sold for $" + items[i].sellingStatus[0].currentPrice[0].__value__;
          ins += "</div><br />";
        };
        $('.results').html(ins);
      }
    });
});

HTML:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 1

I'm a bit surprised you managed to get an ajax request running but you struggle with registering a click event handler. :) but here we go...

$('form[role="search"]').submit(function(ev)  {
  ev.preventDefault();
  // get the input value with:
  var searchstring = $('input[type="text"]', this).val();
  // your ajax request, using the variable above
  var url = "http://svcs.ebay.com/services/search/FindingService/v1";
  url += "?OPERATION-NAME=findCompletedItems";
  url += "&SERVICE-VERSION=1.13.0";
  url += "&SERVICE-NAME=FindingService";
  url += "&SECURITY-APPNAME=deleted for privacy";
  url += "&GLOBAL-ID=EBAY-US";
  url += "&RESPONSE-DATA-FORMAT=JSON";
  url += "&REST-PAYLOAD";
  url += "&paginationInput.pageNumber=1";
  url += "&paginationInput.entriesPerPage=10";
  url += "&keywords=" + searchstring;
  url += "&sortOrder=StartTimeNewest";

  $.ajax({
    type: "GET",
    url: url,
    dataType: "jsonp",
    success: function(res){
      console.log(res);
      var items = res.findCompletedItemsResponse[0].searchResult[0].item;
      var ins = "";
      for (var i = 0; i < items.length; i++){
        ins += "<div>";
        ins += "<img src='" + items[i].galleryURL + "  '/>";
        ins += "  " + items[i].title + " - ";
        ins += "Sold for $" + items[i].sellingStatus[0].currentPrice[0].__value__;
        ins += "</div><br />";
      };
      $('.results').html(ins);
    }
  });
}); 

Answer 2

It looks like you are making that ajax call upon document ready which is not really what you want. You want to make that call upon a button press event. So I would do this.

1. Put that ajax call into a function that you can call
2. Give the button an id
3. On document ready, use jquery to attach an event handler to the element with the id in step 2 above that triggers a call to your function mentioned in step 1 above.

Then, don't forget to extract the value in the field from the event and place it into the called ajax function as a parameter.

Answer 3

Given your current HTML, you can call a click event on your submit button like this...

$('button[type="submit"]).on('click', function(event) {
    /*
      since the button is of type "submit",
      prevent the default behavior. Which,
      in this case, is to submit the form.
    */
        event.preventDefault();
        //Check your browser's console to see what this is
        console.dir(event);
        //insert AJAX code here
});

This code uses the jQuery .on() method to capture the given event, 'click', on a given element $('button[type="submit"]'). Once this event has been captured, you can access it as event, or name of your choice, within the function.

This event object contains information regarding the event itself. It can be quite daunting at first, but I encourage you to look through a console.dir(event); call. More specifically, e.currentTarget/e.target, and view to get a sense of what is going on. From there you can look into what the difference is between some things that seem the same and get as familiar with it as you'd like.