简体   繁体   中英

JQuery Form Submission API AJAX

Does anybody have any idea why this is not allowing the form to submit? I'm attempting to use Rotten Tomatoes API with a user search function.

FORM IN PHP PAGE

<form name="myform" action="" method="GET"><h3>Search for a movie here:</h3><br> 
    <input type="text" id="inputbox" value="">&nbsp;
    <input type="submit" name="submit" value="Go!">

JAVASCRIPT

$('form[name="myform"]').submit(function() {
    $('#films table').empty(); //removes previous search results before adding the new ones.

    var apikey = "frceg2d5djxezaedgm3qq94h";
    var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
    var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
    var query = form.inputbox.value;  //uses the value from the input box as the query search



      // sends the query
      $.ajax({
        url: moviesSearchUrl + '&q=' + encodeURI(query),
        dataType: "jsonp",
        success: searchCallback // if successful, run searchCallback function
      });


    // receives the results

    function searchCallback(data) {
     $('#films table').append('Found ' + data.total + ' results for ' + query);
     var movies = data.movies;
     $.each(movies, function(index, movie) {
        $('#films table').append('<tr><td width="70" rowspan="2"><a href="' + movie.links.alternate +
        '" title="Click here to view film information for ' + movie.title + '."><img class="ajaximage" src="'
        + movie.posters.thumbnail + '" /></a></td><td class="ajaxfilmlisttitle"><h3><a href="' + movie.links.alternate +
        '" title="Click here to view film information for ' + movie.title + '.">' + movie.title + '</a></h3>Release year: '
        + movie.year + '</td></tr><tr><td class="ajaxfilmlistinfo">Audience Score: ' + movie.ratings.audience_score +
        '%<br>' + 'Cinema Release Date: ' + movie.release_dates.theater +
        '<br>Runtime: ' + movie.runtime + ' minutes</td></tr>');
    });
     };
    });

I tested with this code and it works:

<form name="myform" action="" method="GET">
    <h3>Search for a movie here:</h3>
    <input type="text" id="inputbox" value="" />&nbsp;
    <input type="submit" name="submit" value="Go!" />
</form>

<script>

    $(function(){

        $('form[name="myform"]').on('submit', function(e) {
            e.preventDefault();

            $('#films table').empty(); //removes previous search results before adding the new ones.

            var apikey = "frceg2d5djxezaedgm3qq94h";
            var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
            var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
            var query = $('#inputbox').val(); //uses the value from the input box as the query search

            // sends the query
            $.ajax({
                url: moviesSearchUrl + '&q=' + encodeURI(query),
                dataType: "jsonp",
                success: searchCallback // if successful, run searchCallback function
            });

            // receives the results
            function searchCallback(data) {
                $('#films table').append('Found ' + data.total + ' results for ' + query);
                var movies = data.movies;
                $.each(movies, function(index, movie) {
                    $('#films table').append('<tr><td width="70" rowspan="2"><a href="' + movie.links.alternate +
                    '" title="Click here to view film information for ' + movie.title + '."><img class="ajaximage" src="'
                    + movie.posters.thumbnail + '" /></a></td><td class="ajaxfilmlisttitle"><h3><a href="' + movie.links.alternate +
                    '" title="Click here to view film information for ' + movie.title + '.">' + movie.title + '</a></h3>Release year: '
                    + movie.year + '</td></tr><tr><td class="ajaxfilmlistinfo">Audience Score: ' + movie.ratings.audience_score +
                    '%<br>' + 'Cinema Release Date: ' + movie.release_dates.theater +
                    '<br>Runtime: ' + movie.runtime + ' minutes</td></tr>');
                });
            };
        });
    });
</script>

There were a couple of problems:

  • The form.inputbox.value did not work, change it to $('#inputbox').val()
  • Add e.preventDefault() to prevent the from from being submitted
  • There was a missing });
  • Change $('form[name="myform"]').submit(function() { to $('form[name="myform"]').on('submit', function(e) {

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM