使用带有按钮的输入键提交表单

时间:2013-08-19 14:55:40

标签: jquery html forms button enter

我需要使用回车键提交表单,但在我的情况下,它与本网站中的其他问题不同。我没有input[type="submit"],但我有一个按钮(<button id=""></button>)。

我的表格的完整代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>

<form id="myForm" action="userInfo.php" method="post">
<textarea name="mesazhi" cols="35" rows="4"></textarea>
<?php $idiperdoruesit = $_SESSION['id']; ?>
<input type="hidden" name="idiperdoruesit" value="<?php echo $idiperdoruesit; ?>" />
<br /><button id="sub" style="border-radius:0px; border-size:2px; border-style:solid; border-color:#ffffff; border-width:thin; background-color:#000000; color:#ffffff; height:26px; width:60px;  font-size:16px;">Send</button>
</form>

当用户单击Send按钮时,jquery函数会将消息发送到数据库而不重新加载页面。下面是jquery函数:

$("#sub").click( function() {
 $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(info){ $("#result").html(info); 
   });
 clearInput();
});

$("#myForm").submit( function() {
  return false; 
});

function clearInput() {
    $("#myForm :input").each( function() {
       $(this).val('');
    });
}

如何通过按回车键发送信息?

2 个答案:

答案 0 :(得分:3)

您可以使用keydown处理程序执行此操作。返回键是键13。

$('input').on( 'keydown', function( e ) {
  if( e.which == 13 ) {
    tickleAPolarBear();
    //or something like $('#myForm').submit();
  }
} );

有关keydown事件的详细信息,请参阅mdn

答案 1 :(得分:1)

使用表单的提交事件,表单的默认行为是在单击提交按钮时提交,或者在表单输入上按下回车键。

$("#myForm").submit(function(){
    $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(info){ $("#result").html(info); }
    );
    clearInput();
    return false;
});

现在让您的按钮成为提交按钮并摆脱点击事件。现在,当您在textarea以外的任何输入中按Enter键时,表单将提交并且您的处理程序将被调用。不需要keydown事件处理程序和单击处理程序。