用戶在輸入=文本中按下Enter時的jQuery函數commit（），也提交位於同一表格中的輸入=提交

Question

所以我有一個帶有兩個輸入的表單： input = text和input = submit 。 輸入的文本用於更新項目的信息，輸入的提交用於刪除項目。 用戶在輸入文本中編輯信息並按Enter鍵后，該項目的信息將更新。 我為此使用JQuery，請參見下面的代碼：

在JS文件中

  $(".input-edit").focus();
    $(".input-edit").keyup(function (event) {
    if (event.keyCode == 13) {
        $(currentEle).html($(".input-edit").val());
        this.form.submit();
        return false;
    }
});

它工作正常，但問題是 ：當用戶按下Enter鍵時，也會提交輸入的提交（刪除按鈕），並且在更新信息后刪除該項目。 如何僅在用戶按下Enter鍵時提交更新？

HTML表單（index.php）：

  <form action="crud.php" method="post">
      <input class="input-edit" name="editInfo" type="text" value="$item['info']" />
      <input type="hidden" name="id" value="<?php echo $item['id']?>">                

      <button class="btn" type="submit" name="delete">
          <i class="icon-deletar material-icons right">delete</i>
      </button>                            
  </form>

用於更新和刪除的PHP代碼（crud.php）：

if(isset($_POST['editInfo'])){
    $info= trim($_POST['editInfo']);
    $id= $_POST['id'];

    if(!empty($info)){
        $query= $db->prepare("UPDATE item SET info = '$info' WHERE id = $id");
        $query->execute();
    }

}else if(isset($_POST['delete'])){

    $id= $_POST['id'];
    if(!empty($cod)){
        $query= $db->prepare("DELETE FROM item WHERE id = $id");
        $query->execute();
    }
}

Answer 1

我可能會以為您正在使用引導程序（因為您正在使用btn類）而弄錯了嗎？

無論如何，您都可以將刪除按鈕更改為指向刪除操作的鏈接。 （您需要替換[url] ）這樣，當您單擊Enter時，它不會觸發任何提交按鈕。

index.php

<a class="btn" href="[url]?delete=true&id=<?php echo $item['id'] ?>">
    <i class="icon-deletar material-icons right">delete</i>
</a> 

crud.php

} else if (isset($_GET['delete'])){
    $id= $_GET['id'];
    if (!empty($cod)) {
        $query= $db->prepare("DELETE FROM item WHERE id = $id");
        $query->execute();
    }
} 

Answer 2

<form action="crud.php" method="post">
  <input class="input-edit" name="editInfo" type="text" value="$item['info']" />
  <input type="hidden" name="id" value="<?php echo $item['id']?>">                

  <input type="hidden" name="isDelete" value="0">
  <button class="btn" type="button" name="delete">
      <i class="icon-deletar material-icons right">delete</i>
  </button>                            
</form>

並且您必須為刪除按鈕的OnClick事件編寫自定義腳本，以設置isDelete = 1並提交表單。 但是更好的是您可以使用鏈接來刪除按鈕

Answer 3

不要將按鈕設為提交按鈕。 只是將其作為通過AJAX調用來調用PHP代碼的常規按鈕即可：

 $(function(){ $(".btn").on("click", function(){ $.ajax({ url: "crud.php", data: "" // The data to send }).done(function() { // Your success callback code here }); }); }); $(".input-edit").focus(); $(".input-edit").keyup(function (event) { if (event.keyCode == 13) { $(currentEle).html($(".input-edit").val()); this.form.submit(); return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="crud.php" method="post"> <input class="input-edit" name="editInfo" type="text" value="$item['info']" /> <input type="hidden" name="id" value="<?php echo $item['id']?>"> <button class="btn" type="button" name="delete"> <i class="icon-deletar material-icons right">delete</i> </button> </form> 

Answer 4

可以在提交表單之前禁用字段，這會將其從Web瀏覽器提交的數據中刪除。

$(document).ready(function() {
    $(".input-edit").focus();
    $(".input-edit").keypress(function (event) {
      if (event.keyCode == 13) {
        $(this).html($(".input-edit").val());
        $('button[name="delete"]').prop('disabled', true);
        this.form.submit();
        event.preventDefault();
        return false;
      }
    });
});