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>

上面的代码是注释按钮，工作正常。现在我想提交关于输入密钥的评论：

<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

由于您不想重新加载页面，我建议您将表单元素更改为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;" />

然后你就可以使用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

如果你有一个按钮类型提交，那么当按下回车键时它会自动提交 - 没有JS，不需要魔法！

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

Answer 4

在输入时提交实际上是默认行为。你想要做的是挂钩submit事件，而不是试图抓住以后会导致submit事件的所有事情。所以：

仅在表单元素上收听submit，而不是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]时，浏览器会自动提交，然后在输入中按Enter键。

要解决此问题，您只需在以下表单中添加另一个无用的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>标记就可以了。删除它，你很高兴。

如何按下回车键（jQuery）提交数据？

6 个答案: