我有一个使用form_for的表单,我想使用bootstrap-slider.js实现一个javascript滑块来获取值并更新事件的价格。
Javascript绝对不是我的强项,我希望看到我将如何将其包含在表单中。
其中一个规定的例子是:
###################
HTML
###################
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
###################
JavaScript
###################
$("#ex8").slider({
tooltip: 'always'
});
我目前的表格如下:
<%= form_for(@event) do |f| %>
<%= render 'shared/event_error_messages' %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :content %>
<%= f.text_field :content %>
<%= f.label :location %>
<%= f.text_field :location %>
<%= f.label :date%>mm/dd/yyyy
<%= f.text_field :date %>
<%= f.submit "Create event", class: "btn btn-large btn-primary" %>
<% end %>
我主要不了解如何在表单中实现javascript / html,然后将其传递给数据库中的事件价格。
答案 0 :(得分:6)
<%= f.text_field :price, id: 'ex8', type: 'text',
data: {'slider-id' => 'ex1Slider',
'slider-min' => '0',
'slider-max' => '20',
'slider-step' => '1',
'slider-value' => '14' } %>
将其添加到您的表单中。
同时将示例中的javascript添加到events.js
文件夹中的assets/javascripts
。
我认为所有剩下的插件都适合你。