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!")' %>
Related
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.
Right now what it does is allows me to select files but I need to click an additional "Submit" button to do the form submission. Is it possible to combine the functionality of the browse button with form submission? Is there functionality within Rails or do I need to create a custom ajax call using javascript? Thanks!
Current code:
= form_for #user, :url => add_file(#user), :remote => true do |f|
= file_field_tag :file
Rails does not have such functionality.
You will need to write javascript to do this, but you do not need to make an ajax call.
Instead, define the file_field_tag but make it hidden with CSS display:none;. Then define a button which implements your javascript. Your javascript should call the hidden file_field_tag, and then submit the form.
<% form_for #user, :url => add_file(#user), :remote => true do |ff| %>
<%= ff.file_field_tag "file", "id" => "file_select_input", "style" => "display:none" %>
<%= ff.button "upload", "onclick" => "<your-javascript-call>" %>
<% end %>
Sorry to not write this in HAML, but I leave that to you. :)
For this you will need to use jquery for sure...
I did the same using following functionality
Here is my html code:-
<div class="third"><input name="upload" value="" type="text"/> <span class="activebtn sm">Browse...</span><input type="file" name="images[]" onchange="displayPreview(this.files,this)" class="image_upload" size="23" id="image_upload1"/></div>
On change i have written jquery
function displayPreview(files,obj)
{
curr_file_obj = $(obj);
if(window.FileReader)
{
var reader = new FileReader();
reader.onload = onFileLoad;
reader.readAsDataURL(files[0]);
}
}
My requirement was to upload an image and show its preview instantly as soon as i upload it.
Its not possible with rails, but you could consider using a javascript plugin like fine uploader
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()
}
I'm trying to create a very small simple form that edits a single checkbox, and submits automatically with AJAX when the checkbox is modified. Here's the code, which other SO questions imply should work:
<%= form_for(workitem, :remote => true) do |f| %>
<%= f.check_box :is_complete, :onchange => 'this.form.submit()' %>
<% end %>
The problem is that this results in a full page HTML submit, rather than an AJAX submit. How do I trigger an AJAX submit?
This seems to work:
$(this.form).submit();
Good 'ol jquery to the rescue.
This is simply in Rails way :
$("#myform").trigger('submit.rails');
find it here : same question
I have the following form in my Rails application:
<% form_tag password_resets_path, :id => 'recoverPasswordForm' do %>
<label for="passwordRecoveryEmailAddress">Email Address:</label>
<%= text_field_tag "passwordRecoveryEmailAddress" %>
<%= submit_tag 'Recover' %>
<br />
<div id="forgotPasswordLoginLinkContainer">
<a id="forgotPasswordLoginLink" href="/login">Login Instead</a>
</div>
<% end %>
When this form is submitted, the page must reload. I would like to easily turn this form into an AJAX form, such that the form submits via AJAX, and a page reload does not happen.
I could do this easily using jQuery, hooking into the .submit() function. But, I am curious: does Rails provide some easy way to turn any given form into an AJAX form? Or, what's the simplest (yet elegant) way possible? Maybe something like
<% form_tag password_resets_path, :id => 'recoverPasswordForm', :ajax => true do %>
I'm using Rails 2.
Yes, and you were close with your guess. Rails 3 allows you to do form_tag ..., :remote => true to let the form use AJAX if Javascript is available.
See http://railsapi.com/doc/rails-v3.0.0/classes/ActionView/Helpers/FormTagHelper.html#M002483