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();
}
});
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 integrated google and facebook omniauth in my rails application. The signup and signin works great. But, I also have a form which should be submitted along with omniauth, so that I can access the form content as parameters.
This is the piece of code:
%section#hero.hero-blk
.container
.intro.text-center
%h1 Ask Question Instantly
%h3.hero-tagline Ask anonymously anytime
.row
.col-md-6
.ask-question
%h2.text-center Talk to us
%form{method: 'post', action: new_forward_questions_path}
=hidden_field_tag :authenticity_token, form_authenticity_token
%textarea.form-control{:autofocus => "", :cols => "20", :id => "question-content", :name => "content", :placeholder => "Describe your question on relationship, marriage. Please type atleast 50 characters", :rows => "7"}
%div#chars-left
%input{type: 'hidden', name: 'source', value: 'home'}
.text-center
%button#ask-button-index.glow-button.btn.btn-primary{type: 'submit'}
%img{:alt => "", :src => image_path("incognito-new.svg")}/
Ask Anonymously
.modal-body
#dialog-loading-icon.collapse
%p
Please wait, submitting your question
=image_tag "ripple.gif"
= simple_form_for #question do |f|
= f.input :content, as: :hidden, input_html: {id: 'hidden_question_content'}
- if current_user.nil? or current_user.asker.nil? or current_user.asker.new_record?
.social-sign-in.visitor-oauth.text-center
= link_to "Sign up with Gmail", user_google_oauth2_omniauth_authorize_path(#question), class: "zocial gmail"
= link_to "Sign up with Facebook", user_facebook_omniauth_authorize_path, class: "zocial facebook"
Below is the screenshot of html generated As you can see the modal form gets populated with "Oauth Oauth Oauth" This is the content which I am writing inside the textarea and when I click on the button the modal pops up and has the same content I typed:
I have tried passing #question here but nothing gets passed. In controller I am trying to access the params through request.env["omniauth.params"] but it is always blank.
How can I access or pass this content parameter to omniauth and access it in controller?
You don't need a form here since the content is a hidden input. You can pass it as extra params to link_to like below
= link_to "Sign up with Gmail", user_google_oauth2_omniauth_authorize_path(content: "Your desired value"), class: "zocial gmail"
and look for content in request.env["omniauth.params"]
Update:
The only way I can think of by appending the value of content to the url on a click event using Javascript of Jquery
<script type="text/javascript">
$(".gmail, .facebook").click(function(){
var hidden_content = $("#hidden_question_content").val();
var url = $(this).attr('href');
window.location.href = "url?content="+hidden_content;
});
</script>
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.
How do I submit a form (it may be just one field, i will give example in a second) with just 'enter' button, without showing a submit button to the user, or even placing it in a code at all?
right now i have:
= form_tag admin_users_path, :method => 'get'
= text_field_tag :filter, params[:filter]
and after clicking 'enter' it sends me to the Admin::UsersController, but params[:filter] is blank, however my information is displayed by "better_errors" in QUESRY_STRING and REQUEST_URL. Any ideas how can i make this work?
EDIT
Solution WITHOUT form_tag would be very much appreciated, it keep screwing with my css...
Try this:
= form_tag admin_users_path, :method => 'get' do
= text_field_tag :filter, params[:filter]
If you want just a link see this
Solution WITHOUT form_tag would be very much appreciated, it keep
screwing with my css...
HTML sends data through forms, and if you wanted to submit a text_field with enter, you'll have to use a simple form to define both the submission path & which data to send
Therefore, the two ways you can use are either to use JS, or a form to submit the field:
form_tag
= form_tag admin_users_path, :method => 'get'
= text_field_tag :filter, params[:filter]
This will submit with enter, and to fix your css, just amend the styles to work with the form. If you're scrimping on this fundamental html functionality
JS
The other option will be to mimic the submission of an HTML form with javascript:
$('element').on('keyup', function(e) {
if (e.which == 13) {
$.post(url, { value1: $(this).val() } );
}
});
<%= search_form_for #q do |f| %>
<%= f.search_field :title_cont, placeholder:"Search" %>
<%= f.submit %> <-------(1)
<% end %>
you just need to remove the "=" sign form the arrowed line or line (1) like
<% f.submit %>