title: How to update a form and update table cell in Django
body: <p>I am very new Django and python, trying to learn and build a webapp.</p>
  
  <p>I want to show some data to user in a table format. The user should be able to add, delete and update records in the table view.</p>
  
  <p>I am able to achieve the add, delete part but, cannot get my head around updating the existing records.</p>
  
  <p>Ideally, i want the row data to be populated in a modal view as a django form when clicked on "edit" button of a particular row. But unable to even get the basic update from a editable table row. Here is my sample code..</p>
  
  <p>I tried this at below link but, did not help .. or may be i did not understand. 
  <a href="https://stackoverflow.com/questions/13411183/django-updating-database-row-via-table-cell">Django: updating database row via table cell</a></p>
  
  <p><strong>models.py</strong></p>
  
  <pre><code>
  # Create your models here.
  
  class customerDataModel(models.Model):
      customerName = models.CharField(max_length=200)
      custormerLocation = models.CharField(max_length=200)
      custormerAge = models.CharField(max_length=200)
      custormerLanguage = models.CharField(max_length=200)
  
      def __str__(self):
          return self.customerName
  </code></pre>
  
  <p><strong>forms.py</strong></p>
  
  <pre><code>from django import forms
  from . models import customerDataModel
  
  
  class addCustomerForm(forms.ModelForm):
  
      class Meta:
          model = customerDataModel
          fields = ('customerName', 'custormerLocation', 'custormerAge', 'custormerLanguage')
  
          widgets = {
              'customerName': forms.TextInput(
                  attrs={
                      'class': 'form-control'
                      }
                  ),
              'custormerLocation': forms.TextInput(
                  attrs={
                      'class': 'form-control'
                      }
                  ),
              'custormerAge': forms.TextInput(
                  attrs={
                      'class': 'form-control'
                      }
                  ),
  
              'custormerLanguage': forms.TextInput(
                  attrs={
                      'class': 'form-control'
                      }
                  ),
  
  
              }
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>from django.shortcuts import render
  from . forms import addCustomerForm
  from . models import customerDataModel
  from django.http import HttpResponseRedirect
  from django.urls import reverse
  
  # Create your views here.
  
  #from django.http import HttpResponse
  
  
  def index(request):
      if request.method == 'POST':
          form = addCustomerForm(request.POST)
          if form.is_valid():
              # print("VALID")
              form.save()
  
      customer_table_data = customerDataModel.objects.all()
      form = addCustomerForm
      return render(request, 'index.html', {'customer_table_data' : customer_table_data ,'form' : form})
      #return HttpResponse("Hello, world. You're at the polls index.")
  
  
  def delete_customer_row(request, id):
      customerDataModel.objects.filter(id=id).delete()
      return HttpResponseRedirect(reverse('index'))
  
  
  def edit_customer_row(request, id):
  
      print('The value in ID is ', id)
  
      instance = customerDataModel.objects.get(id=id)
      if request.method == "POST":
          form = addCustomerForm(request.POST, instance=instance)
          if form.is_valid():
               print("VALID")
               form.save()
      return HttpResponseRedirect(reverse('index'))
  
  </code></pre>
  
  <p><strong>template.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {background-color: #f2f2f2;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;Customer Information&lt;/h2&gt;
  
  &lt;form method="POST"&gt;
  
      {% csrf_token %}
       {{ form }}
  
       &lt;br&gt;
       &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  
  
  &lt;div style="overflow-x:auto;"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;Customer Name&lt;/th&gt;
        &lt;th&gt;Location&lt;/th&gt;
        &lt;th&gt;Age&lt;/th&gt;
        &lt;th&gt;Laungage&lt;/th&gt;
        &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
  
  
  
      {% for rowitem in customer_table_data %}
  
      &lt;tr&gt;
          &lt;form action="{% url 'edit_customer_row' rowitem.id %}" method="post"&gt;
                  {% csrf_token %}
          &lt;td&gt;{{rowitem.customerName}}&lt;/td&gt;
          &lt;td&gt;&lt;div contenteditable&gt;{{rowitem.custormerLocation}}&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;{{rowitem.custormerAge}}&lt;/td&gt;
          &lt;td&gt;{{rowitem.custormerLanguage}}&lt;/td&gt;
          &lt;!-- &lt;td&gt;&lt;a href="{% url 'edit_customer_row' rowitem.id %}" &lt;button&gt;edit&lt;/button&gt;&lt;/a&gt;&lt;/td&gt; --&gt;
          &lt;td&gt;&lt;input type="submit" value="edit"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href="{% url 'delete_customer_row' rowitem.id %}" &lt;button&gt;delete&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;
          &lt;/form&gt;
      &lt;/tr&gt;
  
      {% endfor %}
  
  
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>