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';
+import { getElements, scrollTo } 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();
-    }
-  }
-}
 
 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

@@ -45,10 +45,10 @@ Context:
                   </div>
                   <div class="form-group">
                     <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 %}
-                          <button type="submit" class="btn btn-primary">Submit</button>
                     </div>
                   </div>
                 </form>

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

@@ -3,32 +3,23 @@
 
 {% 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>
+            <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

@@ -11,11 +11,11 @@
         {% 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 %}
-                <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>

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 %}