[英]Rails: simple_form radio buttons
I want to use my custom button as radio buttons in a simple form in rails. 我想以简单的形式将我的自定义按钮用作单选按钮。 But I really don't know how to do this.
但是我真的不知道该怎么做。 I have a CSS code that gives me the button I want, but I think my simple form is wrong and I don't really know how to set up the javascrip...
我有一个CSS代码,可以给我想要的按钮,但是我认为我的简单表单是错误的,我真的不知道如何设置javascrip ...
Does someone know how I can get this right? 有人知道我该怎么做吗?
My simple form: 我的简单形式:
<%= simple_form_for(@post, :html => {:class => 'form-inline' }) do |f| %>
<%= f.input :link, label: false %>
<div class="button_group">
<%= f.input :type, as: :hidden %>
<a class="radio_button" data-value="0">ONE</a>
<a class="radio_button" data-value="1">TWO</a>
<a class="radio_button" data-value="2">THREE</a>
</div>
<%= button_tag(type: 'submit', class: "submit_button") do %>
SUBMIT!
<% end %>
<% end %>
CSS button: CSS按钮:
.radio_button {
color: white;
background-color:#828282;
font-family: 'Fjalla One', serif;
font-size: 10pt;
font-weight: 100;
text-align: center;
font-style: italic;
padding:0px 6px;
padding-right: 8px;
padding-top: 3px;
padding-bottom: 2px;
text-decoration:none;
border: none;
}.radio_button:hover {
background-color:#0E9EBB;
color: white;
text-decoration:none;
}.radio_button:active {
position:relative;
background-color:#0E9EBB;
top:1px;
}
See this commented code: 请参阅以下注释代码:
// select all next .radio_button elements to #post_type hidden input
$('#post_type ~ a.radio_button').
// execute code block on click
click( function(){
// this refers to clicked a element, you will get strings like: 0, 1, 2
var clickedValue = $(this).data('value');
// set clicked value in hidden input
$('#post_type').val(clickedValue);
} );
because when you have simple_form_for @something
and @something
if from class Something
, f.input :some_field
input is generated with id: something_some_field
, you can check you generated HTML to confirm. 因为当您拥有
simple_form_for @something
和@something
如果来自Something
类), f.input :some_field
输入是使用id: something_some_field
生成的,因此您可以检查生成的HTML以进行确认。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.