18 move between fields in form on return key (#35)

* wip: return moves to next element in form * wip: move js to bottom and wrap * wip: add document ready string * wip: adding js script for functionality * wip: fix next field logic * chore: cleaning changes * feat: add auto focus to checkout page * chore: delete personal testing files
drahamim · Feb 25, 2023 · bb087d1 · bb087d1
1 parent 444ed71
commit bb087d1
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 25 deletions.
diff --git a/src/invenflask/app.py b/src/invenflask/app.py
@@ -309,7 +309,7 @@ def checkout():
                     "Asset already checked out! Please check-in "
                     "before checking out")
                 return redirect(url_for('checkout'))
-    return render_template('checkout.html')
+    return render_template('checkout.html', load_checkout="onload='FocusOnLoad()'")
 
 
 @app.route('/checkin', methods=('GET', 'POST'))

diff --git a/src/invenflask/templates/base.html b/src/invenflask/templates/base.html
@@ -56,9 +56,11 @@
             </div>
         </div>
     </nav>
+    {% block head %} 
+    {% endblock %}
 </head>
 
-<body>
+<body {{ load_checkout|safe if load_checkout is not none else 'NONE'  }} >
     <hr>
     <div class="content">
         {% for message in get_flashed_messages() %}

diff --git a/src/invenflask/templates/checkout.html b/src/invenflask/templates/checkout.html
@@ -1,27 +1,54 @@
 {% extends 'base.html' %}
 
-{% block content %}
-    <h1>{% block title %} Checkout Asset {% endblock %}</h1>
-    <form method="POST">
-        <label for="title">ID</label>
-        <br>
-        <input type="text" name="id"
-               placeholder="Asset ID"
-               value="{{ request.form['id'] }}"></input>
-        <br>
-        <label for="title">Accessory</label>
-        <br>
-        <input type="text" name="accessoryid"
-                placeholder="Accessory ID"
-                value="{{ request.form['accessoryid'] }}"></input>
-        <br>
-        <label for="type">Staff ID</label>
-        <br>
-        <input type="text" name="staffid"
-                placeholder="Staff ID"
-                value=""{{ request.form[staffid]}}></input>
-        <br>
-        <button type="submit">Checkout</button>
-    </form>
+{% block head %}
+<script type="text/javascript">
+
+    // Focus on Staff ID on load
+    function FocusOnLoad() {
+        document.getElementById("staffid").focus();
+    }
+
+    // Focus on Radio ID on [enter]
+    function runScript(e) {
+        if (e.keyCode == 13) {
+            document.getElementById("radio").focus();
+            return false;
+        }
+    }
+
+    // Focus on Headset ID on [enter]
+    function runScript1(e) {
+        if (e.keyCode == 13) {
+            document.getElementById("accessory").focus();
+            return false;
+        }
+    }
+    theform.setAttribute("autocomplete", "off");
+</script>
+
 {% endblock %}
 
+{% block content %}
+
+<h1>{% block title %} Checkout Asset {% endblock %}</h1>
+<form method="POST" id='theform' , class="a-form">
+    <label for="type">Staff ID</label>
+    <br>
+    <input type="text" id="staffid" name="staffid" placeholder="Staff ID" value="{{ request.form[staffid]}}" autocomplete="off"
+        onkeypress="return runScript(event);"></input>
+    <br>
+
+    <label for="title">Asset ID</label>
+    <br>
+    <input type="text" id="radio" name="id" placeholder="Asset ID" value="{{ request.form['id'] }}" autocomplete="off"
+        onkeypress="return runScript1(event);"></input>
+    <br>
+
+    <label for="title">Accessory</label>
+    <br>
+    <input type="text" id="accessory" name="accessoryid" placeholder="Accessory ID"
+        value="{{ request.form['accessoryid'] }}" autocomplete="off"></input>
+    <br>
+    <button type="submit">Checkout</button>
+</form>
+{% endblock %}