表單未通過AjaxForm / JQuery提交

Question

有一個顯示項目的表，並且每行都有一個“刪除”按鈕。 刪除按鈕在表單內部。 我正在使用AjaxForm方法提交表單。 單擊刪除按鈕應該刪除數據而不直接進入任何頁面或不刷新當前頁面。 但是會發生的是，表單按照操作標簽上定義的方式定期提交。

我通過以下方式在表上顯示結果：

while($row = $result->fetch_assoc()) 
    {               
    ?>  


<tr>
  <td><?php echo  ++$x; ?></td>
  <td><?php echo $row["id"]; ?></td>
  <td><?php echo $row["title"]; ?></td>
  <td><?php echo $row["author"]; ?></td>
  <td>
  <form method="POST" id='deleteform' class="forms" action="deletebook.php">         
  <input type="hidden" name="deletebook" value='<?php echo $row["id"]; ?>' >
  <button type="submit" class="btn btn-danger btn-xs">Delete</button>
  </form>
  </td>
</tr> 


<?php
    }
}

else
{
    echo "No Books Found!";
}

這將以以下方式顯示表格

要通過AjaxForm提交表單，請按照以下步驟操作：（我這里沒有顯示<table>標簽。請原諒。）

<script>
            $(document).ready(function() { 
                $('#deleteform').ajaxForm(function() { 

                    alert("success");

                }); 
                event.preventDefault();
            }); 
    </script>

問題是表單是通過常規方式提交的。action action="deletebook.php"在其他頁面上相信我，表單是通過AjaxForm提交的。 但是在此頁面中，出現了問題。

因為每個“刪除”按鈕都是根據表中內容顯示的表單，所以可能會發生這種情況。 請幫我。

編輯：問題不在於無法刪除數據。該數據之前已經被刪除，現在正在被刪除。 通過將我發送到deletebook.php頁面來刪除數據。 我希望刪除數據而不將我發送到任何其他頁面。

Answer 1

嘗試這種方式：

while($row = $result->fetch_assoc()) 
    {               
    ?>  


<tr>
  <td><?php echo  ++$x; ?></td>
  <td><?php echo $row["id"]; ?></td>
  <td><?php echo $row["title"]; ?></td>
  <td><?php echo $row["author"]; ?></td>
  <td>
      <input type="hidden" class="hiddenId" value="<?php echo $row["id"]; ?>" />
  <button type="button" class="btn btn-danger btn-xs">Delete</button>
  </td>
</tr> 


<?php
    }
}

else
{
    echo "No Books Found!";
}

?>

<script>
    var id;

$(document).ready(function(){
    $(".btn-danger").click(function(){
        id = $(this).prev().val();
        $.ajax({
            url: "deletebook.php",
            type: 'post',
            data: {
                "deletebook": id
            }
        }).done(function(response){
            $(".hiddenId[value='" + id + "']").parent().parent().remove();
        });
    });
});
</script>

加：

$('#addbook').ajaxForm(
{ 
    success: function(responseText, statusText, xhr, $form){
        $('#booksuccess').modal('show'); 
        $("#reset").click(); 
        $("tr").last().append(responseText);
    }
}); 

並在您的php add方法中，返回如下字符串：

"<tr><td></td><td>1</td><td>$Title</td><td>$Author</td><td><input type=\"hidden\" class=\"hiddenId\" value=\"$Id\" /><button type=\"button\" class=\"btn btn-danger btn-xs\">Delete</button></td></tr>";

Answer 2

我想你在這里使用ajaxForm插件http://malsup.com/jquery/form/#ajaxForm

    $(document).ready(function() { 
        $('#deleteform').ajaxForm(
           {
              beforeSubmit: function(formData, jqForm, options){
                   //show loader
              },
              success:function(responseText, statusText, xhr, $form) { 

                 alert(responseText);
                 //hide loader
              }
           }
        ); 

    });