|
20 | 20 | {% for error in field.errors %} |
21 | 21 | <p class="help is-danger has-text-weight-medium">{{ error }}</p> |
22 | 22 | {% endfor %} |
23 | | - {% endif %} |
| 23 | + {% endif %} |
24 | 24 | </div> |
25 | 25 | {% elif field.field.widget|klass == 'ClearableFileInput' %} |
26 | 26 | <div class="file has-name"> |
|
37 | 37 | </span> |
38 | 38 | <span class="file-label"> {{ field.label }} </span> |
39 | 39 | </span> |
40 | | - <span class="file-name" id="filename"> Choose a file… </span> |
| 40 | + <span class="file-name" id="filename-{{ field.html_name }}"> Choose a file… </span> |
41 | 41 | </label> |
42 | 42 | </div> |
43 | 43 | {% if field.errors %} |
44 | 44 | {% for error in field.errors %} |
45 | 45 | <p class="help is-danger has-text-weight-medium">{{ error }}</p> |
46 | 46 | {% endfor %} |
47 | | - {% endif %} |
| 47 | + {% endif %} |
48 | 48 | {% elif field.field.widget|klass == 'Textarea' %} |
49 | 49 | <div class="field"> |
50 | 50 | <label class="label">{{ field.label_tag }}</label> |
51 | 51 | <div class="control"> |
52 | | - <textarea |
53 | | - class="textarea" |
54 | | - placeholder="{{ field.help_text | safe }}" |
| 52 | + <textarea |
| 53 | + class="textarea" |
| 54 | + placeholder="{{ field.help_text | safe }}" |
55 | 55 | id="{{ field.html_name }}" |
56 | 56 | name="{{ field.html_name }}" |
57 | 57 | >{{ field.value|default_if_none:'' }}</textarea> |
58 | 58 | </div> |
59 | 59 | {% if field.errors %} |
60 | 60 | <p class="help is-danger">{{ field.errors }}</p> |
61 | | - {% endif %} |
| 61 | + {% endif %} |
62 | 62 | </div> |
63 | 63 | {% elif field.field.widget|klass == 'TextInput' or field.field.widget|klass == 'URLInput' %} |
64 | 64 | <div class="field"> |
65 | 65 | <label class="label">{{ field.label_tag }}</label> |
66 | 66 | <div class="control"> |
67 | | - <input class="input" type="text" |
68 | | - placeholder="{{ field.help_text | safe }}" |
| 67 | + <input class="input" type="text" |
| 68 | + placeholder="{{ field.help_text | safe }}" |
69 | 69 | id="{{ field.html_name }}" |
70 | 70 | name="{{ field.html_name }}" |
71 | 71 | value="{{ field.value|default_if_none:'' }}" |
|
75 | 75 | {% for error in field.errors %} |
76 | 76 | <p class="help is-danger has-text-weight-medium">{{ error }}</p> |
77 | 77 | {% endfor %} |
78 | | - {% endif %} |
| 78 | + {% endif %} |
79 | 79 | </div> |
80 | 80 | {% elif field.field.widget|klass == 'EmailInput' %} |
81 | 81 | <div class="field"> |
82 | 82 | <label class="label">{{ field.label_tag }}</label> |
83 | 83 | <div class="control has-icons-left"> |
84 | | - <input class="input" type="email" |
| 84 | + <input class="input" type="email" |
85 | 85 | id="{{ field.html_name }}" |
86 | 86 | name="{{ field.html_name }}" |
87 | 87 | value="{{ field.value|default_if_none:'' }}" |
|
94 | 94 | {% for error in field.errors %} |
95 | 95 | <p class="help is-danger has-text-weight-medium">{{ error }}</p> |
96 | 96 | {% endfor %} |
97 | | - {% endif %} |
| 97 | + {% endif %} |
98 | 98 | </div> |
99 | 99 | {% elif field.field.widget|klass == 'Select' %} |
100 | 100 | <div class="field"> |
|
114 | 114 | {% for error in field.errors %} |
115 | 115 | <p class="help is-danger has-text-weight-medium">{{ error }}</p> |
116 | 116 | {% endfor %} |
117 | | - {% endif %} |
| 117 | + {% endif %} |
118 | 118 | </div> |
119 | | - {% else %} |
| 119 | + {% else %} |
120 | 120 | <div class="field"> |
121 | 121 | <label class="label">{{ field.label_tag }}</label> |
122 | 122 | <div class="control"> |
|
126 | 126 | {% for error in field.errors %} |
127 | 127 | <p class="help is-danger has-text-weight-medium">{{ error }}</p> |
128 | 128 | {% endfor %} |
129 | | - {% endif %} |
| 129 | + {% endif %} |
130 | 130 | </div> |
131 | 131 | {% endif %} |
132 | 132 | <div class="help has-text-grey">{{ field.help_text | safe }}</div> |
|
136 | 136 |
|
137 | 137 | <script> |
138 | 138 | document.addEventListener("DOMContentLoaded", function () { |
139 | | - const fileInput = document.querySelector(".file-input"); |
140 | | - const fileName = document.querySelector("#filename"); |
| 139 | + const fileInputs = document.querySelectorAll(".file-input"); |
| 140 | + |
| 141 | + fileInputs.forEach(function (fileInput) { |
| 142 | + fileInput.addEventListener("change", function () { |
| 143 | + const fieldName = fileInput.getAttribute("name"); |
| 144 | + const fileName = document.querySelector("#filename-" + fieldName); |
141 | 145 |
|
142 | | - fileInput.addEventListener("change", function () { |
143 | | - if (fileInput.files.length > 0) { |
144 | | - fileName.textContent = fileInput.files[0].name; |
145 | | - } else { |
146 | | - fileName.textContent = "Choose a file…"; |
147 | | - } |
| 146 | + if (fileName) { |
| 147 | + if (fileInput.files.length > 0) { |
| 148 | + fileName.textContent = fileInput.files[0].name; |
| 149 | + } else { |
| 150 | + fileName.textContent = "Choose a file…"; |
| 151 | + } |
| 152 | + } |
| 153 | + }); |
148 | 154 | }); |
149 | 155 | }); |
150 | 156 | </script> |
0 commit comments