From b0a63fcafcaf782044a362ecc03536494234bdf0 Mon Sep 17 00:00:00 2001
From: Ping Lin <limphoebe8@gmail.com>
Date: Fri, 8 Aug 2025 15:35:10 +0100
Subject: [PATCH] =?UTF-8?q?Hide=20=E2=80=98Custom=20page=20order=20input?=
 =?UTF-8?q?=E2=80=99=20section=20when=20not=20in=20Custom=20mode=20on=20ht?=
 =?UTF-8?q?tps://stirlingpdf.io/pdf-organizer.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/templates/pdf-organizer.html    | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/core/src/main/resources/templates/pdf-organizer.html b/app/core/src/main/resources/templates/pdf-organizer.html
index 746a6bafd..8e2937eea 100644
--- a/app/core/src/main/resources/templates/pdf-organizer.html
+++ b/app/core/src/main/resources/templates/pdf-organizer.html
@@ -42,22 +42,29 @@
                   <option value="REMOVE_FIRST_AND_LAST" th:text="#{pdfOrganiser.mode.9}">Remove First and Last</option>
                 </select>
               </div>
-              <div class="mb-3">
+              <div class="mb-3"  id="pageToOrganizeSection">
                 <label for="pageOrder" th:text="#{pageOrderPrompt}"></label>
                 <input type="text" class="form-control" id="pageOrder" name="pageNumbers"
-                  th:placeholder="#{pdfOrganiser.placeholder}" required>
+                  th:placeholder="#{pdfOrganiser.placeholder}">
               </div>
               <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{pdfOrganiser.submit}"></button>
             </form>
             <script>
-              document.getElementById('customMode').addEventListener('change', function () {
-                var pageOrderInput = document.getElementById('pageOrder');
-                if (this.value === "" || this.value === "DUPLICATE") {
-                  pageOrderInput.disabled = false;
+              // Only display the page input field when split mode is custom.
+              function togglePageInput() {
+                const mode = document.getElementById('customMode').value;
+                const pageInputSection = document.getElementById('pageToOrganizeSection');
+                if (mode === "") {
+                  pageInputSection.style.display = "block";
+                  document.getElementById('pageOrder').setAttribute("required", "true");
                 } else {
-                  pageOrderInput.disabled = true;
+                  pageInputSection.style.display = "none";
+                  document.getElementById('pageOrder').removeAttribute("required");
                 }
-              });
+              }
+
+              document.getElementById('customMode').addEventListener('change', togglePageInput);
+              window.addEventListener('DOMContentLoaded', togglePageInput);
             </script>
           </div>
         </div>