HTML coding in page edit

Omeka S
1

At the beginning I am not an English speaker so it may be hard to understand (or not). Sorry.
And this text is translated and posted at DeepL.

I went to the source edit screen in HTML Coding in Page Editing.
When I enter the code and press the save button, it changes to a different code than the one I wrote.
Sorry if this is an elementary problem.
Please let me know if you have a solution.

The code I entered:

<p><button class="btn btn-primary" id="submit">検索 Search</button></p>

<div id="dynamic-fields">&nbsp;</div>
<script>
      const params = [
        {
          label: "キーワード検索",
          type: "in",
          placeholder: "すべてのフィールドに対して検索します。",
          help: "部分一致",
        },
        {
          label: "登録資料名/ object name",
          property: 1,
          type: "in",
          placeholder: "",
          help: "部分一致",
        },
        {
          label: "登録資料番号/ accession number",
          property: 10,
          type: "eq",
          placeholder: "",
          help: "完全一致",
        },
        {
          label: "民族・グル―プ/ group",
          property: 202,
          type: "in",
          placeholder: "",
          help: "部分一致",
        },
        {
          label: "タイプ/ type",
          property: 8,
          type: "in",
          placeholder: "",
          help: "部分一致",
        },
      ];

      document.addEventListener("DOMContentLoaded", () => {
        initializeSearchForm();
        setupFormSubmission();
      });

      function initializeSearchForm() {
        const container = document.getElementById("dynamic-fields");
        params.forEach((param, index) => {
          container.appendChild(createFormGroup(param, index));
        });
      }

      function createFormGroup(param, index) {
        const formGroup = document.createElement("div");
        formGroup.className = "form-group mb-4";

        formGroup.appendChild(createLabel(param.label));
        formGroup.appendChild(
          createInput(
            `property[${index}][text]`,
            "form-control",
            param.placeholder
          )
        );
        formGroup.appendChild(createHelpText(param.help));
        formGroup.appendChild(
          createHiddenInput(`property[${index}][type]`, param.type)
        );

        if (param.property) {
          formGroup.appendChild(
            createHiddenInput(`property[${index}][property][]`, param.property)
          );
        }
        formGroup.appendChild(
          createHiddenInput(`property[${index}][joiner]`, "and")
        );

        return formGroup;
      }

      function createLabel(text) {
        const label = document.createElement("label");
        label.className = "mb-1";
        label.textContent = text;
        return label;
      }

      function createInput(name, className, placeholder) {
        const input = document.createElement("input");
        input.type = "text";
        input.name = name;
        input.className = className;
        input.placeholder = placeholder || "";
        return input;
      }

      function createHelpText(text) {
        const small = document.createElement("small");
        small.className = "form-text text-muted";
        small.textContent = text;
        return small;
      }

      function createHiddenInput(name, value) {
        const input = document.createElement("input");
        input.type = "hidden";
        input.name = name;
        input.value = value;
        return input;
      }

      function setupFormSubmission() {
        document.getElementById("submit").addEventListener("click", () => {
          const form = document.createElement("form");
          form.method = "GET";
          form.action = "../item";
          form.style.display = "none";

          Array.from(
            document.querySelectorAll("#dynamic-fields input")
          ).forEach((input) => {
            form.appendChild(input.cloneNode(true));
          });

          document.body.appendChild(form);
          form.submit();
        });
        document.body.addEventListener("keydown", (e) => {
          if (e.key == "Enter") {
            const form = document.createElement("form");
            form.method = "GET";
            form.action = "../item";
            form.style.display = "none";

            Array.from(
              document.querySelectorAll("#dynamic-fields input")
            ).forEach((input) => {
              form.appendChild(input.cloneNode(true));
            });

            document.body.appendChild(form);
            form.submit();
          }
        });
      }
    </script>

The code after it has been changed:

<p>検索 Search</p>

<div>&nbsp;</div>

Omeka s version is 4.1.1

Translated with DeepL.com (free version)

2

The HTML you set when editing a page will get filtered by default, and that filter will remove the script tag.

You can turn off the filtering in Settings → Security by unchecking the box “Use HTMLPurifier”. Note: that will turn off all HTML filtering, so be sure you’re comfortable trusting users and everyone who has access to add HTML if that’s what you decide to do.

Without disabling the HTMLPurifier, you could also put this code directly into your theme. For example, you could write a block template for the HTML block that includes the code you’re trying to use, then just choose that template for the block on the page when editing it.

3

Resolved!
Thank you very much!