Question

可能重复：
Enter button on Keyboard refreshes rather than submitting

我有以下表单结构

我的表格结构：

<form name="form">
<label>Name:</label>  
<input type="text" name="name" id="id" size="50"/></br>
<label></label> 
<input type="button" value="Get Info" onClick="get();">
</form>
<div id="age"></div>

我的get函数的javascript如下：

function get() {
$.post('XXX.php', { name: form.name.value },
function(output){
    $('#age').html(output).show();

});

}

现在当我使用按钮（输入类型=“按钮”）发布信息时效果很好，但是当我填写信息并按键盘页面输入时会刷新。

如何使用Enter按钮发布信息？

Answer 1

很多时候，在非textarea字段中按下enter时form中的默认行为是提交，即使没有按下或甚至没有提交按钮。

试试这个：

<form name="form" onsubmit="get();return false;">

事实上，使用这种技术，您可以将输入button更改为提交，以简化具有相同结果的表单：

<input type="submit" value="Get Info"/>

Answer 2

在您的函数中尝试return false;。这将使按钮停止其通常的行为：

function get() {
    $.post('XXX.php', { name: form.name.value },
    function(output){
        $('#age').html(output).show();

    });
    return false;
}

Answer 3

我做的有点不同（这可能意味着错误的方式）。我根本不做表格。我只是创建输入，选择等等。然后当我做我的POST时，我只是得到函数被调用的值..

$.ajax({

        type: "POST",

        url: "someFile.php",

        data: { 'name': $("#ElementID").val()},

        success: function(data) {

            //some function....

            {
});

希望这可能有所帮助......

Answer 4

我看到你把它发布为jQuery所以我想我会给你一个使用它的解决方案。

$('form[name=form]').submit(function(e) {
  var $form = $(this);
  $.post( $form.attr('action'), $form.serializeArray(), function( result ) {
    $('#age').html( result ).show();
  });
  e.preventDefault();
});

这将使您不必为数据参数创建一个疯狂的json对象，也不必重复使用表单的action属性。这也将保持浏览器的行为，当输入时按Enter键将提交表单。

Here goes some code I have from an example earlier。表单的操作文件中唯一的内容是<?php print_r($_POST); ?>。

输入提交而不是刷新

4 个答案: