Htmx POST for Editable Row

Question

I am trying to do an editable row with Django and HTMX. I have trouble editing rows. When I click the edit button, form appears instead of row. I click save after edit fields, nothing happens. Why is there no POST operation? Post method is not triggered. And I am not getting any error on console. Here is my code

edit_link_form.html

<td>
    <form hx-post="{% url 'link:link_update' pk=object.pk %}"> 
        {% csrf_token %}
          {% load crispy_forms_tags %}
         
          {% for field in form %}
               <td colspan="{{ form|length }}">
                    <div class="form-row">
                    <div class="form-group col-md-12">
                    {{ field|as_crispy_field }}
                    </div>
                    </div>
                </td>    
          {% endfor %}
        <td>
            <button type="submit" class="btn">Submit</button>       
        </td>
        <td>
            <button class="btn btn-primary" type="button">Cancel</button>
        </td>
    </form>
</td>

Here is my row.html

<tr id="link_list_{{link.pk}}">
    <td>{{ link.title }}</td>
    <td>{{ link.get_full_url }}</td>
    <td>  
      <span class="p-1 border fs-12 rounded text-light bg-primary">
        <a href="{{ link.category.get_absolute_url }}" class="text-decoration-none text-light">
          {{ link.category }}
        </a>
      </span>
    </td>
    <td>   
        {% for shortcode, tags in tags_by_shortcode.items %}
        {% if shortcode == link.shortcode %}
          {% for tag in tags %}
            <li class="list-inline-item border p-1 text-muted fs-12 mb-1 rounded">
              <a href="{{ tag.get_absolute_url }}" class="text-decoration-none text-muted">
                {{ tag.title }}
              </a>
            </li>
          {% endfor %}
        {% endif %}
      {% endfor %}
    </td>

    <td>
        <button class="btn btn-warning" 
        hx-get="{% url 'link:link_update' pk=link.pk %}"
        hx-target="#link_list_{{link.pk}}">
        Edit
        </button>
    </td>
    <td>
        <button
        class="btn btn-danger btn-sm float-end"
        hx-delete="{% url 'link:delete_link' link.pk %}"
        hx-confirm="Are you sure you want to delete this item?"
        hx-target="#link_list_{{link.id}}"
        hx-swap="outerHTML"> Delete
        </button>    
      </td>
  </tr>

Here urls.py of app

app_name = 'link'

urlpatterns = [
    path('edit/<int:pk>/', LinkUpdateView.as_view(), name='link_update'),
    path('edit/<int:pk>/get_row_view/', get_row_view, name='get_row_view'),
    path('list', LinkyListView.as_view(), name='link_list_view'),

]

Here my views.py of app

def get_row_view(request, pk):
    link = LinkUrl.objects.get(pk=pk)
    context = dict(
        link=link,
    )
    return render(request, 'link/row.html', context)


class LinkUpdateView(UpdateView):
    model = LinkUrl
    form_class = LinkModelForm
    template_name = 'link/edit_link_form.html'

    def get_success_url(self):
        return reverse_lazy('link:link_update', kwargs={'pk': self.object.pk})