如何在JavaScript中呈现局部

Question

I have two forms on a page which have mostly the same inputs. I have tabs on the screen that switch between each form. However when i submit one of the forms, i recieve a 'cant be blank' on the same input fields on the other form. I understand why this is happening. I tried to stop this by using a if statement to only render either form depending on which tab is clicked. This did not work as you cant target html id's in an if statement. Then i tried to use javascript which used a 'show' and 'hide' methods depending on which tab was clicked which also didnt work as i believe that that even though the form is still hidden, it is still actually there. Now im not sure what to do. My only idea is to render the forms within javascript?

 <input id="tab1" type="radio" name="tabs" checked>
  <label class="label-header" for="tab1"> UK Address</label>

  <input id="tab2" type="radio" name="tabs">
  <label class="label-header"for="tab2"> International Address </label>

  <!-- <section id="content1"> -->
    <%# if  %>
        <%= f.simple_fields_for :address do |fields| %>
        <%# raise %>
            <section id="content1">
                <%= render "address/fields", fields: fields, addressable: addressable %>
            </section>
        <% end %>
      <%# else %>
        <%= f.simple_fields_for :address do |fields| %>
            <section id="content2">
                <%= render "address/international_fields", fields: fields, addressable: addressable %>
            </section>
        <% end %>


$(document).ready(function() {
  var uk_address = $('#content1');
  var international_address = $('#content2');
  $('#tab1').on('click', function() {
    uk_address.show();
    international_address.hide();
  });

  $('#tab2').on('click', function() {
    uk_address.hide();
    international_address.show();
  });

});

Answer 1

You should be able to enable/disable the items inside the javascript you have with this modification:

 $(document).ready(function() {
   var uk_address = $('#content1');
   var international_address = $('#content2');
   $('#tab1').on('click', function() {
     uk_address.removeAttr("disabled").show();
     international_address.attr("disabled", "disabled").hide();
   });

   $('#tab2').on('click', function() {
     uk_address.attr("disabled", "disabled").hide();
     international_address.removeAttr("disabled").show();
   });

 });