Question

I have the task to change the radio buttons within a form to more customizable tags that's easier to style.

I saw on other websites, that they use a form with "<a>" tags and additional name attribute like:

<a href="https://www.zalando.de/vero-moda-vmlua-t-shirt-basic-ve121d0nk-q11.html" name="pds.productviewcontent.colorlist.1">
</a>

My form looks like this:

<%= form_for :order, :url => populate_orders_path do |f| %>
<ul class="icons">
  <% colors = @product.variants.map(&:color).uniq %>
  <% colors.each do |color| %>
  <li>
    <%= radio_button_tag "color_id", color.id %>
    <%= label_tag color.presentation %>    
  </li>
  <% end %>
</ul>
<%= button_tag :class => 'large primary', :id => 'add-to-cart-button', :type => :submit do %>
<%= Spree.t(:add_to_cart) %>
<% end %>

When i replace the radio_button_tag and add tag to the form:

  <% colors.each do |color| %>
  <li class="color">
    <a href="" title="" name="color.id">
  </li>
  <% end %>

my form can't recognize which <li> the user has selected. I suppose i can add a css class="selected" per Javascript to <a>or<li>. But how can this information be submitted?

Answer 1

只要用户选择链接附加隐藏的<input>字段，您就可以模拟它，并将值分配给输入字段的value属性，无论您要提交什么。

  #on selecting this tag 
<a href="" title="" name="color">
 #append this to ur DOM
<input type="hidden" name="color" value="<%=color.id%>">

＃从下面的代码中了解一下

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <a href="#" title="" name="color" value = "<%color.id%>" id ="pickg" onclick ="myFunction(this)">color</a>

  <script>
    function myFunction(val) {
      var node = "<input type='hidden' name="+val.name+" value="+val.value+">"
      $('#'+val.id).after(node)
    }
</script>

Rails表单标记：如何从radio_button_tag更改为<a> tag?

1 个答案: