title: Displaying search result from the form using jquery and ajax
body: <p>I have simple form and script which takes input data and calls rotten tomatoes API and displays results. If I don't use <code>$('#submitid').click(function()</code> and var query is hard coded results are displayed fine. If I just use <code>$('#submitid').click(function() {})</code> in conjunction with alert,   form data is displayed. However in current state nothing is displayed. Any help is appreciated.</p>
  
  <pre><code>&lt;form action=""&gt;
      &lt;input  type="text" id='myid' /&gt;
      &lt;input value="Search" type="submit" id="submitid" /&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
      $('#submitid').click(function () {
          var query = $('#myid').val();
          var apikey = "my_api_key_sample";
          var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
  
          // construct the uri with our apikey
          var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
  
          $(document).ready(function () {
              // send off the query
              $.ajax({
                  url: moviesSearchUrl + '&amp;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) {
                  var mydata += //code for appending my data 
              });
  
              //displaying mydata on div with id result
              $('#result').html(mydata);
          }
      })
      })
  &lt;/script&gt;
  </code></pre>