Loop in a html form erb using ruby on rails

Question

I would like to build a form where the field name are type1, type2, type3 ...to type10, size1, size2, size3...to size10 etc.

I need to render them in a text field so that user can enter values for them. I do not want to manually key in each one of them because there must be some loop iterator I can use. I am aware of each method, but I just want to create a loop to loop through type1 to type10. How can I achieve this?

 <div class="field" id="type1">
    <%= f.label :type1 %>
    <%= f.select :type1 ,['text','barcode']%>
 </div> 

 <div class="field" id="type2">
    <%= f.label :type2 %>
    <%= f.select :type2 ,['text','barcode']%>
 </div> 

<div class="field" id="barcode_type1">
    <%= f.label :barcode_type1 %>
    <%= f.text_field :barcode_type1 %>
    </div> 

<div class="field" id="barcode_type2">
    <%= f.label :barcode_type2 %>
    <%= f.text_field :barcode_type2 %>
    </div> 

Any suggestions?

updates:

$(document).on('turbolinks:load', function(){


if ($('#type1').find('option:selected').val() != "barcode")
  {
   $('#barcode_type1').hide();
   $("#barcode_type1").attr('disabled','disabled');
  }
  else
  {
     $("#barcode_type1").removeAttr('disabled');
     $('#barcode_type1').show();
  }

$('#type1').on('change', function(){
  if ($('#type1').find('option:selected').val() != "barcode")
  {
   $('#barcode_type1').hide();
   $("#barcode_type1").attr('disabled','disabled');
  }
  else
  {
     $("#barcode_type1").removeAttr('disabled');
     $('#barcode_type1').show();
  }
})

});

If I set div id to id = "type1", the JS runs fine. If I use "type#{i}" using the loop, the JS stopeed working. Is there a solution for this. And I would also like to loop type 1 to type 10 and barcode_type1 to barcode_type10 in the Javascript too. Is there a way to do it efficiently.

Answer 1

You can use:

<% for i in 1..10 do %>
  <div class="field" id="type#{i}"
    <%= f.label "type#{i}" %>
    <%= f.select "type#{i}", ["text", "barcode"] %>
  </div>
<% end %>