表单未通过AjaxForm / JQuery提交

Question

There is a table which displays items and has a "Delete" button in each row. The delete button is inside a form. I'm using AjaxForm method to submit form. Clicking the delete button is supposed to delete the data without getting directed to any page or without refreshing current page. But what happens is form gets submitted in regular way as defined on action tag.

I'm displaying results on table in following way:

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

This displays table in following way

To submit the form via AjaxForm, it's been done as follows: (I haven't shown <table> tags here. pardon me.)

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

                    alert("success");

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

The problem is that form is submitted via regular way action="deletebook.php" Trust me in other pages the form gets submitted via AjaxForm. But in this page, the problem is occuring.

Could this be happening because every "delete" button is a form displayed according to the contents in the table. Please help me.

EDIT: The issue is not about being unable to delete data.The data was getting deleted before and is getting deleted now. Data is getting deleted by sending me to the deletebook.php page. I want data to get deleted without sending me to any other page.

Answer 1

Try this way:

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>

Add:

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

And in your php add method, return a string like this:

"<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

I suppose you are using the ajaxForm plugin here 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
              }
           }
        ); 

    });