I have a Rails 5 application using only AngularJS, no jQuery/Turbolinks. Typical submit buttons generated by form helper do not work in this application (go immediately to disabled) without submitting the form, and I've resorted to using button_tags with type="Submit" instead.
If I remove the "name='commit'" atribute from the submit button, it works as expected by submittin the form. I'm wondering if there's something bound to this attribute that I'm not seeing. Below is an example form.
<%= form_for(role) do |f| %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
<div class="actions">
<%= f.submit %> <!-- this fails -->
<input type="submit" /> <!-- this works -->
</div>
<% end %>
Before click, the button html looks like this:
<input type="submit" name="commit" value="Update Role" data-disable-with="Update Role">
After click, the button looks like this:
<input type="submit" name="commit" value="Update Role" data-disable-with="Update Role" disabled="disabled" class="disabled">
It's as if Chrome thinks that the form has been submitted, but something has blocked this from happening.
Documentation: Link
<div class="actions">
<%= f.submit "Commit", name: "commit" %>
#or
<input type="submit" name="Commit" />
</div>
As the documentation suggests, this is perfectly fine.
<%= form_for #post do |f| %>
<%= f.submit %>
<% end %>
Rails form_for will transform f.submit to the respective submit button with type as submit. Try restarting the server once and check if the issue persists.
An additional thing is that any button with type as submit inside the rails form will be taken as form submit button.
Related
I am trying to use a simple html5 form in Ruby on Rails. My fieldset code:
<fieldset class="form-group">
<legend><%= question.title %></legend>
<% question.answers.each do |answer| %>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="question-<%= question.id %>" value="answer-<%= answer.id %>">
<%= answer.title %>
</label>
</div>
<% end %>
</fieldset>
is displayed correct, and when I select one or several options and submit, I have only one parameter in the request as it were radiobutton form although I selected several variants:
{"question-162"=>"answer-467"}
How to make this form working correct and send multiply parameters in the submit request?
Change the name attribute of the checkbox to question-<%= question.id %>[] (adding trailing []), and you will get request parameters like below:
{"question-1"=>["answer-1", "answer-3"]}
I've got a nice bootstrap navigation menu with a search box in it.
I've got it in a partial file...
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I like the layout of this search box. Unfortunately, I can't figure out how to get my rails search box to look the same...
<%= search_form_for #search do |f| %>
<div class="field">
<%= f.label :title_or_template_cont, "Search" %>
<%= f.text_field :title_or_template_cont %>
</div>
<div class="actions">
<%= f.submit "Search" %>
What changes do I need to make in my rails form to look like the bootstrap search box?
I tried a few classes within the rails search box, but wasn't close to the way it looked.
Any suggestions?
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Checkout the gem "Simpleform" so you can style forms with css easily in rails using their helpers. Then:
<%= simple_form_for #search, html: {class: "navbar-form navbar-left"} do |f| %>
<div class="form-group">
<%= f.input_tag :title_or_template_cont, label: false, input_html: {class: 'form-control'}, placeholder: 'search' %>
</div>
<div class="actions">
<%= f.submit "Search", class: "btn btn-default" %>
I'm going through Michael Hartl's Rails tutorial. One of the exercises for chapter 8 is to rewrite the code using form_tag instead of form_for. After viewing the source that form_for was giving me and looking up each tag in the Rails documentation, I was able to successfully put it together.
My question is: How does Rails know what id attribute to give the <input> tag created by text_field_tag, so that it matches the id of the <label> tag created by the label_tag that precedes it?
Here's the code for the form:
<%= form_tag(sessions_path) do %>
<%= label_tag "session_email", "Email" %>
<%= text_field_tag "session[email]" %>
<%= label_tag "session_password", "Password" %>
<%= password_field_tag "session[password]" %>
<%= button_tag("Sign in", name: "commit", type: "submit") %>
<% end %>
Here's the resulting html:
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="c9a5KJveRSOQyDo/ckUtpmQAbjw2f1alnB6Dn1lu3XU=" /></div>
<label for="session_email">Email</label>
<input id="session_email" name="session[email]" type="text" value="{:id=>"session_email"}" />
<label for="session_password">Password</label>
<input id="session_password" name="session[password]" type="password" value="{:id=>"session_password"}" />
<button name="commit" type="submit">Sign in</button>
Note that since Rails 5.1, the recommended form helper to use is form_with.
And form_with no longer automatically generates id's and class's for DOM elements any more like form_for and form_tag used to.
This has implications for adding markup like labels which used to link up to their corresponding input fields automatically. Now, for a label to properly pair up to an input field (with the for attribute) you need to explicitly add the id attribute to the input.
Example
ERB:
<%= form_with model: User.new do |f| %>
<%= f.label :name %>
<%= f.text_field :name, id: :user_name %>
<% end %>
which generates HTML:
<form action="/users" method="post">
<label for="user_name">Name</label>
<input id="user_name" type="text" name="user[name]">
</form>
See also
https://medium.com/#tinchorb/form-with-building-html-forms-in-rails-5-1-f30bd60ef52d, specifically the heading "No more auto-generated ids and classes".
My page contains 3 buttons New, Login, SignUp, and when I click New, I am getting form with two tabs, for New, Login and SignUp Buttons. But, I want, Login tab alone with page when I click the Login Button. And, SignUp tab alone with page, when I click on SignUp button.
Hope, some wil sureply help me... I am completely new to this .....
Here is my code...
Thanks in advance
Here is my code...
New Page code:
Login
SignUp
Login
SignUp
<%= f.label :content %><br />
<%= f.text_field :content %>
<%= f.label :user_id %><br />
<%= f.number_field :user_id %>
<%= f.submit %>
-->
<div class="modal-footer">
<button type="submit" class="btn btn-primary" >Save changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
Index code:
New Micropost
Login
SignUp
As far I got you, I think you need to do as below:
# index.html
<%= form_for(MicroPost.new) do |f| %>
<ul class="nav nav-tabs">
<li>Login</li>
<li>SignUp</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="new">Login</div>
<div class="tab-pane " id="new1">SignUp</div>
<div class="field">
<%= f.label :content %><br />
<%= f.text_field :content %>
</div>
<div class="field">
<%= f.label :user_id %><br />
<%= f.number_field :user_id %>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" >Save changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
<% end %>
This is working for me.
Hope this would help.
Right now when I create a form using a form_for Ruby on Rails creates an extra <br> tag after the form. Is there an option to not have RoR create this for me? Here is the code for creating the form:
<%= form_for(:user, :url => create_user_path) do |f| %>
<div class="field">
<%= f.label :email %>
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label :password %>
<%= f.password_field :password %>
</div>
<div class="actions">
<%= f.submit "Submit" %>
</div>
<% end %>
Output:
<form method="post" action="http://localhost:3000/users" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="fsdfsdf+rgJKoc5sdQvsqvT2s=" name="authenticity_token"></div>
<div class="field">
<input type="text" size="30" name="user[password_clear]" id="user_password_clear" class="text_box">
</div>
<div class="field">
<input type="text" size="30" name="user[password]" id="user_password" class="text_box">
</div>
<div class="actions">
<input type="submit" value="Sign Up" name="commit" class="button button_medium button_green">
</div>
</form>
<br>
Thank you!
As long as you don't plan on creating a new form you could refrain from closing the form until you want a to appear, just don't add the <% end %> tag until you want a br and keep the following code inside the current form.
It's not very ellegant but it will probably work the way you want it to.