Alternative way to handle js disabled users

app/views/form/_address_search_question.html.erb

@@ -1,28 +1,44 @@
-<% selected = @log.public_send(question.id) || "" %>
 <% answers = question.displayed_answer_options(@log, current_user).map { |key, value| OpenStruct.new(id: key, name: select_option_name(value), resource: value) } %>
 <%= render partial: "form/guidance/#{question.top_guidance_partial}" if question.top_guidance? %>
 
-<%= f.govuk_select(question.id.to_sym,
+<noscript>
-                   label: legend(question, page_header, conditional),
+  <%= govuk_notification_banner(title_text: "Important") do %>
-                   "data-controller": "address-search",
+    <p class="govuk-notification-banner__heading govuk-!-width-full" style="max-width: fit-content">
-                   "data-info": { search_url: address_search_url }.to_json,
+      This feature requires JavaScript to be enabled
-                   caption: caption(caption_text, page_header, conditional),
+    <p>
-                   hint: { text: question.hint_text&.html_safe }) do %>
+    <p style="max-width: fit-content">
-  <% if answers.any? %>
+      Searching for an address or UPRN requires JavaScript to be enabled in your browser. Please enter the address manually instead in the next question.
-    <% answers.each do |answer| %>
+    </p>
-      <option value="<%= answer.id %>"
+  <% end %>
-              data-synonyms="<%= answer_option_synonyms(answer.resource) %>"
+</noscript>
-              data-append="<%= answer_option_append(answer.resource) %>"
+
-              data-hint="<%= answer_option_hint(answer.resource) %>"
+<div id="js-enabled-content" style="display: none;">
-              <%= question.answer_selected?(@log, answer) ? "selected" : "" %>><%= answer.name || answer.resource %></option>
+  <%= f.govuk_select(question.id.to_sym,
+                     label: legend(question, page_header, conditional),
+                     "data-controller": "address-search",
+                     "data-info": { search_url: address_search_url }.to_json,
+                     caption: caption(caption_text, page_header, conditional),
+                     hint: { text: question.hint_text&.html_safe }) do %>
+    <% if answers.any? %>
+      <% answers.each do |answer| %>
+        <option value="<%= answer.id %>"
+                data-synonyms="<%= answer_option_synonyms(answer.resource) %>"
+                data-append="<%= answer_option_append(answer.resource) %>"
+                data-hint="<%= answer_option_hint(answer.resource) %>"
+                <%= question.answer_selected?(@log, answer) ? "selected" : "" %>><%= answer.name || answer.resource %></option>
+      <% end %>
+    <% else %>
+      <option value="" disabled>Javascript is disabled. Please enter the address manually.</option>
     <% end %>
-  <% else %>
-    <option value="" disabled>Javascript is disabled. Please enter the address manually.</option>
   <% end %>
-<% end %>
 
-<%= render partial: "form/guidance/#{question.bottom_guidance_partial}" if question.bottom_guidance? %>
+  <%= render partial: "form/guidance/#{question.bottom_guidance_partial}" if question.bottom_guidance? %>
+</div>
 
 <div class="govuk-button-group">
   <%= govuk_link_to "Enter the address manually instead", address_manual_input_path(@log.log_type, @log.id), class: "govuk-button govuk-button--secondary" %>
 </div>
+
+<script>
+  document.getElementById('js-enabled-content').style.display = 'block';
+</script>

app/views/form/page.html.erb

@@ -76,9 +76,13 @@
       <% end %>
 
       <% if @page.id == "address" %>
-        <div class="govuk-button-group">
+        <div  id="js-enabled-button" style="display: none;" class="govuk-button-group">
           <%= govuk_link_to "Clear address and search instead", address_search_input_path(@log.log_type, @log.id), class: "govuk-button govuk-button--secondary" %>
         </div>
+
+        <script>
+          document.getElementById('js-enabled-button').style.display = 'block';
+        </script>
       <% end %>
 
       <% if @pages_with_errors_count > 1 %>