Fixes #9437: Standardize form submission buttons and behavior when using enter key

docs/release-notes/version-3.2.md

@@ -9,6 +9,7 @@
 
 ### Bug Fixes
 
+* [#9437](https://github.com/netbox-community/netbox/issues/9437) - Standardize form submission buttons and behavior when using enter key
 * [#9634](https://github.com/netbox-community/netbox/issues/9634) - Fix image URLs in rack elevations when using external storage
 * [#9715](https://github.com/netbox-community/netbox/issues/9715) - Fix `SOCIAL_AUTH_PIPELINE` config parameter not taking effect
 * [#9754](https://github.com/netbox-community/netbox/issues/9754) - Fix regression introduced by #9632

netbox/project-static/src/forms/elements.ts

@@ -1,32 +1,4 @@
-import { getElements, scrollTo, isTruthy } from '../util';
-
-/**
- * When editing an object, it is sometimes desirable to customize the form action *without*
- * overriding the form's `submit` event. For example, the 'Save & Continue' button. We don't want
- * to use the `formaction` attribute on that element because it will be included on the form even
- * if the button isn't clicked.
- *
- * @example
- * ```html
- * <button type="button" return-url="/special-url/">
- *   Save & Continue
- * </button>
- * ```
- *
- * @param event Click event.
- */
-function handleSubmitWithReturnUrl(event: MouseEvent): void {
-  const element = event.target as HTMLElement;
-  if (element.tagName === 'BUTTON') {
-    const button = element as HTMLButtonElement;
-    const action = button.getAttribute('return-url');
-    const form = button.form;
-    if (form !== null && isTruthy(action)) {
-      form.action = action;
-      form.submit();
-    }
-  }
-}
+import { getElements, scrollTo } from '../util';
 
 function handleFormSubmit(event: Event, form: HTMLFormElement): void {
   // Track the names of each invalid field.
@@ -57,15 +29,6 @@ function handleFormSubmit(event: Event, form: HTMLFormElement): void {
   }
 }
 
-/**
- * Attach event listeners to form buttons with the `return-url` attribute present.
- */
-function initReturnUrlSubmitButtons(): void {
-  for (const button of getElements<HTMLButtonElement>('button[return-url]')) {
-    button.addEventListener('click', handleSubmitWithReturnUrl);
-  }
-}
-
 /**
  * Attach an event listener to each form's submitter (button[type=submit]). When called, the
  * callback checks the validity of each form field and adds the appropriate Bootstrap CSS class
@@ -82,5 +45,4 @@ export function initFormElements(): void {
       submitter.addEventListener('click', (event: Event) => handleFormSubmit(event, form));
     }
   }
-  initReturnUrlSubmitButtons();
 }

netbox/templates/circuits/circuittermination_edit.html

@@ -48,17 +48,3 @@
     {% render_field form.description %}
   </div>
 {% endblock %}
-
-{# Override buttons block, 'Create & Add Another'/'_addanother' is not needed on a circuit. #}
-{% block buttons %}
-    <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
-    {% if object.pk %}
-        <button type="submit" name="_update" class="btn btn-primary">
-            Save
-        </button>
-    {% else %}
-        <button type="submit" name="_create" class="btn btn-primary">
-            Create
-        </button>
-    {% endif %}
-{% endblock buttons %}

netbox/templates/dcim/interface_edit.html

@@ -91,14 +91,3 @@
       </div>
     {% endif %}
 {% endblock %}
-
-{% block buttons %}
-    <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
-    {% if object.pk %}
-        <button type="button" return-url="?return_url={% url 'dcim:interface_edit' pk=object.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
-        <button type="submit" name="_update" class="btn btn-primary">Save</button>
-    {% else %}
-        <button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>
-        <button type="submit" name="_create" class="btn btn-primary">Create</button>
-    {% endif %}
-{% endblock %}

netbox/templates/generic/bulk_delete.html

@@ -36,8 +36,8 @@ Context:
           {{ field }}
         {% endfor %}
         <div class="text-end">
-          <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
           <button type="submit" name="_confirm" class="btn btn-danger">Delete {{ table.rows|length }} {{ model|meta:"verbose_name_plural" }}</button>
+          <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
         </div>
       </form>
     </div>

netbox/templates/generic/bulk_edit.html

@@ -118,8 +118,8 @@ Context:
               </div>
 
               <div class="text-end">
-                <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
                 <button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
+                <a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
               </div>
             </div>
           </div>

netbox/templates/generic/bulk_import.html

@@ -44,12 +44,12 @@ Context:
                     </div>
                   </div>
                   <div class="form-group">
-                      <div class="col col-md-12 text-end">
-                          {% if return_url %}
-                              <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
-                          {% endif %}
-                          <button type="submit" class="btn btn-primary">Submit</button>
-                      </div>
+                    <div class="col col-md-12 text-end">
+                      <button type="submit" class="btn btn-primary">Submit</button>
+                      {% if return_url %}
+                        <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+                      {% endif %}
+                    </div>
                   </div>
                 </form>
                 {% if fields %}

netbox/templates/generic/bulk_remove.html

@@ -23,8 +23,8 @@
       {{ field }}
     {% endfor %}
     <div class="text-center">
-      <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
       <button type="submit" name="_confirm" class="btn btn-danger">Delete these {{ table.rows|length }} {{ obj_type_plural }}</button>
+      <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
     </div>
   </form>
 </div>

netbox/templates/generic/bulk_rename.html

@@ -34,11 +34,11 @@
                 </div>
             </div>
             <div class="col col-md-12 my-3 text-end">
-                <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
                 <button type="submit" name="_preview" class="btn btn-primary">Preview</button>
                 {% if '_preview' in request.POST and not form.errors %}
                     <button type="submit" name="_apply" class="btn btn-primary">Apply</button>
                 {% endif %}
+                <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
             </div>
         </form>
     </div>

netbox/templates/generic/confirmation_form.html

@@ -2,33 +2,24 @@
 {% load form_helpers %}
 
 {% block content %}
-    <div class="row mt-5">
-
-        <div class="col col-md-6 offset-md-3">
-
-            <form action="" method="post" class="form">
-                {% csrf_token %}
-                {% for field in form.hidden_fields %}
-                    {{ field }}
-                {% endfor %}
-
-                <div class="card border-danger">
-                    <h5 class="card-header">{% block confirmation_title %}{% endblock %}</h5>
-            
-                    <div class="card-body">
-                        {% block message %}<p>Are you sure?</p>{% endblock %}
-                    </div>
-
-                    <div class="card-footer text-end">
-                        <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
-                        <button type="submit" name="_confirm" class="btn btn-{{ button_class|default:"danger" }}">Confirm</button>
-                    </div>
-
-                </div>
-
-            </form>
-
+  <div class="row mt-5">
+    <div class="col col-md-6 offset-md-3">
+      <form action="" method="post" class="form">
+        {% csrf_token %}
+        {% for field in form.hidden_fields %}
+          {{ field }}
+        {% endfor %}
+        <div class="card border-danger">
+          <h5 class="card-header">{% block confirmation_title %}{% endblock %}</h5>
+          <div class="card-body">
+            {% block message %}<p>Are you sure?</p>{% endblock %}
+          </div>
+          <div class="card-footer text-end">
+            <button type="submit" name="_confirm" class="btn btn-{{ button_class|default:"danger" }}">Confirm</button>
+            <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
+          </div>
         </div>
-
+      </form>
     </div>
+  </div>
 {% endblock %}

netbox/templates/generic/object_edit.html

@@ -94,19 +94,19 @@ Context:
 
         <div class="text-end my-3">
           {% block buttons %}
-            <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
             {% if object.pk %}
               <button type="submit" name="_update" class="btn btn-primary">
                 Save
               </button>
             {% else %}
-              <button type="submit" name="_addanother" class="btn btn-outline-primary">
-                Create & Add Another
-              </button>
               <button type="submit" name="_create" class="btn btn-primary">
                 Create
               </button>
+              <button type="submit" name="_addanother" class="btn btn-outline-primary">
+                Create & Add Another
+              </button>
             {% endif %}
+            <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
           {% endblock buttons %}
         </div>
       </form>

netbox/templates/generic/object_import.html

@@ -5,19 +5,19 @@
 {% block title %}{{ obj_type|bettertitle }} Import{% endblock %}
 
 {% block content %}
-<div class="row mb-3">
-	<div class="col col-md-12 col-xl-8 offset-xl-2">
-		<form action="" method="post" class="form form-horizontal">
-		    {% csrf_token %}
-		    {% render_form form %}
-            <div class="col col-md-12 text-end">
-                {% if return_url %}
-                    <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
-                {% endif %}
-                <button type="submit" name="_addanother" class="btn btn-outline-primary">Submit & Import Another</button>
-                <button type="submit" name="_create" class="btn btn-primary">Submit</button>
-            </div>
-		</form>
-	</div>
-</div>
+  <div class="row mb-3">
+    <div class="col col-md-12 col-xl-8 offset-xl-2">
+      <form action="" method="post" class="form form-horizontal">
+        {% csrf_token %}
+        {% render_form form %}
+        <div class="col col-md-12 text-end">
+          <button type="submit" name="_create" class="btn btn-primary">Submit</button>
+          <button type="submit" name="_addanother" class="btn btn-outline-primary">Submit & Import Another</button>
+          {% if return_url %}
+            <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
+          {% endif %}
+        </div>
+      </form>
+    </div>
+  </div>
 {% endblock content %}

netbox/templates/virtualization/vminterface_edit.html

@@ -55,14 +55,3 @@
       </div>
     {% endif %}
 {% endblock %}
-
-{% block buttons %}
-  <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
-  {% if object.pk %}
-    <button type="button" return-url="?return_url={% url 'virtualization:vminterface_edit' pk=object.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
-    <button type="submit" name="_update" class="btn btn-primary">Save</button>
-  {% else %}
-    <button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>
-    <button type="submit" name="_create" class="btn btn-primary">Create</button>
-  {% endif %}
-{% endblock %}