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 })
Related
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
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>
im using foundation 3, and have set the class of custom on my form, though the issue im having is with the select dropdowns and error class not working the way it should.
what i am hoping for is that i can have the widths of the select boxes to be set to the same column width as the error messages as to make the view looked polished
<div class="four columns">
<select class="four columns" id="event_location_id" name="event[location_id]" style="display: none; "><option value="">None</option>
<option value="8">APK</option>
<option value="10">BAL</option>
<option value="11">BANK</option>
<option value="12">BANY</option>
<option value="13">BEN1</option>
<option value="14">BEN2</option>
<option value="15">BER</option>
<option value="16">BRU</option>
<option value="17">BTN</option>
<option value="18">CAM</option>
<option value="19">CAUL-Ind</option>
<option value="20">CER</option>
<option value="22">DAN</option>
<option value="23">DON</option>
<option value="24">DRO</option>
<option value="25">ELG</option>
<option value="26">ELT</option>
<option value="27">ES1</option>
<option value="28">ES2</option>
<option value="29">F-1</option>
<option value="30">F-2</option>
<option value="31">FP</option>
<option value="32">GEL</option>
<option value="33">GRN</option>
<option value="34">GRN-2</option>
<option value="35">H-1</option>
<option value="36">H-2</option>
<option value="37">HAL-1</option>
<option value="38">HAL-2</option>
<option value="39">HHF (prev WAV)</option>
<option value="40">HUN</option>
<option value="41">KNG</option>
<option value="42">KNX</option>
<option value="43">LAT</option>
<option value="45">MEL</option>
<option value="46">MGV</option>
<option value="47">MHS</option>
<option value="48">MNT</option>
<option value="49">MON</option>
<option value="50">MON-Ind</option>
<option value="51">MUH</option>
<option value="52">PCK</option>
<option value="53">PEGS</option>
<option value="54">PHC</option>
<option value="55">PSF</option>
<option value="56">RMIT</option>
<option value="57">S-1</option>
<option value="58">S-2</option>
<option value="59">S.N.H.C.</option>
<option value="60">SHP</option>
<option value="61">SKW</option>
<option value="62">STB</option>
<option value="63">T.B.A.</option>
<option value="64">TRI</option>
<option value="65">WARN</option>
<option value="66">WER</option>
<option value="67">WGS</option>
<option value="68">WGW</option>
<option value="69">WHF</option>
<option value="71">YAR</option>
<option value="72">YVG</option>
<option value="21">CHU</option>
<option value="70">WOD</option>
<option value="73">Test</option>
<option value="9">ASH</option>
<option value="7">ALT</option>
<option value="44">MBN</option></select><div class="custom dropdown" style="width: 155px; ">None<ul style="width: 155px; "><li class="selected">None</li><li>APK</li><li>BAL</li><li>BANK</li><li>BANY</li><li>BEN1</li><li>BEN2</li><li>BER</li><li>BRU</li><li>BTN</li><li>CAM</li><li>CAUL-Ind</li><li>CER</li><li>DAN</li><li>DON</li><li>DRO</li><li>ELG</li><li>ELT</li><li>ES1</li><li>ES2</li><li>F-1</li><li>F-2</li><li>FP</li><li>GEL</li><li>GRN</li><li>GRN-2</li><li>H-1</li><li>H-2</li><li>HAL-1</li><li>HAL-2</li><li>HHF (prev WAV)</li><li>HUN</li><li>KNG</li><li>KNX</li><li>LAT</li><li>MEL</li><li>MGV</li><li>MHS</li><li>MNT</li><li>MON</li><li>MON-Ind</li><li>MUH</li><li>PCK</li><li>PEGS</li><li>PHC</li><li>PSF</li><li>RMIT</li><li>S-1</li><li>S-2</li><li>S.N.H.C.</li><li>SHP</li><li>SKW</li><li>STB</li><li>T.B.A.</li><li>TRI</li><li>WARN</li><li>WER</li><li>WGS</li><li>WGW</li><li>WHF</li><li>YAR</li><li>YVG</li><li>CHU</li><li>WOD</li><li>Test</li><li>ASH</li><li>ALT</li><li>MBN</li></ul></div><small for="event_location_id" class="error">can't be blank</small>
</div>
This is a reported bug (and apparently fixed 6 days ago.)
In the meantime, you can easily fix it with two lines of CSS:
.custom.dropdown {
width: 100% !important; /* fixes width issue */
}
.custom.dropdown + .error {
margin-top: -9px; /* fixes overlapping */
}
You can see it in action here.
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)) %>
I'm building a rails app right now where a user will select a date with the form below and press the Submit button.
Three questions:
1) What is the correct way to get this to post to my DB?
2) Does my submit button need to be inside of my form tag?
3) How do I generate a scaffold to take these fields correctly?
Thanks in advance for the help. I really do appreciate this wonderful community and look forward to giving back one day when I'm more adept.
<div id="dateFields">
<form accept-charset="UTF-8" method="post">
<select name="lunchMonth">
<option>Month</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="lunchDay">
<option>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 name="lunchYear">
<option value="2011">2011</option>
</select>
</form>
</div> <!-- End DateField -->
<br /><br />
<a class="whiteButton" href="#confirmed" type="submit" value="send">Confirm</a>
While starting with an existing blob of HTML and then trying to build an RoR controller/model to receive information from the form is certainly possible... it's a bit unusual. Typically, one would also use RoR views/form helpers to render the HTML, which clearly was not done in this case.
It's hard to answer your question, as posed, because you are starting from a slightly odd place. I think all would become clearer to you if wrote a few example forms/controllers/models using RoR scaffolds for all parts of the MVC framework. Maybe start with Rails for Zombies?
I think #213 Calendars episode from railscasts will help you to understand the date picker and make it in proper way.