如何在按下Enter键（jQuery）时提交数据？

Question

我有一个ajax php注释系统，该系统工作正常，但按注释按钮提交数据。 我想添加一些花哨的内容并删除评论按钮，这意味着评论将在回车键上提交。

<form method='post' name='form' action=''>
<input type='text' name='comment' id='comment' placeholder='Write a comment....' />
<input type='button' name='submit' id='submit' value='Comment'/>
</form>

<script type="text/javascript" >
$(function() {
     $("#submit").click(function() {
        var test = $("#comment").val();
        var comment = test;
        var id = '<?php echo $id ?>';
        if (test == '') {
          alert("Please Enter Some Text");
        } else {

          $.ajax({
            type: "POST",
            url: "comment.php",
            data: {comment : comment,id : id},
            cache: false,
            success: function(html) {
              $(".coments").prepend(html);
              $("#comment").val('');
            }
          });

        }
        return false;
      });
    });
    </script>

上面的代码带有注释按钮，可以正常工作。 现在，我尝试对Enter键提交评论：

<script type="text/javascript" >
$(function() {
     $('#comment').keyup(function(e) {
if(e.keyCode == 13) {
        var test = $("#comment").val();
        var comment = test;
        var id = '<?php echo $id ?>';
        if (test == '') {
          alert("Please Enter Some Text");
        } else {

          $.ajax({
            type: "POST",
            url: "comment.php",
            data: {comment : comment,id : id},
            cache: false,
            success: function(html) {
              $(".coments").prepend(html);
              $("#comment").val('');
            }
          });

        }
        return false;
       }
      });
    });
    </script>

刷新输入代码页后，此代码无效，未提交任何评论。

Answer 1

由于您不想重新加载页面，因此建议您将form元素更改为div元素。 这样，您可以自己处理请求。

<div>
  <input type='text' name='comment' id='comment' placeholder='Write a comment....' />
  <input type='button' name='submit' id='submit' value='Comment' />
</div>

这是一个快速的小提琴： https : //jsfiddle.net/w2fepLak/

Answer 2

将input="button"调整为<input type='submit' name='submit' id='submit' value='Comment'/> 。

但是，如果您不希望显示提交按钮，则仍然可以使用CSS <input type='button' name='submit' id='submit' value='Comment' style="display:none;" />隐藏它<input type='button' name='submit' id='submit' value='Comment' style="display:none;" /> <input type='button' name='submit' id='submit' value='Comment' style="display:none;" />

然后您尽力使用jQuery提交表单

        $(function() {
      $('#comment').keyup(function(e) {
        if (e.keyCode == 13) {

           var test = $("#comment").val();
  var comment = test;
  var id = '<?php echo $id ?>';
  if (test == '') {
    alert("Please Enter Some Text");
  } else {

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: {comment : comment,id : id},
      cache: false,
      success: function(html) {
        $(".coments").prepend(html);
        $("#comment").val('');
      }
    });

    }
        }
      });

Answer 3

如果您的按钮类型为“提交”，那么在按Enter键时它将自动提交-无需JS，无需魔术！

<input type='submit' name='submit' id='submit' value='Comment'/>

Answer 4

在Enter上提交实际上是这里的默认行为。 您要做的是挂接到submit事件，而不是尝试捕获以后会导致submit事件的所有内容。 所以：

• 听的只是在表单元素上submit ，而不是click或click keydown 。
• 在submit处理程序中，调用event.preventDefault()以防止表单提交和重新加载页面。

在代码中：

$("form").on("submit", function(e) {
  e.preventDefault();

  var test = $("#comment").val();
  var comment = test;
  var id = '<?php echo $id ?>';
  if (test == '') {
    alert("Please Enter Some Text");
  } else {

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: {comment : comment,id : id},
      cache: false,
      success: function(html) {
        $(".coments").prepend(html);
        $("#comment").val('');
      }
    });

  }
});

Answer 5

当表单中只有一个input[type=text]时，浏览器将自动提交，然后在输入中按回车键。

为了解决这个问题，您可以简单地在这样的形式下添加另一个无用的input[type=text] ：

<form method='post' name='form' action=''>
    <input type='text' name='comment' id='comment' placeholder='Write a comment....' />
    <input type="text" style="display: none;" name="nothing" value="nothing" />
    <input type='button' name='submit' id='submit' value='Comment'/>
</form>

Answer 6

如果没有<form>标签，可以。 删除它，您就可以开始了。