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

<div
  class="modal fade"
  tabindex="-1"
  id="evaluate_model_modal"
  role="dialog"
  aria-labelledby="evaluate_model_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">Evaluate Model</h4>
      </div>
      <div class="modal-body">
        <form
          id="evaluate_model_form"
          accept-charset="UTF-8"
          action="{{ current_object.url }}"
          data-remote="true"
          method="post"
        >
          {% csrf_token %}
          <div class="jumbotron">
            For evaluation, you need to select the packages you want to use.
            While the model is evaluating, you can use the model for
            predictions.
          </div>
          <!-- Evaluation Packages -->
          <label for="model-evaluation-packages">Evaluation Packages</label>
          <select
            id="model-evaluation-packages"
            name="model-evaluation-packages"
            data-actions-box="true"
            class="form-control"
            multiple
            data-width="100%"
          >
            <option disabled>Reviewed Packages</option>
            {% for obj in meta.readable_packages %}
              {% if obj.reviewed %}
                <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
              {% endif %}
            {% endfor %}

            <option disabled>Unreviewed Packages</option>
            {% for obj in meta.readable_packages %}
              {% if not obj.reviewed %}
                <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
              {% endif %}
            {% endfor %}
          </select>

          <!-- Eval Type -->
          <label for="model-evaluation-type">Evaluation Type</label>
          <select
            id="model-evaluation-type"
            name="model-evaluation-type"
            class="form-control"
          >
            <option disabled selected>Select evaluation type</option>
            <option value="sg">Single Generation</option>
            <option value="mg">Multiple Generations</option>
          </select>

          <input type="hidden" name="hidden" value="evaluate" />
        </form>
      </div>
      <div class="modal-footer">
        <a id="evaluate_model_form_submit" class="btn btn-primary" href="#"
          >Evaluate</a
        >
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    $("#model-evaluation-packages").selectpicker();

    $("#evaluate_model_form_submit").on("click", function (e) {
      e.preventDefault();
      $("#evaluate_model_form").submit();
    });
  });
</script>