Форма не отправляется через 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!"; 
} 

Это отображает таблицу в следующем way

Чтобы отправить форму через AjaxForm, это было сделано следующим образом: (я не показанные <table> теги здесь. пардон.)

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

        alert("success"); 

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

проблема заключается в том, что форма передается по обычной дороге action="deletebook.php" Поверьте мне, что на других страницах форма отправляется через AjaxForm. Но на этой странице проблема возникает.

Возможно ли это, потому что каждая кнопка «удалить» представляет собой форму, отображаемую в соответствии с содержимым в таблице. Пожалуйста, помогите мне.

EDIT: Проблема заключается не в невозможности удалить данные. Данные удалялись до и теперь удаляются. Данные удаляются, отправив меня на страницу 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); 
    } 
}); 

И в РНР метод добавления, возвращает строку, как это:

"<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 
       } 
      } 
     ); 

    });