Trying to retrieve information from the OMDb API

    <form>
      <label for="search">Type a search term</label>
      <input type="search" name="search" id="search">
      <input type="submit" value="Search" id="submit">
    </form>

    <div id="details">

    </div>

$('form').submit(function (e) {
    e.preventDefault();

    var searchInput = $('#search');
    var searchTerm = searchInput.val();
    var submitButton = $('#submit');

    submitButton.prop('disabled', true).val("Loading");
    searchInput.prop('disabled', true);

     // the AJAX part
     var movieAPI = "http://www.omdbapi.com/?";
     var movieOptions = {
         s: searchTerm
     };
     function displayMovies(data) {
         if($.isEmptyObject(data)) {
             $('#details').html('<p>' + searchTerm + 'is not a valid search term! </p>');
             submitButton.prop('disabled', false).val("Search");
       searchInput.prop('disabled', false);
         } else {
             var listHTML = '<ul>';
             $.each(data.search, function(i,movie) {
                 listHTML += '<p>' + movie.Title + '</p>'
             }); // end each
             listHTML += '</ul>';
             $('#details').html(listHTML);
             submitButton.prop('disabled', false).val("Search");
       searchInput.prop('disabled', false);
         }
     }
     $.getJSON(movieAPI, movieOptions, displayMovies);
 }); // end click