用户在输入=文本中按下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;
      }
    });
});