Make alias form a bit more HTML friendly

apps/member/static/member/js/alias.js

@@ -1,37 +1,43 @@
+/**
+ * On form submit, create a new alias
+ */
+function create_alias (e) {
+    // Do not submit HTML form
+    e.preventDefault();
 
- $("#alias_input").on('keypress',function(e) {
+    // Get data and send to API
-     if(e.which == 13) {
+    const formData = new FormData(e.target);
-         $("#alias_submit").click();
+    $.post("/api/note/alias/", {
-     }
+        "csrfmiddlewaretoken": formData.get("csrfmiddlewaretoken"),
- });
+        "name": formData.get("name"),
-
+        "note": formData.get("note")
- function create_alias(note_id){
+    }).done(function () {
-     $.post("/api/note/alias/",
+        // Reload table
-            {
-                "csrfmiddlewaretoken": CSRF_TOKEN,
-                "name": $("#alias_input").val(),
-                "note": note_id
-            }
-     ).done(function(){
         $("#alias_table").load(location.pathname + " #alias_table");
         addMsg("Alias ajouté", "success");
-     })
+    }).fail(function (xhr, _textStatus, _error) {
-      .fail(function(xhr, textStatus, error){
         errMsg(xhr.responseJSON);
     });
 }
- // on click of button "delete" , call the API
+
+/**
+ * On click of "delete", delete the alias
+ * @param Integer button_id Alias id to remove
+ */
 function delete_button (button_id) {
     $.ajax({
         url: "/api/note/alias/" + button_id + "/",
         method: "DELETE",
         headers: { "X-CSRFTOKEN": CSRF_TOKEN }
-     })
+    }).done(function () {
-      .done(function(){
         addMsg('Alias supprimé', 'success');
         $("#alias_table").load(location.pathname + " #alias_table");
-      })
+    }).fail(function (xhr, _textStatus, _error) {
-      .fail(function(xhr,textStatus, error){
         errMsg(xhr.responseJSON);
     });
 }
+
+$(document).ready(function () {
+    // Attach event
+    document.getElementById("form_alias").addEventListener("submit", create_alias); 
+})

apps/member/templates/member/club_alias.html

@@ -6,15 +6,15 @@
     <h3 class="card-header text-center">
         {% trans "Note aliases" %}
     </h3>
-    <div class="card-body text-center">
+    <div class="card-body">
-        <div class="input-group">
+        <form class="input-group" method="POST" id="form_alias">
-            <input id="alias_input" type="text" class="form-control">
+            {% csrf_token %}
+            <input type="hidden" name="note" value="{{ object.note.pk }}">
+            <input type="text" name="name" class="form-control">
             <div class="input-group-append">
-                <button id="alias_submit" class="btn btn-success" onclick="create_alias({{ object.note.pk }})">
+                <input type="submit" class="btn btn-success" value="{% trans "Add" %}">
-                    {% trans "Add" %}
-                </button>
-            </div>
             </div>
+        </form>
     </div>
     {% render_table aliases %}
 </div>

apps/member/templates/member/profile_alias.html

@@ -6,15 +6,15 @@
     <h3 class="card-header text-center">
         {% trans "Note aliases" %}
     </h3>
-    <div class="card-body text-center">
+    <div class="card-body">
-        <div class="input-group">
+        <form class="input-group" method="POST" id="form_alias">
-            <input id="alias_input" type="text" class="form-control">
+            {% csrf_token %}
+            <input type="hidden" name="note" value="{{ object.note.pk }}">
+            <input type="text" name="name" class="form-control">
             <div class="input-group-append">
-                <button id="alias_submit" class="btn btn-success" onclick="create_alias({{ object.note.pk }})">
+                <input type="submit" class="btn btn-success" value="{% trans "Add" %}">
-                    {% trans "Add" %}
-                </button>
-            </div>
             </div>
+        </form>
     </div>
     {% render_table aliases %}
 </div>