I have this form:
= form_tag(path, name: "name") do |f|
= hidden_field_tag "abc", content
= submit_tag "" do
%i.icon.ion-android-sync
As you can see, I am trying to put an Ionicon inside the Form Submit tag.
I've tried a bunch of ways, none of which worked.
With the given example I get an empty button with an approximate width of 3px.
Is it possible to embed a child in a submit_tag? If, how would you go about doing so?
Thanks a lot for each answer!
The short answer is "no". However, you can make a button with type of "submit" that'll do the same thing and allow you to put content in it:
%button{type: "submit"}
%i.icon.ion-android-sync
No the Rails submit helper won't let you do that.
I use a custom submit helper in my app :
# Render a form submit button
# === Params
# +value+:: Value of the input/commit button, used for route constraints
# +text+:: Text for the button
# +:html_options+::
def submit(value=nil, text=nil, html_options={})
text ||= 'Submit'
html_options[:name] ||= 'commit'
html_options[:type] = 'submit'
html_options[:data] ||= {}
html_options[:data][:disable_with] ||= 'Please wait'
html_options[:autocomplete] = "off" # https://github.com/rails/jquery-ujs/issues/357
content_tag(:div, class: 'form-submit-wrapper') do
button_tag(html_options){ block_given? ? yield : text }
end
end
You can just pass whatever HTML you want in a block (sorry this is ERB, I'm not really familiar with HAML)
<%= submit do %>
<i class="icon ion-android-sync"></i>
<% end %>
The first two params are only helpful if you have several submit buttons for your form
<%= submit('preview_action', 'Preview result') do %>
<i class="icon ion-android-sync"></i>
<% end %>
<%= submit('really_do_action', 'Do it for real') do %>
<i class="icon ion-android-sync"></i>
<% end %>
Related
Context: a form has a collection_select, but without a value that interests the user.
A second form allows to create a new entry that would populate the collection_select with a desired value.
Class Article has_many :tags
The create turbostream does render the object, but the form does not display the change & I suspect it is due to the atomicity of the form. the IDed div tag was tried both outside and inside the form_fields tag to the same neutered effect.
<%= form.fields_for :tags do |tag| %>
<div id='tags'>
<%= f.collection_select(:tag, #tags, :id, :name) %>
</div>
<% end %>
The turbo_stream file tris to replace the target. If f.collection_select is used, this generates an error as rails, handling the snippet does not know of the form's existence. Using select_tag, a tag is rendered and delivered but the div is not refreshed
<%= turbo_stream.replace "tags" do %>
<div class='fade-in-div'>
<%= select_tag :tag, options_from_collection_for_select(#tags, :id, :name) %>
</div>
<% end %>
How can these options for select be updated with hotwire?
Functional answer that does not answer the question:
• the new data needs its own field
• make that an allowed attribute with the relevant accessor atrr_accessor
• process the new value
• update the record
• choose preferred path: redirect or turbo_stream a partial as a replacement of entire form.
I have a search form for an index page following the tabular demo. It works perfectly. The list I have that I want to filter by is quite long and I wanted to make it searchable so I added selectize.js, that piece also works just fine.
The problem is they don't work together. After selecting an item now it doesn't fire off the call to TabularReflex#search to filter the results.
#app/views/foo.index.html
<%= form_with scope: :search, url: '/search', html: { "data-reflex" =>"debounced:change->TabularReflex#search"} do |f| %>
<%= f.select :foo, options_for_select(#search.foo), {include_blank: 'Select a Foo'}, {class: 'selectize'} %>
<% end %>
I have form_with form, i want to send the data by Ajax remote:true request.
What works:
- when i click submit button, everything is fine, i receive an alertbox (this is what i've put in my .js.erb file)
What doesn't work:
- i have search form with many fields, i want to submit form when any of the fields is changed. Without ajax it works fine, the code "onchange="this.form.submit();" works perfectly.
But when i use Ajax, this.form.submit() is still reloading the page.
Expected results:
- When i change any field, it will send data without reloading page. If it is possible, i want to avoid regular Ajax and use remote:true form_with method.
What i've tried
- i've used many jquery variations f.e.:
this.form.submit();
$('#id_of_submit_button').click(); // it works but i want to make it without using submit button
$(this).closest("form").submit();
My code:
show.html.erb
<%= form_with(url: "/cars/" + #car.id.to_s + "#formcarsection", id: "filterform", remote: true, method: "get") do |f| %>
<%= f.text_field :vin, onchange: "this.form.submit();", class: "form-control" %>
<input type="submit" id="submitbtn" value="Count" class="car__submit-btn">
<%= end %>
cars_controller.html.erb
def show
respond_to do |format|
format.html
format.js { render 'cars/show.js.erb' }
end
end
cars/show.js.erb
alert("Hello! I am an alert box!!");
The remote: true needs to be added to each field.
<%= f.text_field :vin, data: { url: "/cars/" + #car.id.to_s + "#formcarsection", remote: true, class: "form-control" } %>
How can I make the new_value_path actually be a submit button that creates a new value instead of just refreshing back onto itself?
My current new.html.erb:
<h1>New Value</h1>
<%= render 'form' %>
<%= link_to new_value_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
I want to keep the class: 'btn' and the span class="glyphicon glyphicon-plus" I think it has something to do with CRUD, but I haven't found an answer that specifically deals with including a class and a span.
I had to solve the answer in the _form itself using f.submit
I am building an index for one of my models. Instead of the usual table, I want to have two combo-boxes: one for selecting the object, the other for selecting the method (either edit or destroy). Upon clicking the submit button, I should be redirected to the appropriate method reference (e.g. admin_users/1/edit or admin_users/17/destroy). I have written a helper that constructs the url reference, but for some reason it does not work. when I use button_to I get redirected to the create method, when I use button_tag nothing works. Any ideas?
view code:
<%= form_tag do %>
<p id="notice"><%= flash[:notice] %></p>
<h1>Listing admin_users</h1>
<p><strong>select admin user</strong></p>
<%= select_tag(#req_id, options_from_collection_for_select(#admin_users, :id, :login)) %>
<br/>
<p><strong>select action</strong></p>
<%= select_tag(#oper, options_for_select([['edit'],['destroy']])) %>
<br/>
<%=button_tag 'go go!', get_path(#req_id,#oper) %>
<% end %>
helper code:
module AdminUsersHelper
def get_path(req_id,oper)
a=[req_id, oper].join("/")
["admin_users", a].join("/")
end
end
The default method for a form submit is POST. You'll need to change the method accordingly.
<%= form_tag( '/users/confirm', method: :get ) %>
May I suggest submitting with Javascript? You'll have a more dynamic control over the method of the submission. Take a look Here
so, eventually I went on the javascript solution, just as #Hassanin Ahmed suggested. Thanks for Helping!
<%= form_tag('/admin_users', id: "admin_users_menu") do %>
[...]
<font size=4>
<u>select user:</u>
</font>
<br>
<br>
<select id="admin_user_id" name="admin_user[id]">
<%= options_for_select #admin_users.collect{|user| [user.login, user.id]} %>
</select>
<br>
<br>
<font size=4> <u>select option:</u></font><br><br>
<input type="radio" checked name="select_op" value= "edit" > edit
<br>
<br>
<input type="radio" name="select_op" value= "delete" > delete
<br>
<br>
<%= submit_tag "go" %>
<br>
<br>
<% end %>
<script>
$(function (){
$("#admin_users_menu").submit(function() {return direct_me() })
})
function direct_me(){
//getting the admin_user id
var au_id=$('select').val()
//getting the desired method
var op=$('input[name=select_op]:radio:checked').val()
//making the default url
var u="admin_users/"+au_id
var f=$("form")
if(op=='edit'){
u=u+"/edit"
f.attr("method","GET")
}
else if(op=='delete'){
f.attr("method","POST")
f.append("<input type='hidden' name='_method' value='delete'>");
}
f.attr("action",u)
if(op=='delete') return confirm("Are you sure?")
}
</script>