CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-4
StandardNerd
StandardNerd

Reputation: 4183

Rails Form Tag: how to change from radio_button_tag to an <a> tag?

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?

Upvotes: 0

Views: 599

Answers (1)

ashwintastic
ashwintastic

Reputation: 2312

You can simulate it, whenever a user selects a link append a hidden <input> field , and assign the value to the value attribute of the input field whatever you want to submit. 

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

# take some idea from below code 

  <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>

Upvotes: 2

Related Questions