change button type to submit

Author: trco

examples/forms.py

@@ -11,7 +11,7 @@ class BookFilterForm(BSModalForm):
     type = forms.ChoiceField(choices=Book.BOOK_TYPES)
 
     class Meta:
-        fields = ['type', 'clear']
+        fields = ['type']
 
 
 class BookModelForm(BSModalModelForm):

examples/templates/_books_table.html

@@ -23,15 +23,15 @@
       <td class="text-center">{{ book.price }}</td>
       <td class="text-center">
         <!-- Read book buttons -->
-        <button type="button" class="bs-modal read-book btn btn-sm btn-primary" data-form-url="{% url 'read_book' book.pk %}">
+        <button type="button" class="read-book btn btn-sm btn-primary" data-form-url="{% url 'read_book' book.pk %}">
           <span class="fa fa-eye"></span>
         </button>
         <!-- Update book buttons -->
         <button type="button" class="update-book btn btn-sm btn-primary" data-form-url="{% url 'update_book' book.pk %}">
           <span class="fa fa-pencil"></span>
         </button>
         <!-- Delete book buttons -->
-        <button type="button" class="bs-modal delete-book btn btn-sm btn-danger" data-form-url="{% url 'delete_book' book.pk %}">
+        <button type="button" class="delete-book btn btn-sm btn-danger" data-form-url="{% url 'delete_book' book.pk %}">
           <span class="fa fa-trash"></span>
         </button>
       </td>

examples/templates/examples/create_book.html

@@ -32,7 +32,7 @@ <h3 class="modal-title">Create Book</h3>
   </div>
 
   <div class="modal-footer">
-    <button type="button" class="submit-btn btn btn-primary">Create</button>
+    <button type="submit" class="btn btn-primary">Create</button>
   </div>
 
 </form>

examples/templates/examples/filter_book.html

@@ -34,8 +34,7 @@ <h3 class="modal-title">Filter Books</h3>
 
 
   <div class="modal-footer">
-    <input type="submit" class="btn btn-primary" name="clear" value="Clear"/>
-    <button type="button" class="submit-btn btn btn-primary">Filter</button>
+    <button type="submit" class="btn btn-primary">Filter</button>
   </div>
 
 </form>

examples/templates/examples/login.html

@@ -32,7 +32,7 @@ <h3 class="modal-title">Log in</h3>
   </div>
 
   <div class="modal-footer">
-    <button type="button" class="submit-btn btn btn-primary" formnovalidate="formnovalidate">Log in</button>
+    <button type="submit" class="btn btn-primary" formnovalidate="formnovalidate">Log in</button>
   </div>
 
 </form>

examples/templates/examples/signup.html

@@ -32,7 +32,7 @@ <h3 class="modal-title">Sign up</h3>
   </div>
 
   <div class="modal-footer">
-    <button type="button" class="submit-btn btn btn-primary" formnovalidate="formnovalidate">Sign up</button>
+    <button type="submit" class="btn btn-primary" formnovalidate="formnovalidate">Sign up</button>
   </div>
 
 </form>

examples/templates/examples/update_book.html

@@ -32,7 +32,7 @@ <h3 class="modal-title">Update Book</h3>
   </div>
 
   <div class="modal-footer">
-    <button type="button" class="submit-btn btn btn-primary">Update</button>
+    <button type="submit" class="btn btn-primary">Update</button>
   </div>
 
 </form>

examples/templates/index.html

@@ -48,11 +48,14 @@ <h4>
             <button id="create-book-async" class="btn btn-primary" type="button" name="button">
               <span class="fa fa-plus mr-2"></span>Create book - Asynchronous
             </button>
-            <button id="filter-book" class="bs-modal btn btn-primary" type="button" name="button" data-form-url="{% url 'filter_book' %}">
+            <button id="filter-book" class="filter-book btn btn-primary" type="button" name="button" data-form-url="{% url 'filter_book' %}">
               <span class="fa fa-filter mr-2"></span>Filter books
             </button>
           </div>
           <div class="col-12 mb-3">
+          {% if 'type' in request.GET %}
+            <p class="filtered-books">Filtered books.</p>
+          {% endif %}
             {% if books %}
               {% include "_books_table.html" %}
             {% else %}
@@ -69,24 +72,17 @@ <h4>
 {% block extrascripts %}
   <script type="text/javascript">
       $(function () {
-          // Log in & Sign up buttons
-          // The formURL is given explicitly
+          // Login
           $("#login-btn").modalForm({
             formURL: "{% url 'login' %}"
           });
 
+          //  Signup
           $("#signup-btn").modalForm({
             formURL: "{% url 'signup' %}"
           });
 
-          // Create book button opens modal with id="create-modal"
-          /* 
-          $("#create-book").modalForm({
-            formURL: "{% url 'create_book' %}",
-            modalID: "#create-modal"
-          });
-          */
-
+          // Create book synchronous
           function createBookSyncModalForm() {
             $("#create-book-sync").modalForm({
                 formURL: "{% url 'create_book' %}",
@@ -95,6 +91,8 @@ <h4>
           }
           createBookSyncModalForm();
 
+          // Create book asynchronous button
+          // message
           var asyncSuccessMessageCreate = [
             "<div ",
             "style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
@@ -109,6 +107,26 @@ <h4>
             "<\/script>"
           ].join("");
 
+          // modal form
+          function createBookAsyncModalForm() {
+            $("#create-book-async").modalForm({
+                formURL: "{% url 'create_book' %}",
+                modalID: "#create-modal",
+                asyncUpdate: true,
+                asyncSettings: {
+                  closeOnSubmit: true,
+                  successMessage: asyncSuccessMessageCreate,
+                  dataUrl: "books/",
+                  dataElementId: "#books-table",
+                  dataKey: "table",
+                  addModalFormFunction: updateBookModalForm
+                }
+            });
+          }
+          createBookAsyncModalForm();
+
+          // Update book asynchronous button
+          // message
           var asyncSuccessMessageUpdate = [
             "<div ",
             "style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
@@ -123,6 +141,7 @@ <h4>
             "<\/script>"
           ].join("");
 
+          // modal form
           function updateBookModalForm() {
             $(".update-book").each(function () {
               $(this).modalForm({
@@ -141,26 +160,18 @@ <h4>
           }
           updateBookModalForm();
 
-          function createBookAsyncModalForm() {
-            $("#create-book-async").modalForm({
-                formURL: "{% url 'create_book' %}",
-                modalID: "#create-modal",
-                asyncUpdate: true,
-                asyncSettings: {
-                  closeOnSubmit: true,
-                  successMessage: asyncSuccessMessageCreate,
-                  dataUrl: "books/",
-                  dataElementId: "#books-table",
-                  dataKey: "table",
-                  addModalFormFunction: updateBookModalForm
-                }
-            });
-          }
-          createBookAsyncModalForm();
+          // Delete book buttons - formURL is retrieved from the data of the element
+          $(".delete-book").each(function () {
+              $(this).modalForm({formURL: $(this).data("form-url"), isDeleteForm: true});
+          });
+
+          // Read book buttons
+          $(".read-book").each(function () {
+              $(this).modalForm({formURL: $(this).data("form-url")});
+          });
 
-          // Read and Delete book buttons open modal with id="modal"
-          // The formURL is retrieved from the data of the element
-          $(".bs-modal").each(function () {
+          // Filter books button
+          $("#filter-book").each(function () {
               $(this).modalForm({formURL: $(this).data("form-url")});
           });