使用回车键提交JQuery表格

我已经尝试了各种解决方案，但没有一个适合我的特殊情况！我该如何做到这一点，以便当用户按下“Enter”时，表单会提交&搜索。使用回车键提交JQuery表格

我正在用AJAX的方式使用烂番茄API。

FORM

<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>'); 
     }); 
    } 
}

来源

2014-02-07 B-B.

我会给它一个，一个更完整的解决方案，“听按键输入提交”，这使我在跨浏览器工作时遇到了一些问题，也许这会为你做。

根据你的代码，这应该工作得很好。

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

来源

2014-02-07 23:57:25

只需注意：jquery已弃用现场方法并将其替换为on。 – sterling

如果用户按下任意form元素进入，在submit动作将被调用。您可以通过.submit侦听该事件：

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

来源

2014-02-07 23:17:12 helion3

哎，是应该去功能的 'filmlist（this.form）' 下面的部分内的代码： –

很多，是的。但是，删除document.ready并熟悉提示satpal提出 – helion3

是的，我明白最好不要使用它内联，但它似乎工作的唯一方法。我已经删除了文档并且功能没有受到影响，但是更改提交的类型是无效的。 –

使用jQuery，我用来捕获输入按键事件，以及功能结合到它这个小片段（实际上不诉诸表格和提交）：

$.fn.pressEnter = function(fn) { 
    return this.each(function() { 
    $(this).off('enterPress'); 
    $(this).on('enterPress', fn); 
    $(this).keypress(function(e) { 
     if (e.keyCode == 13) { 
     $(this).trigger("enterPress"); 
     } 
    }); 
    }); 
};

接下来，调用.pressEnter jQuery的扩展你的元素（S）上：

$('mySelector').pressEnter(function() { 
    console.log('Enter pressed!'); 
});

来源

2014-02-07 23:20:56 Hidde

使用回车键提交JQuery表格

回答

相关问题