The form tag below works. However, I wanted to add styling and substitute text_field_tag into dropdown select so user can select the hours.
<%= form_tag("/availability", method: "post") do %>
<%= label_tag(:available_hour, "Add Availability:") %>
<%= text_field_tag(:available_hour) %>
<%= submit_tag("Add") %>
<% end %>
I am having trouble creating form with dropdown select using bootstrap form. I tried:
<form method="post" action="/availability">
<select class="custom-select">
<% (1..24).to_a.each do |el| %>
<option value=el><%= el%></option>
<% end %>
</select>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
But it gave me ActionController::InvalidAuthenticityToken error.
This is done inside user show view, and the action I am firing is from Availability model' create action.
I found a relevant SO post on bootstrap form, but the answer uses PHP. This is what he used: <form action="results.php" method="POST" role="form" class="form-horizontal">.
I think if I can somehow point to bootstrap to look for Availability, it should work.
How can I point out to bootstrap form which controller (and method) to use?
You're probably omitting a CSRF value that's automatically included by form_tag.
Try adding
#app/views/layouts/application.html.erb
<%= csrf_meta_tags %>
Or you can add it to the form block directly:
<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
form_tag helper link, you can add option , authenticity_token: false
actually rails already has actionview helper to help you create dropdown with hour here is link
for your problem you can try
<%= form_tag("/availability", method: "post", authenticity_token: false) do %>
<div class="row form-group">
<%= f.label "Add Availability:", :class => 'control-label col-sm-3' %>
<div class="col-sm-5">
<%= select_hour :available_hour, :class => 'form-control') %>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<% end %>
Related
So following is the bit of code that I'd like to add in the HTML after a particular event occurs:
<div class='comment-form' data-controller='comment'>
<form action='' data-action='comment#createComment'>
<div class='comment-form__title'>Add your reply:</div>
<textarea class='comment-form__textarea' placeholder='Type in your reply' data-comment-target='commentText'></textarea>
<input type="submit" value="Submit" class='btn-secondary' >
</form>
</div>
As of now, the only way I could find, is the following:
post.insertAdjacentHTML(`<div class='comment-form' data-controller='comment'>
<form action='' data-action='comment#createComment'><div class='comment-form__title'>Add your reply:</div><textarea class='comment-form__textarea' placeholder='Type in your reply' data-comment-target='commentText'></textarea><input type="submit" value="Submit" class='btn-secondary'></form></div>`)
I'm looking for a way where this template is rendered through the server code(read: Rails), instead of me hardcoding it in the JS.
P.S:
As of writing this, Discourse for StimulusJS is down, and I could find a link for a question similar to what I'm asking here: https://discourse.stimulusjs.org/t/fetching-a-partial-on-click/1297, and on Stackoverflow, I couldn't find a relevant question to this.
If you looking to render the comment form continuously. You can use the loop like this:
<div class='post-comments-section'>
<% post.comments.each do |comment| %>
<div class="post-comments">
<p>
<b><%= comment.user.name %>:</b> <%= comment.content %>
</p>
<span> <%= comment.created_at.strftime("%Y/%m/%d") %> </span>
</div>
<% end %>
<%= form_for(post.comments.new, url: post_comments_path(post)) do |form| %>
<%= form.text_field :content, id: :comment_content, class: 'form-control', placeholder: 'Add new Comment' %>
<%= form.submit 'Comment', class: 'btn btn-secondary' %>
<% end %>
</div>
And, If you are looking to add something specific. You can add the partial from the controller with a condition.
def create
if comment.create
render partial: "posts/comment"
end
end
I have two form_tag that contains datepicker field in a single HTML file.
The contents are the almost identical only that time_start is displayed in the first form
while time_end is displayed in the second form.
<%= form_tag sample_path, method: :get do %>
<%= text_field_tag "time_start", nil, class: "datepicker" %>
<%= hidden_field_tag "time_end", nil %>
<%= hidden_field_tag "other_info", nil %>
...
<%= submit_tag "Submit"%>
<% end %>
...
<%= form_tag sample_path, method: :get do %>
<%= hidden_field_tag "time_start", nil %>
<%= text_field_tag "time_end", nil, class: "datepicker" %>
<%= hidden_field_tag "other_info", nil %>
...
<%= submit_tag "Submit" %>
<% end %>
However, when I select a date in time_end, the form is submitted even though the submit button is not pressed.
I am guessing because the input fields generated in the HTML has the same id.
<form action="sample" accept-charset="UTF-8" method="get">
<input type="text" name="time_start" id="time_start" class="datepicker hasDatepicker">
<input type="hidden" name="time_end" id="time_end">
<input type="hidden" name="other_info" id="other_info">
...
<input type="submit" name="commit" value="Submit" data-disable-with="Submit">
</form>
...
<form action="sample" accept-charset="UTF-8" method="get">
<input type="hidden" name="time_start" id="time_start">
<input type="text" name="time_end" id="time_end" class="datepicker hasDatepicker">
<input type="hidden" name="other_info" id="other_info">
...
<input type="submit" name="commit" value="Submit" data-disable-with="Submit">
</form>
I added index or namespace options to a form_tag, but it seems it is not applicable with form_tag.
<%= form_tag sample_path, {index: 'group_01', method: :get} do %>
...
<%= form_tag sample_path, {namespace: 'group_02',method: :get} do %>
...
Is there any way to distinguish the elements IDs in each form_tag?
You're right, form_tag does not allow the methods you mentioned.
In this case, since you're using hidden_field_tag, you can pass 3 options, as stated here in the documentation.
So you'll need to manually add the id attribute to each of the fields, like so:
<%= hidden_field_tag "other_info", nil, time_start: "custom_id" %>
However, the issue you're describing is not related to the IDs themselves, but to the plugin you're using with Javascript.
I've the following form that uses Simple_form gem:
<%= simple_form_for #match_prediction do |f| %>
<%= f.input :outcome, label: false, as: :radio_buttons, collection: [['local', match.local_team], ['Tie', 'Tie'], ['visit', match.visiting_team]], label_method: :second, value_method: :first %>
<%= f.submit 'Save' %>
<% end %>
Currently it works as expected, meaning: Renders 3 radio buttons, exclusive from each other and each resulting in a unique string being passed to the server.
The problem: I'd like to separate each of the radio buttons across different columns in a Bootstrap grid like below:
<div class="row prediction">
<div class="col-sm-4">
<!-- FIRST RADIO BUTTON HERE -->
</div>
<div class="col-sm-4">
<!-- SECOND RADIO BUTTON HERE -->
</div>
<div class="col-sm-4">
<!-- THIRD RADIO BUTTON HERE -->
</div>
<%= f.submit 'Save' %>
</div>
Since the whole collection is specified in one line within the form code, I can't simply split lines and insert them in the relevant HTML.
Is there a way to achieve this either via simple_form or vanilla rails form helpers?
I've considered splitting the radios as separate form inputs but this would allow to select more that one option at once. I'd appreciate your help.
Coudn't you use a standard rails helper in simple_form form? What about using the radio_button helper directly. Docs
<div class="row prediction">
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'local', checked: #match_prediction.outcome == 'local' %> <%= match.local_team %>
</div>
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'Tie', checked: #match_prediction.outcome == 'Tie' %> <%= 'Tie' %>
</div>
<div class="col-sm-4">
<%= radio_button 'match_prediction', 'outcome', 'visit', checked: #match_prediction.outcome == 'visit' %> <%= match.visiting_team %>
</div>
<%= f.submit 'Save' %>
</div>
And if it is possible to access standard FormHelper in simple_form you can call:
<%= f.radio_button 'outcome', 'xzy' %> <%= 'whatever' %>
I'm using a form_tag to update an attribute in my 'Car' model. Everything should work except when I check the logs its using GET instead of the PUT like it should.
routes
apply_superadmin_apply_coupons_path - PUT /superadmin/apply_coupons/apply(.:format) superadmin/apply_coupons#apply
superadmin_apply_coupons_path - GET /superadmin/apply_coupons(.:format) superadmin/apply_coupons#index
view
<form class="super-admin-apply-coupons form-horizontal">
<%= form_tag(apply_superadmin_apply_coupons_path, action: 'apply', method: 'PUT') do %>
<div class="form-group">
<label class="col-sm-2"> Select car</label>
<div class="col-sm-4 apply-coupon-wrap">
<%= select_tag :id, options_from_collection_for_select(#cars, "id", "device_number"), class:"form-control" %>
</div>
</div>
<div class="form-group">
<label class="col-md-2">Select coupon code</label>
<div class="col-sm-4 apply-coupon-wrap">
<%= select_tag :coupon_code_id, options_from_collection_for_select(#coupon_codes, "id", "name"), class:"form-control" %>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<%= submit_tag 'Apply', class: 'btn btn-success' %>
</div>
</div>
<% end %>
</form>
Its obviously just redirecting back to the index page at the moment without triggering the apply action I'm wanting it to.
You are probably producing two <form> tag in your view, one is the html form tag, the other is from <%=form_tag(...)%>. Just try to remove the html form tag might make it.
I found a custom form style i want to copy. however, it's hard for me to figure out how to integrate the rails into its style since it is much more complicated than examples I've been
able to find.
Specifically, I don't know how to call the specific classes the example uses in my rails app.
I would greatly appreciate some guidance on how to create my rails form in this style:
Basically, you need to do something like:
<%= form_for #listing, html: { class:'form-inline lead-big'} do |f| %>
<div class='form-group'>
</div>
<% end %>
and then in between the .form-group div, you can either use the same code that is provided on the Bootsnipp page, or you can use Rails Form Helpers.
So instead of this:
<div class="form-group">
<label for="name">Hello, I am <span>Your name</span></label>
<input type="text" id="name" placeholder="#maridlcrmn" required>
and
</div>
it could be:
<div class="form-group">
<%= f.label :name do %>
Hello, I am <span>Your name</span>
<% end %>
<%= f.text_field :name, id: "name", placeholder: "#maridlcrmn", required: true %>
and
</div>
See this page for more: http://guides.rubyonrails.org/form_helpers.html
Really cool form I must add!
Depends if you want to do the form for a model or just submitting info. If for mode, use form_for if to submit form_tag
<%= form_tag some_url_path, method: :get do %>
<div class="form-group">
<%= label_tag :name, raw("Hello, I am <span> Your name </span>")%>
<%= text_field_tag :name%>
and
</div>
...
<%end%>