HTML submit text used for Javascript query with API

Question

For a project, I am trying to make a HTML form that when a movie is searched it can access the Rotten Tomatoes API and queries the user's submitted text and returns with the movie.

The javascript* code from Rotten Tomatoes was provided

<script>
    var apikey = "[apikey]";
    var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

    // construct the uri with our apikey
    var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
    var query = "Gone With The Wind";


    $(document).ready(function() {

      // send off the query
      $.ajax({
        url: moviesSearchUrl + '&q=' + encodeURI(query),
        dataType: "jsonp",
        success: searchCallback
      });
    });

    // callback for when we get back the results
    function searchCallback(data) {
     $(document.body).append('Found ' + data.total + ' results for ' + query);
     var movies = data.movies;
     $.each(movies, function(index, movie) {
       $(document.body).append('<h1>' + movie.title + '</h1>');
       $(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
     });
    }

</script>

I have an API key, my question is how would I be able to create a form that would change out the value for var query = "Gone With The Wind"; as the user submitted an input search with a HTML form such as this:

<input id="search">
<input type="submit" value="Submit">

Also would this be able to lead to another HTML page once searched?

This is Javascript code not Java.

Taylor Caldwell
– Taylor Caldwell

2015-09-16 05:24:16 +00:00
Commented Sep 16, 2015 at 5:24 — Taylor Caldwell
– Taylor Caldwell, Commented Sep 16, 2015 at 5:24

Carsten Massmann · Accepted Answer · 2015-09-16 12:50:32Z

1

complete rewrite ...

You should wrap the supplied (and modified) code in a function which you can then call through an event binding, like a submit event on your input form.

Below you will find a complete and working example of how you could do it. I replaced the given URL with a publicly available one from spotify. As a consequence I had to modify the callback function a little bit and also the dataType paramater in the $.ajax() argument object was changed to 'json' (instead of originally: 'jsonp').

At the end of the lookformovie() function you will find return false;. This prevents the submit event from actually happening, so the user stays on the same page.

function lookformovie(ev){ // ev is supplied by the triggered event
  console.log('go, look!');
  // the following WOULD be important, if this function was triggered
  // by a click on a form element and you wanted to avoid the event to
  // "bubble up" to higher element layers like the form itself. 
  // In this particular example it is superfluous
  ev.stopPropagation();

  var apikey = "[apikey]";
  var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";

  // construct the uri with our apikey
  var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;

  // --- start of spotify-fix ---
  moviesSearchUrl="https://api.spotify.com/v1/search?type=track";
  // --- end of spotify-fix -----

  // the following gets the contents of your changed input field:
  var query=$('#search').val();

  $.ajax({
    url: moviesSearchUrl + '&q=' + encodeURI(query),
    dataType: "json", // spotify-fix, was: "jsonp"
    success: searchCallback
  });
  return false; // this prevents the submit event from leaving or reloading the page!
}

// modified callback (spotify-fix!!):
function searchCallback(data){
 console.log('callback here');
 $('#out').html(data.tracks.items.map(
   function(t){ return t.name;}).join('<br>\n'));
}

// original movie callback for Rotten Tomatoes:
function searchCallback_inactive(data) {var str='';
  str+='Found ' + data.total + ' results.';
  var movies = data.movies;
  $.each(movies, function(index, movie) {
    str+='<h1>' + movie.title + '</h1>';
    str+='<img src="' + movie.posters.thumbnail + '" />';
  });
  $('#out').html(str);
}


$(function(){
  $('form').on('submit',lookformovie);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="search" value="james brown">
<input type="submit" value="get tracks">
</form>
<div id="out"></div>

You might have noticed that I placed several console.log() statements at various places into the code. This helped me during debugging to see which part of the functionality actually worked, and where something got stuck. To see the output you need to have your developer console opened of course.

edited Sep 16, 2015 at 12:50

answered Sep 16, 2015 at 6:18

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ptrm Over a year ago

Thank you for your assistance. How does that last jquery line fit into the script exactly? The way I currently have it configured my input doesn't seem to get recognized when I press submit and nothing happens.

ptrm Over a year ago

I very much appreciate all the changes you've made and help you've provided. The search function updates the page but only provides a "?" on the end of my url rather than the search results. I wanted to ask again so I'm clear on it, where would the new " $(function(){ $('form').on('submit',lookformovie); }) " sit, I think that might be interrupting my progress.

Carsten Massmann Over a year ago

The event-binding has to happen after the page is fully loaded, so typically in a $function(){ ... }) section somewhere in your JavaScript part. See my updated post for a fully working example.

xxxmatko · Accepted Answer · 2015-09-16 07:02:50Z

0

You can construct form, with input element named "q", then handle form submit event.

<form action="http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=API_KEY" method="get">
   <input id="search" name="q">
   <input type="submit" value="Submit">
</form>

answered Sep 16, 2015 at 7:02

xxxmatko

4,1522 gold badges20 silver badges24 bronze badges

Collectives™ on Stack Overflow

HTML submit text used for Javascript query with API

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related