Using data-disable-with attribute in remote:true form
<%= f.submit "Verify",'data-disable-with' => 'Verifying...' %>
After submitting button disabled and text changes to "Verifying..." but issue is that let say in case of error, errors show in form and submit button renable but the text not change . It stills remain "Verifying"
How can I show previous text in case of error?
Try this
<%= f.submit "Verify",'data-disable-with' => 'Verifying...', id: 'submit-button' %>
and in js
$(document).on('ajax:error', 'form-name', function (xhr, jqxhr) {
$("#submit-button").removeAttr('data-disable-with');
});
replace the form-name with your form id or class
Related
I have comments for posts in a rails site.
Here is my _form.html.slim for my "make a new comment" form.
I would like pressing the enter key to submit the form and the submit button to be hidden/not displayed.
Is this possible within simpleform?
span = simple_form_for([#post, #post.comments.build], :defaults => { :input_html => { :class => "comment-input-text" } }) do |f|
= f.input :comment, label: false, placeholder: "Add a comment"
= f.submit
Sorry, I could not convert this code the any erb or html. If anyone would like to edit this question and put in the erb it would be much appreciated.
Actually, its duplicate question
Check this link: Submit form with Enter key without submit button?
You can add this right below form
javascript:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$("form_id_here").submit();
}
});
In my rails application on Customer index page I need a text input box without a submit button next to it. I just want to type customer number inside it and on pressing enter button the search should work. How to implement it ?
<div class="row">
<%= form_tag customers_path, :method => 'get', class: 'input-group' do %>
<%= text_field_tag :search, params[:search], class: 'form-control', placeholder: 'Search Customers' %>
<span class="input-group-btn">
<%= submit_tag "search", class: "btn btn-success btn-md" %>
</span>
<% end %>
</div>
I have placed it on top of my index page of customers page just above the customer number column, So I don't want this search box plus the button to take a big space in my view. So I don't need the submit button. Or is there any way to replace the search button with a right pointing arrow button(bootstarp) to save space in my view.
You can hide your submit button with display: none;. The form will still submit on enter.
You may also add another link with an image and the trigger the form's submit when the link is clicked. Or you can even style the button as you wish.
Firstly remove the submit button from your code and trigger an event on pressing enter button,something like this.
$('#search').keypress(function (e)
{
if (e.which == '13') {
get the character typed in the text box and send the parameters
to controller-action thorugh ajax
}
});
take a reference from here how to send ajax to controller-action
Ruby on rails: How to send an AJAX request to rails controller from login popup along with user given credentials
In your controller/action it will be
performing select operation from database
select bla bla from xyz where column like %params reveived from ajax%
return it to the calling ajax function
Hope that's helps you
I have some javascript that shows a form when you click an edit icon. The form has a working button that goes into the controller's update function.
I also have a Cancel button in the form, which goes into the update function. However, I don't want to re-direct or re-render from the update function. Re-rendering would lose other forms that may be shown.
Is there a way to have the button ONLY call the javascript? The javascript gets called, but then it goes into the controller.
Moving the cancel button outside of the form_for works, of course, but then the two buttons are no longer next to each other.
<%= form_for(#guide) do |f| %>
<%= render 'form_part', test: 'name', field: field, f: f %>
<%= render 'form_part', test: 'city', field: field, f: f %>
<%= render 'form_part', test: 'province', field: field, f: f %>
<%= render 'form_part', test: 'country', field: field, f: f %>
<%= render 'textarea', test: 'description', field: field, f: f %>
<p>
<%= f.submit "Save", class: "btn btn-primary edit-guide-btn" %>
<%= button_tag "Cancel", class: "btn btn-default edit-guide-btn",
onclick: "toggle('#{field}','cancel')" %>
</p>
<% end %>
Now I realize I will have the same problem on submit. The controller will have to re-render the edit page, and the forms that are shown will be hidden again.
How would I allow a bunch of forms to be shown, each with their own submit buttons. When a submit button is clicked, it would only submit to that form, and leave the others alone, without re-rendering the page?
If you make your call to button_tag with type: 'button' it should fix your issue with the cancel button.
button_tag "Cancel", type: 'button', class: "btn btn-default edit-guide-btn", onclick: "toggle('#{field}','cancel')"
For your the part about the submissions, if you want to submit a form without reloading the page, you will probably need to do one of the following:
Use ajax to submit the form
This is probably the most work but gives you more flexibility and achieves your goal of not re-rendering the page
Submit the form with a target="_blank" attribute
This will open a new window with the results of the form submission. From the wording of your question, it doesn't sound like you would want to use this method for your use case
Add a hidden iframe to the page with an id and set the form's target attribute to the id of the iframe
This option is a good middle ground if you don't need to do anything with the response but it does have some side effects like adding to the user's history in some browsers which can be confusing when they hit the back button and it doesn't do anything.
I have a problem when trying to submit a form with a div (instead of a f.submit button)
<%= form_for #user, url: {action: "submit_user"}, html: {id: "user_submit", class: "form"}, :method => "post" do |f| %>
<%= f.text_field :first name, :required => true, :placeholder => 'first name', :autocomplete => :off %>
<%= f.text_field :last name, :required => true, :placeholder => 'last name', :autocomplete => :off %>
<div id="submituser" class="some very fancy css here" onclick = "document.forms['user_submit'].submit();">
<% end %>
The problem is that the form is sent, but without the validations (causing it to send blank first and last name if nothing is entered)
note that when using
<% f.submit "submit" %>
validations do work.
Thanks
I guess document.forms['user_submit'].submit(); does not trigger the submit event, so You have to launch validation manually. But what is the point of using div instead of button? You could style a button with some very fancy css here too. OR make a 'hidden' submit button and add onclick = "document.form.button.click()" to div :-)
Found my answer here:
Difference between handling $(“form”).submit or an click event?
And i quote #Giovanni Sferro:
The click callback is called only if the user actually click on the submit button. But there are cases in which you would submit the form automatically by javascript, in that case the click callback is not fired while the submit callback is. I would recommend to use always the submit for validation and intrinsic action of the form, while using the click callback for animation or other things related to the action of clicking on the button.
so my (working) code looks like this:
<div id="submituser" class="some very fancy css here" onclick = '$("#user_submit input[type=\"submit\"]").click();'>
I see some issues similar but they seem contrived and mostly for previous versions of Rails.
What is the simplest way to submit a form with an anchor tag (link) instead of the normal button
<%= f.submit 'Search', :class => "button expand"%>
What is the most concise way (best practice) way to change that to a link that submits?
I often use js/jquery to submit forms. It's very useful if the submit button is outside of the form or if there is more than one button that submits the same form.
$(".submit-btn").click(function(event) {
event.preventDefault();
$("#form-id").submit();
});
The event.preventDefault(); prevents the default button/submit behaviour.
Here is a coffeescript example I have used in a rails 4 project:
ready = ->
if $("#form-id").length > 0
$(".submit-btn").click (event) ->
event.preventDefault()
$("#form-id").submit()
$(document).ready ready
$(document).on "page:load", ready
Also note, this way the link can be any type of element - not necessarily a submit button. You do not have to have the submit button inside the form, but if you do the preventDefault will prevent the default form submission behaviour.
Submit
To extend the answers provided already, HTML forms have to be submitted with a submit button.
I'm not sure exactly what special characteristics the submit button has over a link - it essentially calls the submit action, which a link cannot (info):
--
Link
This means if you wish to replace a submit button with a link, you'll essentially have to mimick the submit method in your application. This can be done with JS (JQuery):
#app/assets/javascripts/application.js
$(document).on("click", "#your_link", function(){
$("#form").submit();
});
#app/views/controller/your_view.html.erb
<%= form_tag your_path, id: "form" do %>
<%= link_to "Submit", your_path, id: "your_link" %>
<% end %>
This is so simple:
Then:
<%= f.submit '', :class => "hidden", :id => 'form_submit_button' %>
content_tag(:a, 'Submit', :name => 'submit', :id => 'submit_link')
and in JS:
$(document).ready(function() {
$(document).on("click","#submit_link",function() {
$('#form_submit_button').click();
});
});
I am not sure about exact sytax so there might be some syntax error. Feel free to ask for more help.