如何在按下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>標簽，可以。 刪除它，您就可以開始了。