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.
Related
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
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 am new to rails and a little bit stuck with a challenge: I have a model with a "status" column, which can be 0 or 1. In index view, I want to put a direct link to change status from 0 to 1, this I can do. What I would like to do is ask a reason (text filed) for the status change, and send that text as a parameter to the corresponding action.
Can anyone point me in the right direction on how to do this?
Thanks!
You can use form_tag for the same, radio buttons for 0 or 1 and a text field for the reason
If I understand correctly, your question is "how to pass form data along with a link" ?
While you can't do this strictly in term of html implementation, there are several ways to make it look at if you do.
Styling a button like a link
Probably the easiest way would be to use a form, then style your button as a link. The advantage of that is that it won't need any javascript.
You first set up a form :
<%= form_tag my_action_path do %>
<%= text_field_tag :reason %>
<%= submit_tag 'Do it', class: 'submit' %>
<% end
Then, you style your input accordingly :
.submit { border: 0 none; background: none; text-decoration: underline; cursor: pointer; }
.submit:hover { text-decoration: none; }
See it running.
This implementation will fire a POST request, this is probably what you should use since the action implies user writing something rather than reading it (you can still pass method: :get if you prefer a GET request).
Add input data as query string
You can also hook click event on link and change url to include input's content. Provided the following html :
<%= text_field_tag :reason %>
<%= link_to 'do it', my_action_path %>
You could do this in javascript :
$('a').click(function(event){
event.preventDefault(); # prevent link to be followed
# compute an url adding the input content
var new_url = $(this).attr('url') + '&?reason=' + $('input').val();
# redirect user to that url
window.location.href = new_url;
});
I'm not very fond of this solution, because you may have url encoding / length problems, and adding inputs outside forms is not valid html. And if you add a form, well, you have to also handle it's submit event (since pressing the "return / enter" key in a text field will submit its form).
Use a form and submit it when clicking link
You can also use a regular form, then trigger its submit when clicking the link :
<%= form_tag my_action_path do %>
<%= text_field_tag :reason %>
<%= link_to 'Do it', my_action_path %>
<% end %>
Here, the javascript would be something like that :
$('a').click(function(event){
event.preventDefault(); # do not follow link
$('form').submit(); # submit form instead
});
As far as I can tell button_to is for submitting a form. Is there something in rails dedicated for buttons that just run some javascript on the client without sending anything to the server?
If you want to run only javascript on client side, you can add plain html button and call some function to run your required javascript, by binding an event to that button. You dont need to use rails code at all.
That has nothing to do with rails but rather HTML.
You can always place normal HTML markup (like a <button> or a <a> on the form and make it trigger some action in JavaScript)
Sample:
<%= form_for(#post) do |f| %>
...
<button id="clicktrigger">Click Me!</button>
<% end %>
Please try this:
you can call javascript function using onclick. It will not submit a form.
<%= submit_tag "Test me!", :type => 'button', :onclick => 'alert("It works!")' %>
I'm trying to submit a form using link_to as follows:
<%= form_for(#post, :url=> '/post/action', :method=> 'post', :html => {:id=>'form_id'} ) do |f| %>
....
<%= link_to 'submit', "/post/action", :onclick=>"document.getElementById('form_id').submit()" %>
....
but it is not posting the form, it is simply redirecting my form to the specified url. Does anyone know how to do this?
You can use:
<%= link_to 'submit', "#", :onclick => "$('#form_id').submit()" %>
if you are using JQuery and a later version of rails.
Above will work but if you have a really long page it will navigate to top of the page because of "#" so if you want to avoid that you can do:
<%= link_to 'submit', "", :onclick => "$('#form_id').submit()" %>
I think both things happen. The browser starts to submit the form, but it also follows the link's href. You can fix it by linking to # instead of /post/action...
...however, I don't recommend doing it. There are a few better approaches:
First, you can use a button instead of a link. You'll have to style it to make it look like a link, but that should not be a problem. It will be better, because it won't break the Principle of Least Surprise (people who read the code expect forms to be submitted with buttons) and you won't need the JavaScript.
If you insist on using a link, you should at least move the JavaScript code from the view to a JavaScript file. Then have this behavior added unobtrusively (although, you won't have a good fallback with the link). Assuming you're using jQuery, it should be as simple as:
$(document).on('click', '[data-submit-form]', function(e) {
e.preventDefault();
$(this).closest('form').submit()
}