Given a standard select code:
<%= f.select :type_name, [['Genomics','Genomics'],['Proteomics','Proteomics'],['Transcriptomics','Transcriptomics'],['Other','Other'] %>
Can someone explain how I would go about creating a text field when 'Other' is selected? So that the type_name can be something other than the options in the select?
I realise this is a simple question, but I haven't found a concise answer as of yet!
There are lots of ways to do this, but they all require JavaScript. The general approach I like is to put a hidden text field in the form, then attach a JavaScript event handler to the select tag that shows the field when the "Other" option is selected.
Here's a gist of the script I typically use for this. It handles the JavaScript binding using data attributes. Add the script to your assets, then put something like this in your form:
<%= f.select :type_name, [['Genomics','Genomics'],['Proteomics','Proteomics'],['Transcriptomics','Transcriptomics'],['Other','Other'] %>
<%= f.text_field :type_name_other, "data-depends-on" => "#object_type_name", "data-depends-on-value" => "Other" %>
where #object_type_name is the HTML id of your dropdown.
You need to create an attr_accessor on the model f is attached to (like type_name_other), add a text_field to the form below the select for type_name_other in a div that is initially hidden (in CSS: display:none), then create a javascript listener that detects when the select form has changed and if the selected ansser is "other" show the hidden field else hide it. You will then need to see if type_name_other has a value when processing the form and use it if so.
Related
I'm trying to build a form that allows a user to add products to an order.
The way I have it setup so far is that a user will select from 2 dropdown boxes and type into 1 text field
1 - the product they want
2 - its size
3 - the quantity they want.
What I hope to do is have the user click a link_to tag to "Add" this item to their order.
I was thinking I could do this via ajax and build the associative record in my controller and have it render on the page when the request returns.
When the user is done with their order and hits submit I can create my Customer Order with the products they wish to buy.
Am I approaching this correctly?
e.g. my form has the following:
<%= collection_select :order_line_item, :cake_id, Cake.order(:name), :id, :<%= grouped_collection_select :order_line_item, :cake_size_id, Cake.all, :cake_sizes, :name, :id, :name %>
<%= label_tag :quantity %>
<%= text_field_tag :quantity %>
<%= link_to "Add to order", add_to_order_path, {method: :post, remote: true} %>
Am I approaching this correctly? I then need to be able to add the fields above to the ajax post so I can populate the associative record with the relevant values.
Am I approaching this correctly?
I don't know about 'correctly'. But, I can imagine some alternatives.
Here are some sketches:
One Option:
This approach assumes that the Order is already saved so that you can associate a Product with that order. Perhaps Order has a status.
You could wrap that whole bit (product, size, quantity) in its own form (not embedded within your order form).
Have the form submit via js using remote: true (if you're using Rails 5, then this may be the default behavior).
When the user clicks on "Add", you will receive the field values as parameters in your controller where you can associate the Product with the Order.
Then, render back an HTML blob that can be inserted into the DOM (perhaps an order row?)
Use js to insert the blob and clear the form.
Another Option:
You could leave that whole bit (product, size, quantity) as not a form and have it reside outside your form.
Wrap it all up in a div.
Convert that link into a span or something similar.
Attach an .on 'click' event (I'm assuming jquery, you don't specify, so I'm going to run with it) to the wrapper.
When the link is clicked, the click event will bubble up to the wrapper.
Have the wrapper submit the field values via ajax.
Proceed as above.
I wouldn't really recommend this approach as it seems to me that you're basically replicating the functionality of a remote form. But, there is...
Yet Another Option
This approach does not require that the Order already exists.
You could have a hidden order item row outside of your form.
You construct your page as above in Another Option.
Now, when the user clicks the "Add" button, clone the hidden order item row.
Fill in the cloned order item with the appropriate values.
Insert the cloned order item into your Order form.
When the user clicks "Order" or "Submit" or whatever they click when they're done, you'll get all of the order rows as field sets.
Process the order line items along with the form. (Some folks might suggest accepts_nested_attributes_for, but I never use that.)
I suspect there are others. Or perhaps variations.
I have the following code where I want to take the selected photo (from a drop-down) and pass it into a hidden_field. The collection select is a group of photos and I am using the same variable #photos within the hidden_field.
<%= f.select :photo_id, options_from_collection_for_select(#photos, :id, :name), {include_blank: "- Select A Photo-"} %>
<%= f.hidden_field(:photo_id, value: #photos.id)%>
I realize that using the variable that holds all the photos in the hidden field is incorrect because I don't want to all the photo's id's... but how might I get that one selected photo id?
I tried looking at some Rails sources and started running circles as I quickly confused myself... If you happen to know of a good source for this I would greatly appreciate a link as well.
Forms are like hashes in that they can only have one value per key. So if you have two input fields that both have a name="photo[photo_id]" then the latter one will prevail.
I think what you want to do is have the hidden_field be the carrier of the value, but the select field be the chooser of the value. I can't think of a way to do this except with javascript.
<%= f.select_tag :photo_id...
<%= f.hidden_field :photo_id, value: current_selected_photo.id...
And then in javascript (coffeescript):
$ ->
$('select[name="photo_id"]').on 'change', ->
$('input[name="photo[photo_id]"').val($(#).val())
I've got simple_form_for #tag in #edit action and one of the field is
<%= f.input :color, collection: %(red green blue), input_html: {ng_model: 'colorBoxValue'} %>.
Unfortunately after form is rendered ng-model ColorBoxValue is undefined. After I select any of option, ng-model is being set up properly.
What I want to achieve is to have ng-model ColorBoxValue set up properly before I choose any of option (but remember that simple_form_for #tag is in #edit action so #tag comes with value (one of these: red/green/blue) from database so I can't hardcode ng-init on static value...). It should get selected item which comes from database
Any ideas?
this might be an outdated issue for you but i am writing for other people who is looking for solution.
may be this could work: in angular controller setting $scope.colorBoxValue to default color from database
In my form, I used the span tag like the following:
<%= content_tag :span, f.object.User, class: 'username' %>
It looks like the following in HTML after i selected the value:
<span class="user" style="">Antony</span>
The problem is id doesn't get the value to the database when we create a form. I don't know the exact problem is. I want to use this content tag instead of text_field to get the value.
Thanks.
When you submit an HTML form, the only values that get POSTed are those that are in input fields such as text fields, selects, checkboxes, buttons, etc. Content that is simply on the page -- in a span or not -- will not get posted back to the server. That isn't a Rails issue, it's just the way HTML works.
I'm not exactly sure what you're trying to do here, but a common approach when you want to display a value (not in an input box) and also post the value back with the form, is to both render the value on the page (in a span or however you want) and also add a hidden input field (hidden_field_tag) that also has the value in it.
Yeah, Jacob is correct. Better create a hidden field
<%= f.hidden_field :user, class: 'user' %>
<%= content_tag :span, f.object.User, class: 'username' %>
The first line get the value in it. I hope, Jacob answer would help you. :)
I am doing my first project using Ruby on Rails and need to display a set of radio buttons. It should behave exactly like a selection list. For usability reasons, I need it in a radio buttons format.
In my project, I use the collection select which also allows me to display on the edit page as follows:
select('project','project_type_id',#project_types.collect{|project_type|[project_type.name,project_type.id]}) <br>
I need something exactly like this, (especially the ability to display the selected value in the edit page) but using radio buttons.
I did a Google search and read the entire Rails guides on radio buttons but I can't find the answer.
How can I do this?
I suppose you can do it like this in your view
<% #project_types.each do |project_type| %>
<%= radio_button("project", "project_type", project_type.name) %> #assuming you have a name attribute on project_type
<% end %>
If you want a particular radio button to be checked then you can pass the checked option like so
<%= radio_button("project", "project_type", project_type.name, {:checked => true}) %>