CODEWITHSUNDEEP
jquerydjangoajax
ali mohammed
ali mohammed

Reputation: 3

Serialize the specific form in Ajax request POST

I have Table of Books, for each row there's book no, and book name and delete button which will delete the book and i am using ajax for deleting, the problem i have when i click the delete button it always delete the first book in the table , any help thanks.

<table>
 <thead>
  <tr>
   <th>Book NO</th>
   <th>Book Name</th>
   <th>Remove</th>
  </tr>
 </thead>
 <tbody>
  {% for book in book_List %}
   <tr>
    <td>{{book.no}}</td>
    <td>{{book.name}}</td>
    <td>
     <form method="POST">
      <input type="hidden" name="remove_uuid" value="{{ book.uuid}}">
      <button onclick="delete()">Delete</button>

     </form>

    </td>
  </tr>
 {%endfor%}
 </tbody>
</table>

script

function delet(){
     $.ajax({
     type:'POST',
     data: $('form').serialize(),
     success: function (data) {
       alert("the book has been delete it")
     }
}

Upvotes: 0

Views: 99

Answers (2)

Ahmed Elgammudi
Ahmed Elgammudi

Reputation: 746

you are taking the from by the tag name $('form').serialize() that's way it take the first form in the table so you can do target.form

function delet(){
 form = event.target.form;
 $.ajax({
  type:'POST',
  data: $(form).serialize(), 
  success: function (data) {
   alert("the book has been delete it")
 }
}

Upvotes: 2

Akshay Bhardwaj
Akshay Bhardwaj

Reputation: 93

use $(form).serialize(),

and before that console.log(form)

Upvotes: 0

Related Questions