Javascript 按Enter键提交JQuery表单

我尝试过各种解决方案，但没有一种适合我的特殊情况！ 我如何使其在用户按下“回车”键时提交和搜索表单

顺便说一下，我正在使用烂番茄API和AJAX

表格

<form name="myform" action="" method="GET"><h3 class="white">Search for a movie here!:</h3><br> 
    <input type="text" id="inputbox" value="">&nbsp;
    <input type="button" id="button" value="Go!" onClick="filmlist(this.form)">
</form>

在此处搜索电影！：

ajax.js

function filmlist(form) {
    $('#films table').empty(); //removes previous search results before adding the new ones.
    var apikey = "APIKEY";
    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
    $(document).ready(function () {
        // sends the query
        $.ajax({
            url: moviesSearchUrl + '&q=' + encodeURI(query),
            dataType: "jsonp",
            success: searchCallback
        });
    });
    // 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>');
        });
    }
}

功能电影列表（表格）{
$（“#电影表”）.empty（）；//在添加新搜索结果之前删除以前的搜索结果。
var apikey=“apikey”；
var baseUrl=”http://api.rottentomatoes.com/api/public/v1.0";
var moviesSearchUrl=baseUrl+'/movies.json？apikey='+apikey；
var query=form.inputbox.value；//使用输入框中的值作为查询搜索
$（文档）.ready（函数（）{
//发送查询
$.ajax({
url:moviesSearchUrl+'&q='+encodeURI（查询），
数据类型：“jsonp”，
成功：searchCallback
});
});
//收到结果
函数searchCallback（数据）{
$（'#films table'）.append（'Found'+data.total+'results for'+query）；
var movies=data.movies；
$.each（电影，功能（索引，电影）{
$（“#电影表”）.append（'发行年份：'+movie.year+'观众分数：'+movie.ratings.观众分数+
“
”+”影院发布日期：“+movie.Release\u dates.theater”+
“
运行时：”+movie.Runtime+“分钟”）；
});
}
}

如果用户在任何

表单

元素上按enter键，将调用

提交

操作。您可以通过

收听该事件。提交
：

$('#myForm').submit(function(event){
  event.preventDefault(); // stop the actual submit
  // ajax code goes here to submit data
});

对于jQuery，我使用这个简短的片段来捕获Enter键按下事件，并将一个函数绑定到它（实际上不需要使用表单和提交）：

接下来，调用
。在元素上按Enter
jQuery扩展名：

我将试一试，这是一个更完整的解决方案，适用于整个“Listen to Keypress Enter to submit”，在跨浏览器工作时，我遇到了一些问题，也许这将为您解决这些问题

根据您的代码，这应该可以正常工作

  $('#inputbox').live("keypress", function(e) {
     var code = (e.keyCode ? e.keyCode : e.which);
     if (code == 13) {
        e.preventDefault();
        e.stopPropagation();
        $(this).closest('form').submit();
     }
  });

嘿，应该放在函数中的代码是‘filmlist（this.form）’的一部分吗。但是，请删除document.ready并熟悉技巧Satpal madeYeah，我知道最好不要内联使用它，但这似乎是唯一可行的方法。我已删除文档就绪&功能未受影响，但更改为提交的类型无效。您包装在
文档中的代码。就绪
是需要等待文档就绪的代码。在这样的函数中使用不会起任何作用。您需要将上面的代码包装在document.ready中，以便在HTML元素全部加载后开始侦听submit事件。否则，
#myForm
将不存在，只是需要注意：jquery已经弃用了live方法，并将其替换为on。
$('mySelector').pressEnter(function () {
  console.log('Enter pressed!');
});

  $('#inputbox').live("keypress", function(e) {
     var code = (e.keyCode ? e.keyCode : e.which);
     if (code == 13) {
        e.preventDefault();
        e.stopPropagation();
        $(this).closest('form').submit();
     }
  });