title: (Python/Django/MySQL) Issue with updating form table in HTML page without using php
body: <p>I'm a newbie on Python and Django here, I was tasked to create and update a form table in a HTML page using Django and MySQL database without using PHP, I manage to create and display the data but I'm having trouble on the editing/updating part.</p>
  
  <p>How can I do it without using PHP? I'm having trouble understanding on how to use UpdateView. Also I'm trying using 2 ways for user to submit the updated table,</p>
  
  <p>1) by pressing enter 2) by pressing the submit button</p>
  
  <p>Below is my code, I try to use the same code as the one I use to GET the data from input box into the database, but for this it just append another row I last add into the database instead of editing it. I also use dhtmlx to design the table. I've been stuck doing this for days and I really appreciate everyone input in this, Thanks a bunch and apologies for the cluttered codes.</p>
  
  <p>model.py</p>
  
  <pre><code>from django.db import models
  
  class UserInfo(models.Model):
      first_name = models.CharField(max_length=30)
      last_name = models.CharField(max_length=30)
      employee_id = models.CharField(max_length=10)
      gender = models.CharField(max_length=12)
  
      def __str__(self):
          return self.first_name
  </code></pre>
  
  <p>view.py</p>
  
  <pre><code>from django.shortcuts import render
  from .form import UserDisplayInfoForm
  from .models import UserInfo
  
  def display_view(request, id=None):
      display_table = UserInfo.objects.all()
      if request.method == 'POST':
          print(request.POST)
          form = UserDisplayInfoForm(request.POST)
          if form.is_valid():
              instance = form.save(commit=False)
              form.save()
  return render(request, 'myform/display.html',
  {"display_table": display_table}, {'form': UserDisplayInfoForm,})
  </code></pre>
  
  <p>form.py</p>
  
  <pre><code>from django import forms
  from .models import UserInfo
  from django.views.generic.edit import UpdateView
  
  class UserDisplayInfoForm(forms.ModelForm):
      class Meta:
          model = UserInfo
          template_name = 'myform/display.html'
          fields = [
              "first_name",
              "last_name",
              "employee_id",
              "gender"
          ]
  </code></pre>
  
  <p>urls.py</p>
  
  <pre><code>from django.conf.urls import url
  from django.contrib import admin
  from myform import views
  
  urlpatterns = [
      url(r'^admin/', admin.site.urls),
      url(r'^$', views.index_view),
      url(r'^display/', views.display_view)
  ]
  </code></pre>
  
  <p>display.html</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;title&gt; Lemonsky  v 0.0.1 &lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="static/css/roboto.css"/&gt;
      &lt;link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" type="text/css"&gt;
      &lt;script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Display Table&lt;/h1&gt;
          &lt;h2&gt;Lemonsky  v 0.0.1 &lt;/h2&gt;
  
          &lt;form method="POST" action=""&gt;&lt;input type='hidden'/&gt;{% csrf_token %}
              &lt;table class="dhtmlxGrid" id="table_data" name="grid2" gridHeight="auto" style="width:400px" imgpath="myform/static/imgs/" border="1" lightnavigation="true"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;First Name&lt;/th&gt;
                          &lt;th&gt;Last Name&lt;/th&gt;
                          &lt;th&gt;Employee Id&lt;/th&gt;
                          &lt;th&gt;Gender&lt;/th&gt;
                      &lt;/tr&gt;
                  {% for data in display_table %}
                      &lt;tr&gt;
                          &lt;td id="id_first_name" name="first_name"&gt;&lt;input type="text" name="first_name" maxlength="30" required id="id_first_name" value="{{data.first_name}}"/&gt;&lt;/td&gt;
                          &lt;td id="id_last_name" name="last_name"&gt;&lt;input type="text" name="last_name" maxlength="30" required id="id_last_name" value="{{data.last_name}}"/&gt;&lt;/td&gt;
                          &lt;td id="id_employee_id" name="employee_id"&gt;&lt;input type="text" name="employee_id" maxlength="10" required id="id_employee_id" value="{{data.employee_id}}"/&gt;&lt;/td&gt;
                          &lt;td id="gender" name="gender"&gt;&lt;input type="text" name="gender" maxlength="10" required id="id_gender" value="{{data.gender}}"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  {% endfor %}
              &lt;/table&gt;
  
              &lt;input type='submit' value='submit'/&gt;
          &lt;/form&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $("td").keydown(function(event){
                      var keycode = event.keyCode || event.which;
  
                          if(keycode == 13){
                              var td_value = $(this).children(':nth-child(1)').val()
                              console.log(td_value);
                              alert(td_value);
                              &lt;!--$.post(URL, data, function(response))--&gt;
                          }
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>