diff --git a/hypha/apply/funds/templates/funds/application_base.html b/hypha/apply/funds/templates/funds/application_base.html
index 5e4ac8d337ecbcb4a3dc779ade8a9ae3e273605d..adb4ccce6a39d6073f57f167a39d03636b2bcfbe 100644
--- a/hypha/apply/funds/templates/funds/application_base.html
+++ b/hypha/apply/funds/templates/funds/application_base.html
@@ -42,7 +42,7 @@
{% for field in form %}
{% if field.field %}
- {% if field.field.only_input %}
+ {% if field.field.multi_input_field %}
{% include "forms/includes/multi_input_field.html" %}
{% else %}
{% include "forms/includes/field.html" with is_application=True %}
@@ -74,5 +74,5 @@
{% if not show_all_group_fields %}
<script src="{% static 'js/apply/form-group-toggle.js' %}"></script>
{% endif %}
- <script src="{% static 'js/apply/multi-input-add-button.js' %}"></script>
+ <script src="{% static 'js/apply/multi-input-fields.js' %}"></script>
{% endblock %}
diff --git a/hypha/apply/funds/templates/funds/applicationsubmission_form.html b/hypha/apply/funds/templates/funds/applicationsubmission_form.html
index 75a79a23e90f30aeeddc62b3f8ff73d999a7b394..5580b435da1ba738c4533c0dd3aa8b83f629566f 100644
--- a/hypha/apply/funds/templates/funds/applicationsubmission_form.html
+++ b/hypha/apply/funds/templates/funds/applicationsubmission_form.html
@@ -18,7 +18,7 @@
{% for field in form %}
{% if field.field %}
- {% if field.field.only_input %}
+ {% if field.field.multi_input_field %}
{% include "forms/includes/multi_input_field.html" %}
{% else %}
{% include "forms/includes/field.html" %}
@@ -39,5 +39,5 @@
{% block extra_js %}
<script src="{% static 'js/apply/list-input-files.js' %}"></script>
<script src="{% static 'js/apply/tinymce-word-count.js' %}"></script>
- <script src="{% static 'js/apply/multi-input-add-button.js' %}"></script>
+ <script src="{% static 'js/apply/multi-input-fields.js' %}"></script>
{% endblock %}
diff --git a/hypha/apply/stream_forms/models.py b/hypha/apply/stream_forms/models.py
index 4e92920be5783c159797aa2996deeb6672b6a3ea..348c10b96f9d1354b744ab8d1737fa1139f57166 100644
--- a/hypha/apply/stream_forms/models.py
+++ b/hypha/apply/stream_forms/models.py
@@ -68,17 +68,19 @@ class BaseStreamForm:
if isinstance(block, TextFieldBlock):
field_from_block.word_limit = struct_value.get('word_limit')
if isinstance(block, MultiInputCharFieldBlock):
- inputs = struct_value.get('number_of_inputs')
- for i in range(inputs):
- form_fields[struct_child.id + '_' + str(i)] = field_from_block
- if i != 0:
- field_from_block.only_input = True
+ number_of_inputs = struct_value.get('number_of_inputs')
+ for index in range(number_of_inputs):
+ form_fields[struct_child.id + '_' + str(index)] = field_from_block
+ field_from_block.multi_input_id = struct_child.id
+ if index == number_of_inputs - 1:
+ field_from_block.multi_input_add_button = True
+ field_from_block.visibility_index = 0
+ field_from_block.max_index = index
+ if index != 0:
+ field_from_block.multi_input_field = True
field_from_block.required = False
field_from_block.initial = None
- else:
- field_from_block.show_add_button = True
- field_from_block.number_of_inputs = inputs
- field_from_block = copy.copy(field_from_block)
+ field_from_block = copy.copy(field_from_block)
else:
form_fields[struct_child.id] = field_from_block
elif isinstance(block, GroupToggleEndBlock):
diff --git a/hypha/apply/templates/forms/includes/field.html b/hypha/apply/templates/forms/includes/field.html
index 90e147e7a5b29ff8981e494b21d4b88245e90099..4d341358010de71ace08f6ec77bfeb792d6dcdfc 100644
--- a/hypha/apply/templates/forms/includes/field.html
+++ b/hypha/apply/templates/forms/includes/field.html
@@ -1,4 +1,4 @@
-{% load util_tags static %}
+{% load util_tags %}
{% with widget_type=field|widget_type field_type=field|field_type %}
@@ -11,7 +11,6 @@
<span class="form__required">*</span>
{% endif %}
</label>
- {% elif field.field.only_input %}
{% else %}
<label for="{{ field.id_for_label }}" class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}>
<span>{{ field.label }}</span>
@@ -22,10 +21,7 @@
{% endif %}
{% if field.help_text %}
- {% if field.field.only_input %}
- {% else %}
<p class="form__help">{{ field.help_text|safe }}</p>
- {% endif %}
{% endif %}
{% if field.field.help_link %}
@@ -39,12 +35,8 @@
{% if widget_type == 'date_input' or widget_type == 'date_time_input' %}
<div class="{{ widget_type }}">
{% endif %}
-
- {{ field }}
- {% if field.field.show_add_button %}
- <button class="multi-input-add-btn" type="button">Add new item</button>
- {% endif %}
+ {{ field }}
{% if field.errors %}<h6 class="form__error-text">{{ field.errors.as_text|linebreaksbr }}</h6>{% endif %}
{% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %}
diff --git a/hypha/apply/templates/forms/includes/multi_input_field.html b/hypha/apply/templates/forms/includes/multi_input_field.html
index b946d9ce3440c7c239ea940b3ca4cef9b845ec4e..c934ff72cb4e7cfec111729aa84c1104a4989bcb 100644
--- a/hypha/apply/templates/forms/includes/multi_input_field.html
+++ b/hypha/apply/templates/forms/includes/multi_input_field.html
@@ -1,26 +1,7 @@
-<div class="form__item">
- {% if field.initial %}
- <div class="multi-input-field-show">
- {{ field }}
- </div>
- {% else %}
- <div class="multi-input-field-hidden">
- {{ field }}
- </div>
- {% endif %}
+<div class="form__item {% if not field.initial %}multi-input-field-hidden{% endif %}" data-multi-field-for="{{ field.field.multi_input_id }}">
+ {{ field }}
</div>
-{% block extra_css %}
-
-<style>
- .multi-input-field-hidden {
- display: none;
- }
- .multi-input-field-show {
- display: block;
- position: relative;
- padding-bottom: 22px;
- }
-</style>
-
-{% endblock %}
+{% if field.field.multi_input_add_button %}
+ <button class="link link--button link--button--narrow multi-input-add-btn" type="button" data-multi-field-id="{{ field.field.multi_input_id }}" data-multi-visibility-index="{{ field.field.visibility_index }}" data-multi-max-index="{{ field.field.max_index }}">Add new item</button>
+{% endif %}
diff --git a/hypha/static_src/src/javascript/apply/multi-input-add-button.js b/hypha/static_src/src/javascript/apply/multi-input-add-button.js
deleted file mode 100644
index 3310bb22fc5e2720bf9409e409675fbe7206fd32..0000000000000000000000000000000000000000
--- a/hypha/static_src/src/javascript/apply/multi-input-add-button.js
+++ /dev/null
@@ -1,11 +0,0 @@
-(function ($) {
-
- 'use strict';
-
- $('.multi-input-add-btn').click(function () {
- var allElements = document.getElementsByClassName('multi-input-field-hidden');
- if (allElements.hasOwnProperty(0)) {
- allElements[0].className = 'multi-input-field-show';
- }
- });
-})(jQuery);
diff --git a/hypha/static_src/src/javascript/apply/multi-input-fields.js b/hypha/static_src/src/javascript/apply/multi-input-fields.js
new file mode 100644
index 0000000000000000000000000000000000000000..da3e68e581f3213002f8e4e2d9fd9d911786cb57
--- /dev/null
+++ b/hypha/static_src/src/javascript/apply/multi-input-fields.js
@@ -0,0 +1,34 @@
+(function ($) {
+
+ 'use strict';
+
+ $('.multi-input-add-btn').each(function () {
+ var multiFieldId = $(this).data('multi-field-id');
+ const multiMaxIndex = $(this).data('multi-max-index');
+ var multiFieldInputs = $(".form__item[data-multi-field-for='" + multiFieldId + "']");
+ var multiFieldHiddenInput = $(".form__item.multi-input-field-hidden[data-multi-field-for='" + multiFieldId + "']");
+ var multiVisibilityIndex = multiFieldInputs.index(multiFieldHiddenInput);
+ if (multiVisibilityIndex >= 0) {
+ $(this).data('multi-visibility-index', multiVisibilityIndex);
+ }
+ else if (multiVisibilityIndex == -1) {
+ $(this).data('multi-visibility-index', multiMaxIndex);
+ }
+ });
+
+ $('.multi-input-add-btn').click(function () {
+ var multiFieldId = $(this).data('multi-field-id');
+ var multiVisibilityIndex = $(this).data('multi-visibility-index');
+ const multiMaxIndex = $(this).data('multi-max-index');
+
+ var multiShowIndex = multiVisibilityIndex + 1;
+ if (multiShowIndex <= multiMaxIndex) {
+ var multiShowId = 'id_' + multiFieldId + '_' + multiShowIndex;
+ $('#' + multiShowId).parent('.form__item').removeClass('multi-input-field-hidden');
+ $(this).data('multi-visibility-index', multiShowIndex);
+ }
+ else {
+ $(this).hide();
+ }
+ });
+})(jQuery);
diff --git a/hypha/static_src/src/sass/apply/components/_form.scss b/hypha/static_src/src/sass/apply/components/_form.scss
index 896eaba00a0f3bb8334a0f0d672714a6b1a21487..ca67df2d2eea3a764e3b8012543078b0cda4cb4a 100644
--- a/hypha/static_src/src/sass/apply/components/_form.scss
+++ b/hypha/static_src/src/sass/apply/components/_form.scss
@@ -549,6 +549,10 @@
max-width: 410px;
}
+ .multi-input-field-hidden {
+ display: none;
+ }
+
&__info-box {
background-color: $color--light-blue-90;
padding: 1rem;
diff --git a/hypha/static_src/src/sass/public/components/_form.scss b/hypha/static_src/src/sass/public/components/_form.scss
index 12f529d49f3043fa388614cd1b0430da8a19fd86..fe845c796f4dccb74c15c8038ac4b5219b0b2d43 100644
--- a/hypha/static_src/src/sass/public/components/_form.scss
+++ b/hypha/static_src/src/sass/public/components/_form.scss
@@ -364,4 +364,8 @@
border: 1px solid $color--mid-grey;
max-width: 410px;
}
+
+ .multi-input-field-hidden {
+ display: none;
+ }
}