I want to create a form like this :
<select name="selectedStatut" size="5" id="form_selectedStatut" multiple="multiple">
<option value="1">Editable</option>
<option value="2">Traitement du systeme en cours</option>
<option value="3">Diffusee au souscripteur</option>
<option value="4">Diffusee au commercial</option>
<option value="5">Diffusee au client</option>
<option value="6">Supprimee</option>
</select>
I use the following code:
<s:select label="Statut" multiple="true" size="5" list="#{'1':'Editable','2':'Traitement du systeme en cours','3':'Diffusee au souscripteur','4':'Diffusee au commercial','5':'Diffusee au client','6':'Supprimee'}" name="selectedStatut">
</s:select>
But i get this form below:
<select name="selectedStatut" size="5" id="form_selectedStatut" multiple="multiple">
<option value="Editable">Editable</option>
<option value="Traitement du systeme en cours">Traitement du systeme en cours</option>
<option value="Diffusee au souscripteur">Diffusee au souscripteur</option>
<option value="Diffusee au commercial">Diffusee au commercial</option>
<option value="Diffusee au client">Diffusee au client</option>
<option value="Supprimee">Supprimee</option>
</select>
Did i miss something ?
Thanks for helping.
you need do this listKey="key" and listValue="value":
<s:select label="Statut" multiple="true" size="5"
list="#{'1':'Editable','2':'Traitement du systeme en cours','3':'Diffusee au souscripteur','4':'Diffusee au commercial',
'5':'Diffusee au client','6':'Supprimee'}"
name="selectedStatut" listKey="key" listValue="value"/>
Related
I'm adding select2 element like this
//HTML Code
<html>
<select id="select2Basic" class="select2 form-select form-select-lg">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 2 </option>
</select>
<select id="select3Basic" class="select2 form-select form-select-lg">
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
</select>
</html>
//Jquery
<script>
$("#select2Basic").select2(); //initialise select2 using id
$("#select3Basic").select2();
</script>
// I can't use same id on multiple element, that wont work.
Now i want a button that generate select2 element when clicked
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>
I want to remove the slash (/) between day/month/year in date format, in Symfony 1.4, when use
<?php echo $form['birthday']->renderRow(array('class' => 'date')) ?>
Which result in:
<tr>
<th><label for="profile_birthday">Birthday</label></th>
<td>
<select class="date" name="profile[birthday][month]" id="profile_birthday_month">
<option value="" selected="selected"></option>
<option value="1">01</option>
...
<option value="12">12</option>
</select>
/
<select class="date" name="profile[birthday][day]" id="profile_birthday_day">
<option value="" selected="selected"></option>
<option value="1">01</option>
...
<option value="31">31</option>
</select>
/
<select class="date" name="profile[birthday][year]" id="profile_birthday_year">
<option value="" selected="selected"></option>
<option value="2006">2006</option>
...
<option value="2016">2016</option>
</select>
</td>
</tr>
But I want:
<tr>
<th><label for="profile_birthday">Birthday</label></th>
<td>
<select class="date" name="profile[birthday][month]" id="profile_birthday_month">
<option value="" selected="selected"></option>
<option value="1">01</option>
...
<option value="12">12</option>
</select>
<select class="date" name="profile[birthday][day]" id="profile_birthday_day">
<option value="" selected="selected"></option>
<option value="1">01</option>
...
<option value="31">31</option>
</select>
<select class="date" name="profile[birthday][year]" id="profile_birthday_year">
<option value="" selected="selected"></option>
<option value="2006">2006</option>
...
<option value="2016">2016</option>
</select>
</td>
</tr>
You can change the date format for the widget in your form class. Add the following code to the configure() method in lib/form/doctrine/MyForm.class.php:
$this->setWidget('foo', new sfWidgetFormDate(
array('format' => '%month% ... %day% ... %year%')
));
Replacing the widget name foo with the appropriate name in your case. Hope this helps :)
Edit:
You can find more information on sfWidgetFormDate and other widgets here