Sending data to database with JavaScript in Django

Question

I need to write a compatible algorithm for this code, but I can't. How can I send data to backend? I am using bootstable.js for table

HTML table:

<table class="table table-bordered" id="table-list">
<thead>
  <tr>
    <th></th>
    <th>Name</th>
    <th>Slug</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  {% for chart in charts %}
  <tr>
    <th id="id">{{chart.id}}</th>
    <td class="editable" id="name">{{chart.name}}</td>
    <td class="editable" id="slug">{{chart.slug}}</td>
    <td>john@example.com</td>
  </tr>
  {% empty %}
  <p>No data</p>
  {% endfor %}
</tbody>
</table>

And this is my JavaScript code. I tried to try some methods myself but it didn't work

<script src="{% static 'npe_cp/js/bootstable.js' %}"></script>
<script>
//apply
$("#table-list").SetEditable();
$('#addRow').click(function() {
  rowAddNew('table-list');
});

$('#bAcep').on('click', function(){
  // var id=$("#id").val();
  // var name=$("#name-44").val();
  // var slug=$("#slug-44").val();
  let name=document.querySelector('#name')
  console.log(id, name, slug, 'Hello World')
  $.ajax({
      url:"/chart/edit",
      type:"POST",
      data:{
        "id":id,
        "name":name,
        "slug":slug,
      },
    })
});

This is exactly what the table looks like. I want to update, create, and delete operations. But I am not getting the data.

Answer 1

Use Django Forms to populate the database, makes it easy to perform CRUD operations