用户在输入=文本中按下Enter时的jQuery函数commit（），也提交位于同一表格中的输入=提交

Question

so I have a form with two inputs: an input=text and an input=submit . The input text is used to update the item's info and the input submit to delete the item. The item's info is updated after the user edit the info in the input text and press Enter key. I'm using JQuery for this, see the code below:

In JS file

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

It is working fine, but the PROBLEM IS : when the user presses Enter the input submit (delete button) is also submitted and after updating the info it delete the item. How can I only submit the update when the user presses Enter key?

The HTML form (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>

The PHP code for update and delete (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

May I be mistaken in thinking you are using bootstrap (as you are using the class btn ) ?

Regardless, you could change your delete button to a link that points to the delete operation. (You'll need to replace [url] ) This way when you click enter, it will not fire any submit button.

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>

And you have to write custom script for OnClick event of delete button, to set isDelete = 1 and submit form. But better you can use a link for delete button

Answer 3

Don't make the button a submit button. Just have it be a regular button that invokes the PHP code via an AJAX call:

 $(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

It is possible to disable fields before the form is submitted which will eliminate them from the data submitted by the web browser.

$(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;
      }
    });
});