I have a select_tag with options_for_select that looks like this:
<%= select_tag "respondent", options_for_select(1..5, 2) %>
That outputs:
<select id="respondent" name="respondent">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
But what I want it to output is this:
<select id="respondent" name="respondent">
<option value="/arbitrary/page/1">#1</option>
<option value="/arbitrary/page/2" selected="selected">#2</option>
<option value="/arbitrary/page/3">#3</option>
<option value="/arbitrary/page/4">#4</option>
<option value="/arbitrary/page/5">#5</option>
</select>
How can I pull that off?
If you have such named route like arbitrary_page_path:
<% collection = (1..5).map { |i| ["##{i}", arbitrary_page_path(i)] } %>
<%= select_tag "respondent", options_for_select(collection, arbitrary_page_path(2)) %>
Related
In my ERB view, I have the following two types of select inside a form.
<%= f.select :shape, Diamond.shapes.map { |k,v| [k.humanize, v] },{:include_blank => ''},{:class => "form-control", :required => true} %>
<%= select_tag "term[]", options_for_select(Diamond.colors.map { |k,v| [k.upcase, v] }), class: "form-control" %>
I am wanting to change it into a radio button or just button and cannot figure out how to code it correctly. The options I have are an enum saved in Diamond.shapes.
Here are the 2 HTML element.
<select class="form-control" required="required" name="wholesale[shape]" id="wholesale_shape"><option value=""></option>
<option value="1">Asscher</option>
<option value="2">Emerald</option>
<option value="3">Heart</option>
<option value="4">Marquise</option>
<option value="5">Oval</option>
<option value="6">Pear</option>
<option value="7">Princess</option>
<option value="8">Radiant</option>
<option value="9">Round</option>
<option value="10">Cushion</option>
</select>
<select name="term[]" id="term_" class="form-control"><option value="14">D</option>
<option value="15">E</option>
<option value="16">F</option>
<option value="17">G</option>
<option value="18">H</option>
<option value="19">I</option>
<option value="20">J</option>
<option value="21">K</option>
<option value="22">L</option>
<option value="23">M</option>
<option value="24">N</option></select>
Any ideas? I have been trying radio button collections but havent figured out the correct coding and am not even sure if that is the best way to go. Thank you.
You can do it like this:
<% Diamond.colors.keys.each do |color| %>
<%= f.radio_button :term, color %>
<%= f.label color.to_sym %>
<% end %>
Include custom id and value in Rails collection_select besides the normal prompt: or :include_blank?
<%= f.collection_select :id, #events, :id, :date_formatted, { prompt: "Select..." } %>
produces:
<select name="event[id]" id="event_id">
<option value="">Select...</option>
<option value="16">26.06.15</option>
<option value="11">07.06.15</option>
<option value="20">11.05.15</option>
<option value="1">30.11.14</option>
<option value="14">26.07.14</option>
<option value="10">27.02.13</option>
<option value="2">11.12.12</option>
<option value="19">26.06.12</option>
<option value="8">10.06.12</option>
<option value="4">21.08.11</option>
<option value="15">26.04.11</option>
<option value="12">14.02.11</option>
<option value="13">04.12.10</option>
<option value="7">06.11.10</option>
<option value="18">05.10.10</option>
<option value="6">30.01.10</option>
<option value="17">08.03.09</option>
<option value="5">20.01.09</option>
<option value="9">04.11.08</option>
<option value="3">24.04.08</option>
</select>
I want to include my own:
<option value="something">Whatever</option>
Documentation not helping.
You can take advantage of the OpenStruct data structure.
An OpenStruct is a data structure, similar to a Hash, that allows the
definition of arbitrary attributes with their accompanying values.
This is accomplished by using Ruby’s metaprogramming to define methods
on the class itself.
I presume you have something like this in your controller.
#events = Event.where(...)
You can then do this in your controller instead.
#events = [OpenStruct.new(id: 'something', date_formatted: 'some_other_value')]
#events << Event.where(...)
#events.flatten!
And then just like before in your view. Everything in #events now responds to date_formatted
I have some trobles with new task in my rails application. I own normal form sceleton:
<%= simple_form_for(#workout, html: { class: 'form-horizontal' }) do |f| %>
<%= f.input :date, label: "Date"%>
<%= f.input :workout, label: "What training?", :collection => ["Running","Swimming","Cycling"]%>
<%= f.input :mood, label: "Your mood", :collection => ["Great","Good","Bad"]%>
<%= f.input :weather, label: "Weather:", :collection => ["Sunny","Rainy","Cloudy"] %>
<%= f.input :intensity, label: "Intensity. Low is 90-120BPM. Normal is 120-155BPM. High is 155+BPM.", :collection => ["High","Normal","Low"]%>
<%= f.input :length, label: "Time in minutes:", input_html: { class: "form-control" }%>
<%= f.input :distance, label: "Distance in kilometers:", input_html: { class: "form-control" }%>
<%= f.input :comment, label: "Your comment to this training session:", input_html: { class: "form-control" }%>
<br>
<%= f.button :submit %>
<% end %>
And now I had idea to use angularjs to display data dynamically. I mean, when user fill form I want to display data in some place at the website so user can take a look before submit a form. Form example:
<div class="col-sm-6 col-xs-6 new_details">
<%= render 'form' %>
</div>
<div class="col-sm-6 col-xs-6">
<!-- ANGULAR CODE -->
</div>
Generated html code:
<div class="col-sm-6 col-xs-6 new_details">
<form class="simple_form form-horizontal" novalidate="novalidate" id="new_workout" action="/workouts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="/n/2EHIRSt4pXrta+ABebjQsJXZllHkWGg/PlJek2u5bfA6EHM5v+8wT13+lrw+dGS+YXyQx3YffD/SHpCvFeg==" />
<div class="form-group datetime optional workout_date"><label class="control-label datetime optional" for="workout_date_1i">Date</label><div class="form-inline"><select id="workout_date_1i" name="workout[date(1i)]" class="form-control datetime optional">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017" selected="selected">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
<select id="workout_date_2i" name="workout[date(2i)]" class="form-control datetime optional">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5" selected="selected">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="workout_date_3i" name="workout[date(3i)]" class="form-control datetime optional">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected="selected">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
— <select id="workout_date_4i" name="workout[date(4i)]" class="form-control datetime optional">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16" selected="selected">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
: <select id="workout_date_5i" name="workout[date(5i)]" class="form-control datetime optional">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45" selected="selected">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</div></div>
<div class="form-group select optional workout_workout"><label class="control-label select optional" for="workout_workout">What training?</label><select class="form-control select optional" name="workout[workout]" id="workout_workout"><option value=""></option>
<option value="Running">Running</option>
<option value="Swimming">Swimming</option>
<option value="Cycling">Cycling</option></select></div>
<div class="form-group select optional workout_mood"><label class="control-label select optional" for="workout_mood">Your mood</label><select class="form-control select optional" name="workout[mood]" id="workout_mood"><option value=""></option>
<option value="Great">Great</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option></select></div>
<div class="form-group select optional workout_weather"><label class="control-label select optional" for="workout_weather">Weather:</label><select class="form-control select optional" name="workout[weather]" id="workout_weather"><option value=""></option>
<option value="Sunny">Sunny</option>
<option value="Rainy">Rainy</option>
<option value="Cloudy">Cloudy</option></select></div>
<div class="form-group select optional workout_intensity"><label class="control-label select optional" for="workout_intensity">Intensity. Low is 90-120BPM. Normal is 120-155BPM. High is 155+BPM.</label><select class="form-control select optional" name="workout[intensity]" id="workout_intensity"><option value=""></option>
<option value="High">High</option>
<option value="Normal">Normal</option>
<option value="Low">Low</option></select></div>
<div class="form-group integer optional workout_length"><label class="control-label integer optional" for="workout_length">Time in minutes:</label><input class="form-control numeric integer optional form-control" type="number" step="1" name="workout[length]" id="workout_length" /></div>
<div class="form-group decimal optional workout_distance"><label class="control-label decimal optional" for="workout_distance">Distance in kilometers:</label><input class="form-control numeric decimal optional form-control" type="number" step="any" name="workout[distance]" id="workout_distance" /></div>
<div class="form-group text optional workout_comment"><label class="control-label text optional" for="workout_comment">Your comment to this training session:</label><textarea class="form-control text optional form-control" name="workout[comment]" id="workout_comment">
</textarea></div>
<br>
<input type="submit" name="commit" value="Create Workout" class="btn btn-default" />
</form>
</div>
Any ideas and tips?
Assigning ng-model1 to your inputs will allow Angular access to the values.
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
For example, giving a <select> a ng-model="trainingType" will allow you to access its value, and will change whenever the value is updated.
<select ng-model="trainingType">
<option value=""></option>
<option value="Running">Running</option>
<option value="Swimming">Swimming</option>
<option value="Cycling">Cycling</option>
</select>
<p>Current value is: {{trainingType}}</p>
Here is a plunker demo using some of the form data you provided: http://plnkr.co/edit/ZRGtiPvCdqQffj3rHOtd?p=preview
1: https://docs.angularjs.org/api/ng/directive/ngModel
heres the code
<%= select_month nil, {use_two_digit_numbers: true}, {:name => 'expMonth', class: "form-control" } %>
and the results
<select class="form-control" id="date_month" name="expMonth">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
if you can see the value of the options has no "0" i want to add 0 like 01, 02 and soon except 10 to 12 which already a double digit. see example below
<select class="form-control" id="date_month" name="expMonth">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
I'd say you're better off with using something like
select_tag 'date_month', options_for_select((1..12).collect{ |i| "%02d" % i })
Please help me to convert my total HTML form into ROR format form and give some idea about retrive all selected values into controller page.
My HTML form:
<%= form_for #student,:url => {:action => "stdrecord"} do |f| %>
<tr>
<td>DATE OF BIRTH</td>
<td>
<select name="Birthday_day" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="Birthday_Month" name="Birthday_Month">
<option value="-1">Month:</option>
<option value="January">Jan</option>
<option value="February">Feb</option>
<option value="March">Mar</option>
<option value="April">Apr</option>
<option value="May">May</option>
<option value="June">Jun</option>
<option value="July">Jul</option>
<option value="August">Aug</option>
<option value="September">Sep</option>
<option value="October">Oct</option>
<option value="November">Nov</option>
<option value="December">Dec</option>
</select>
<select name="Birthday_Year" id="Birthday_Year">
<option value="-1">Year:</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
</select>
</td>
</tr>
<tr>
<td>GENDER</td>
<td>
Male <input type="radio" name="Gender" value="Male" />
Female <input type="radio" name="Gender" value="Female" />
</td>
</tr>
<tr>
<td>HOBBIES <br /><br /><br /></td>
<td>
Drawing
<input type="checkbox" name="Hobby_Drawing" value="Drawing" />
Singing
<input type="checkbox" name="Hobby_Singing" value="Singing" />
Dancing
<input type="checkbox" name="Hobby_Dancing" value="Dancing" />
Sketching
<input type="checkbox" name="Hobby_Cooking" value="Cooking" />
<br />
Others
<input type="checkbox" name="Hobby_Other" value="Other">
<input type="text" name="Other_Hobby" maxlength="30" />
</td>
</tr>
<%= f.submit "submit" %>
<% end %>
Please help me to acess all desired value while selected inside the controller page inside the create method.I am using rails-4 and ruby 1.9.3.Thanks in advance.
There's a great tutorial on ruby-on-rails guides, even making a project from scratch. You can see the first reference in your comments I'll duplicate it http://guides.rubyonrails.org/form_helpers.html, 2 check get started with rails, it has many good things and it's all described http://guides.rubyonrails.org/getting_started.html.
I think this should work for you:
<input type="text" name="student[Other_Hobby]" maxlength="30" />
<input type="checkbox" name="student[Hobby_Drawing]" value="Drawing" />
<select name="student[Birthday_day]" id="Birthday_Day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
</select>