29962

Button_to tag in a form closes form

Question:

I am currently working with form in ruby on rails 3. So in my project form I have a button to sign users out of this project. However, the strange thing is, that the button_to tag closes my whole form and i cannot use my submit button anymore.

So I tried a lot, but i do not understand why this happens.

So this is my form:

<%= form_for @project, html: { class: "form-horizontal project" } do |f| %> <div> <%= f.label :users, 'Project Users:', :class => 'control-label', style: 'margin-bottom: 20px' %> <div> <% @project.users.order('last_name').each do |user| %> <div style="margin-bottom: 15px"> <%= user.name %> <%= button_to 'Sign Out', sign_user_out_project_path(user_id: user.id, id: @project), method: :delete, class: 'btn btn-danger btn-xs pull-right', style:'margin-right: 600px; margin-top: -20px' %> </div> <% end %> </div> </div> <%= f.submit nil, :class => 'btn btn-primary' %> <%= link_to t('.cancel', :default => t("helpers.links.cancel")), projects_path, :class => 'btn btn-default' %> <% end %>

In my opinion this code looks fine, as all tags are perfectly closed. However, i think there might be some magic when using button_to so maybe someone knows a better way to do what I want to do.

Thanks!

Answer1:

Don't put a button_to inside your form.

As per the <a href="http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to" rel="nofollow">docs</a>:

<blockquote>

(button_to) Generates a form containing a single button that submits to the URL created by the set of options

</blockquote>

--

HTML forms have a <a href="http://www.w3schools.com/html/html_forms.asp" rel="nofollow">clear spec</a>, and you should adhere to that whenever you implement one.

Including a form within a form causes the "outer" form to stop working (HTML can't process another <form> before </form>.

<hr />

The simple answer is to remove your button_to from within your form & put it outside, <em>or</em> (in your case), replace it with another element (link_to). If you want the link to look like a button, you can use <a href="https://stackoverflow.com/a/15695784/1143732" rel="nofollow"><button> markup</a> to create a button:

<%= form_for @project, html: { class: "form-horizontal project" } do |f| %> <div> <%= f.label :users, 'Project Users:', :class => 'control-label', style: 'margin-bottom: 20px' %> <div> <% @project.users.order('last_name').each do |user| %> <div style="margin-bottom: 15px"> <%= user.name %> <%= link_to '<button>Sign Out</button>'.html_safe, sign_user_out_project_path(user_id: user.id, id: @project), method: :delete, class: 'btn btn-danger btn-xs pull-right', style:'margin-right: 600px; margin-top: -20px' %> </div> <% end %> </div> </div> <%= f.submit nil, :class => 'btn btn-primary' %> <%= link_to t('.cancel', :default => t("helpers.links.cancel")), projects_path, :class => 'btn btn-default' %> <% end %>

Recommend

  • Strong Parameters - Can't Access the Deeply-Nested Attributes
  • Getting data from database using HQL
  • redirect user after update in class based view in django
  • Yii2 Login with database
  • Enumerating Controls on a Form
  • Does Apportable support to build library binary (.a/.so)?
  • Floated image with variable width and heading with background image
  • order post according to custom array position
  • xcode don't localize specific strings
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • Adjust width of select element according to selected option's width
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Webgrid not refreshing after delete MVC
  • Swift: Switch statement fallthrough behavior
  • Custom validator control occupying space even though display set to dynamic
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Switching to Release Build causes runtime error in Web Reference
  • Breeze - Deleted Items nav properties bug
  • Change multiple background-images with jQuery
  • Avoid links criss cross / overlap in d3.js using force layout
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Deselecting radio buttons while keeping the View Model in synch
  • Nant, Vault & Windows Integrated Authentication
  • What is the “return” in scheme?
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • javaw.exe and eclipse startup problems
  • Bug in WPF DataGrid
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Which linear programming package should I use for high numbers of constraints and “warm starts” [clo
  • Change an a tag attribute in JavaScript based on screen width
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • QuartzCore.framework for Mono Develop
  • Unanticipated behavior
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • need help with bizarre java.net.HttpURLConnection behavior