Q:

User input does not get captured/stored

I am trying to figure out why this onclick function in my JavaScript and Jquery code are not working.
I am referring my "userInput" in the JavaScript code and storing it in a variable called "userDate". For some reason, the user input does not get captured/stored.
This is my HTML:

<form role="form">
          <p> Enter the date: 
          <input id="userInput" type="text" placeholder="yyyy-mm-dd" autofocus required></p>
          <button id="convert" type="submit" class="btn btn-primary btn-lg" padding="center">
          <span class="glyphicon glyphicon-euro"></span>
          </button>
        </form>

This is my JS code:

$(function () {

  // cache the DOM element
  var $currencies = $("#currencies");
  var $userInput = $("#userInput");

  // We are listening on the 'document', 
  // for a click on an element with an ID of #convert in the HTML
  $("#convert").on("click", function() {
  var userDate = $userInput;
  // testing
  console.log(userDate);
  alert ("Handler for .click() is called.");

  // AJAX call for GET request
  $.ajax({
    type: 'GET',
    url: 'http://xxx.xx',
    success: function(currencies) {
      console.log("success func is called");
      console.log(userDate);
      $.each(currencies, function(i, currency){
        $currencies.append("<div> EUR: " + currencies.rates["EUR"] + ", date: " + currencies.date + "</div>");
      });
    },
    // error handling for my request
    error: function() {
      alert("error loading currencies");
    }
  });
});
});

A:

change
var userDate = $userInput;

to
var userDate = $userInput.val();

$userInput is a reference to the jquery object holding the input element. Using .val() returns the text value of that input element.

