Question

我正在创建评论功能，下面是我的代码到目前为止。

HTML

<form action="http://website.com/transaction_items/add_comment" class="" id="form-comment" role="form" method="post" accept-charset="utf-8"> 
  <input type="hidden" name="checklists_item_id" value="6" style="display:none;"> 
  <input type="hidden" name="user_id" value="1" style="display:none;"> 
  <div class="input-group col-xs-12"> 
    <input type="text" name="comment" value="" class="form-control" id="comment-input" placeholder="Enter your comments.."> 
    <span class="input-group-btn"> 
      <button class="btn btn-default" id="doc-comment" type="button">Post</button> 
    </span> 
  </div> 
</form>

的jQuery

文档准备就绪时调用此函数。

function comment () {
  $('#doc-comment').click(function (e) {
    var form_id    = '#' + $(this).parents('form').attr('id');

    // submit data from the form
    submit.send(form_id);
  });
}

问题：

使用按钮<button class="btn btn-default" id="doc-comment" type="button">Post</button>提交数据工作正常，但是如果我在键盘中使用enter，则提交.send（form_id）;不会执行其功能，而是执行默认表单提交。

如果使用键盘输入提交表单数据，我该如何使用ajax？

Answer 1

概括地说

$("#form-comment").on('submit', function(evt) {
    evt.preventDefault();
    //  do your ajax stuff here
});

然后你可以抛出onclick按钮监听器..因为这将处理按钮提交

Answer 2

有更多方法可以提交表单，然后只需按下submit按钮。

你需要：

使用表单submit方法
保持表单完整提交。

-

// This will catch the *enter* as well as the submit button
$("#form-comment").on('submit', function(evt) {
  evt.preventDefault();
  // You can then submit the form via ajax and update things as needed.
});

如果你打算使用button，你至少应该做一个

<button type="button">...</button>

表现不同。

Answer 3

$("#form-comment").keyup(function (e) {               // On pressing enter 
if (e.keyCode == 13) {
     // put your ajax code here
            }
 });

您可能必须根据您的浏览器禁用表单提交按钮的默认Enter事件。

所以在Jquery Button中点击功能确保你有像

这样的东西

  event.preventDefault();

如何使用输入键盘

3 个答案: