title: Add and edit form in one page
body: <p>I have two buttons 'Add' and 'Edit' in my page. When I try to click the 'Add' button I get one popup form and I fill the details and will be added in to the database. The same thing when I click the 'Edit' button the same form should be displayed with the filled in details. I know how to get the data from the backend. But I am not aware of how should I differentiate the add and edit in one form.</p>
  
  <p><a href="https://jqueryui.com/dialog/#modal-form" rel="nofollow noreferrer">https://jqueryui.com/dialog/#modal-form</a></p>
  
  <p>I have refered this link and I have added the details for add form.
  Can some one help me how do I do the edit?</p>
  
  <pre><code>&lt;html&gt;
  
          &lt;input class="btn btn-info" type="button" id="create-user" value="Add user"&gt;
  
  
          &lt;div class="row-fluid top-space-20"&gt;
              {% if result | length == 0 %}
              &lt;div&gt;
                  &lt;p&gt;There are no user details ,If you want you can add it &lt;/p&gt;
              &lt;/div&gt;
              {% else %}
              &lt;table class="table table-striped"&gt;
                  &lt;thead&gt;
                      &lt;th&gt;user name&lt;/th&gt;
                      &lt;th&gt;user duration&lt;/th&gt;
                      &lt;th&gt;user Description&lt;/th&gt;
                      &lt;th&gt;user requirements&lt;/th&gt;
                      &lt;th&gt;Actions&lt;/th&gt;
                  &lt;/thead&gt;
                  {% for each_item in result %}
                  &lt;tbody&gt;
                      &lt;td&gt;{{each_item.user_name}}&lt;/td&gt;
                      &lt;td&gt;{{each_item.user_time}}&lt;/td&gt;
                      &lt;td&gt;{{each_item.user_description}}&lt;/td&gt;
                      &lt;td&gt;{{each_item.user_requirement}}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;input class="btn btn-info" type="button" id="edituser" value="Edit"&gt;
  
                      &lt;/td&gt;
                  &lt;/tbody&gt;
                  {% endfor %}
                  {% endif %}
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="dialog-form" title="Create new user"&gt;
          &lt;p class="validateTips"&gt;All form fields are required.&lt;/p&gt;
  
          &lt;form&gt;
              &lt;fieldset&gt;
                  &lt;label for="username"&gt;user name&lt;/label&gt;
                  &lt;input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all"&gt;
                  &lt;label for="duration"&gt;Duration&lt;/label&gt;
                  &lt;input type="text" name="duration" id="duration" class="text ui-widget-content ui-corner-all"&gt;
                  &lt;label for="description"&gt;Description&lt;/label&gt;
                  &lt;input type="text" name="description" id="description" class="text ui-widget-content ui-corner-all"&gt;
                  &lt;label for="requirements"&gt;Requirements&lt;/label&gt;
                  &lt;input type="requirements" name="requirements" id="requirements"
                      class="text ui-widget-content ui-corner-all"&gt;
                  &lt;input type="hidden" id='departmentId' ,value="{{department_id}}"&gt;
                  &lt;input type="submit" tabindex="-1" style="position:absolute; top:-1000px"&gt;
              &lt;/fieldset&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          $(function () {
              var dialog, form,
                  username = $("#username"),
                  duration = $("#duration"),
                  description = $("#description"),
                  requirements = $("#requirements"),
                  allFields = $([]).add(username).add(duration).add(description).add(requirements),
                  tips = $(".validateTips");
  
              function updateTips(t) {
                  console.log(t);
                  tips
                      .text(t)
                      .addClass("ui-state-highlight");
                  setTimeout(function () {
                      tips.removeClass("ui-state-highlight", 1500);
                  }, 500);
              }
  
              function checkLength(o, n, min, max) {
  
                  if (o.val().length &gt; max || o.val().length &lt; min) {
                      o.addClass("ui-state-error");
                      updateTips("Length of " + n + " must be between " +
                          min + " and " + max + ".");
  
                      return false;
                  } else {
                      return true;
                  }
              }
  
              function addUser() {
                  var valid = true;
                  allFields.removeClass("ui-state-error");
                  var username = $("#username");
                  var duration = $("#duration");
                  var description = $("#description");
                  var requirements = $("#requirements");
                  var departmentId = document.getElementById("departmentId").value;
                  valid = valid &amp;&amp; checkLength(username, "username", 3, 16);
                  valid = valid &amp;&amp; checkLength(duration, "duration", 3, 16);
                  valid = valid &amp;&amp; checkLength(description, "description", 3, 300);
                  valid = valid &amp;&amp; checkLength(requirements, "requirments", 5, 300);
  
                  if (valid) {
                      var username = $("#username").val();
                      var duration = $("#duration").val();
                      var description = $("#description").val();
                      var requirements = $("#requirements").val();
                      var departmentId = document.getElementById("departmentId").value;
                      $("#users tbody").append("&lt;tr&gt;" +
                          "&lt;td&gt;" + username + "&lt;/td&gt;" +
                          "&lt;td&gt;" + duration + "&lt;/td&gt;" +
                          "&lt;td&gt;" + description + "&lt;/td&gt;" +
                          "&lt;td&gt;" + requirements + "&lt;/td&gt;" +
                          "&lt;/tr&gt;");
                      $.ajax({
                          type: 'POST',
                          url: '/department/%d/user' % departmentId,
                          data: {
                              'username': username,
                              'duration': duration,
                              'description': description,
                              'requirements': requirements
                          },
                          success: function (result) {
                              console.log(result);
                              alert("The user has been added");
                              document.location.href = "/departments";
                          },
                      })
  
                      dialog.dialog("close");
                  }
                  return valid;
              }
  
              dialog = $("#dialog-form").dialog({
                  autoOpen: false,
                  height: 400,
                  width: 350,
                  modal: true,
                  buttons: {
                      "Create user": addUser,
                      Cancel: function () {
                          dialog.dialog("close");
                      }
                  },
                  close: function () {
                      form[0].reset();
                      allFields.removeClass("ui-state-error");
                  }
              });
  
              form = dialog.find("form").on("submit", function (event) {
                  event.preventDefault();
                  addUser();
  
  
              });
  
              $("#create-user").button().on("click", function () {
                  console.log("I am first");
                  dialog.dialog("open");
              });
          });
      &lt;/script&gt;
  
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>