enviPy-bayer/templates/modals/objects/generic_set_external_reference_modal.html

{% load static %}
<!-- Delete Object -->
<div id="generic_set_external_reference_modal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Add External References</h3>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form
          id="generic-set-external-reference-modal-form"
          accept-charset="UTF-8"
          action="{{ current_object.url }}"
          data-remote="true"
          method="post"
        >
          {% csrf_token %}
          <label for="database-select"
            >Select the Database you want to attach an External Reference
            for</label
          >
          <select
            id="database-select"
            name="selected-database"
            data-actions-box="true"
            class="form-control"
            data-width="100%"
          >
            <option disabled selected>Select Database</option>
            {% for entity, databases in meta.external_databases.items %}
              {% if entity == object_type %}
                {% for db in databases %}
                  <option
                    id="db-select-{{ db.database.pk }}"
                    data-input-placeholder="{{ db.placeholder }}"
                    value="{{ db.database.id }}"
                  >
                    {{ db.database.name|safe }}
                  </option>
                  `
                {% endfor %}
              {% endif %}
            {% endfor %}
          </select>
          <p></p>
          <div id="input-div" style="display: none">
            <label for="identifier">The reference</label>
            <input
              type="text"
              id="identifier"
              name="identifier"
              class="form-control"
              placeholder=""
            />
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
        <button
          type="button"
          class="btn btn-primary"
          id="generic-set-external-reference-modal-form-submit"
        >
          Submit
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    $("#database-select").on("change", function () {
      let selected = $(this).val();
      $("#identifier").attr(
        "placeholder",
        $("#db-select-" + selected).data("input-placeholder"),
      );
      $("#input-div").show();
    });

    $("#generic-set-external-reference-modal-form-submit").click(function (e) {
      e.preventDefault();
      $("#generic-set-external-reference-modal-form").submit();
    });
  });
</script>