enviPy-bayer/templates/modals/collections/new_scenario_modal.html

<div
  class="modal fade"
  tabindex="-1"
  id="new_scenario_modal"
  role="dialog"
  aria-labelledby="new_scenario_modal"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">New Scenario</h4>
      </div>
      <div class="modal-body">
        <form
          id="new_scenario_form"
          accept-charset="UTF-8"
          action="{{ meta.current_package.url }}/scenario"
          data-remote="true"
          method="post"
        >
          {% csrf_token %}
          <div class="jumbotron">
            Please enter name, description, and date of scenario. Date should be
            associated to the data, not the current date. For example, this
            could reflect the publishing date of a study. You can leave all
            fields but the name empty and fill them in later.
            <a
              target="_blank"
              href="https://wiki.envipath.org/index.php/scenario"
              role="button"
              >wiki &gt;&gt;</a
            >
          </div>
          <label for="scenario-name">Name</label>
          <input
            id="scenario-name"
            name="scenario-name"
            class="form-control"
            placeholder="Name"
          />
          <label for="scenario-description">Description</label>
          <input
            id="scenario-description"
            name="scenario-description"
            class="form-control"
            placeholder="Description"
          />
          <label id="dateField" for="dateYear">Date</label>
          <table>
            <tr>
              <th>
                <input
                  type="number"
                  id="dateYear"
                  name="scenario-date-year"
                  class="form-control"
                  placeholder="YYYY"
                  max="{% now "Y" %}"
                />
              </th>
              <th>
                <input
                  type="number"
                  id="dateMonth"
                  name="scenario-date-month"
                  min="1"
                  max="12"
                  class="form-control"
                  placeholder="MM"
                />
              </th>
              <th>
                <input
                  type="number"
                  id="dateDay"
                  name="scenario-date-day"
                  min="1"
                  max="31"
                  class="form-control"
                  placeholder="DD"
                />
              </th>
            </tr>
          </table>
          <label for="scenario-type">Scenario Type</label>
          <select
            id="scenario-type"
            name="scenario-type"
            class="form-control"
            data-width="100%"
          >
            <option value="empty" selected>Empty Scenario</option>
            {% for k, v in scenario_types.items %}
              <option value="{{ v.name }}">{{ k }}</option>
            {% endfor %}
          </select>

          {% for type in scenario_types.values %}
            <div id="{{ type.name }}-specific-inputs">
              {% for widget in type.widgets %}
                {{ widget|safe }}
              {% endfor %}
            </div>
          {% endfor %}
        </form>
      </div>
      <div class="modal-footer">
        <a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#"
          >Submit</a
        >
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    // Initially hide all "specific" forms
    $("div[id$='-specific-inputs']").each(function () {
      $(this).hide();
    });

    // On change hide all and show only selected
    $("#scenario-type").change(function () {
      $("div[id$='-specific-inputs']").each(function () {
        $(this).hide();
      });
      val = $("option:selected", this).val();
      $("#" + val + "-specific-inputs").show();
    });

    $("#new_scenario_modal_form_submit").on("click", function (e) {
      e.preventDefault();
      $("#new_scenario_form").submit();
    });

    var dateYear = document.getElementById("dateYear");
    dateYear.addEventListener("change", () => {
      console.log("Final value after editing:", dateYear.value);
      if (dateYear.value.length < 4) {
        dateYear.value = new Date().getFullYear();
      }
    });
  });
</script>