I have the layout presently using nested_form_for as:
with the code as simply:
<%= f.label :monday %>
<%= f.check_box :monday %>
<%= f.label :tuesday %>
<%= f.check_box :tuesday %>
<%= f.label :wednesday %>
<%= f.check_box :wednesday %>
<%= f.label :thursday %>
<%= f.check_box :thursday %>
But I would like if these attributes could like listed in a straight line with breaks such as:
Monday | Tuesday | Wednesday | Thursday ....
Is there a setting in nested_form_for to allow this?
Note below is the HTML generated from the first response
<hr>
<strong>Day(s) special Will Appear</strong>
<ul id="dayForm">
<label for="campaign_monday">Monday</label>
<input name="campaign[monday]" type="hidden" value="0" /><input id="campaign_monday" name="campaign[monday]" type="checkbox" value="1" />
<label for="campaign_tuesday">Tuesday</label>
<input name="campaign[tuesday]" type="hidden" value="0" /><input id="campaign_tuesday" name="campaign[tuesday]" type="checkbox" value="1" />
<label for="campaign_wednesday">Wednesday</label>
<input name="campaign[wednesday]" type="hidden" value="0" /><input id="campaign_wednesday" name="campaign[wednesday]" type="checkbox" value="1" />
<label for="campaign_thursday">Thursday</label>
<input name="campaign[thursday]" type="hidden" value="0" /><input id="campaign_thursday" name="campaign[thursday]" type="checkbox" value="1" />
<label for="campaign_friday">Friday</label>
<input name="campaign[friday]" type="hidden" value="0" /><input id="campaign_friday" name="campaign[friday]" type="checkbox" value="1" />
<label for="campaign_saturday">Saturday</label>
<input name="campaign[saturday]" type="hidden" value="0" /><input id="campaign_saturday" name="campaign[saturday]" type="checkbox" value="1" />
<label for="campaign_sunday">Sunday</label>
<input name="campaign[sunday]" type="hidden" value="0" /><input id="campaign_sunday" name="campaign[sunday]" type="checkbox" value="1" />
</ul>
Rails form_for helpers help you generate HTML; the HTML generated is still subject to the same rules as other HTML elements. Rails offers ways to add HTML/CSS to the form fields themselves, which may be what you are looking for. For example,
<%= f.label :monday, :class => 'inline' %>
The :class => 'inline' adds the class 'inline' to the HTML form element on the page and you can add styling thereafter to .inline {} in your css file.
But you could also simply do something like:
Wrap the form fields with a <ul> tag,
<ul id="dayForm">
<%= f.label :monday %>
<%= f.check_box :monday %>
<%= f.label :tuesday %>
<%= f.check_box :tuesday %>
<%= f.label :wednesday %>
<%= f.check_box :wednesday %>
<%= f.label :thursday %>
<%= f.check_box :thursday %>
</ul>
And in your css file,
ul#dayForm {
list-style: none;
}
ul#dayForm input {
display: list-item;
float: left;
width: 100px; /* adjust depending on desired size */
}
ul#dayForm label {
display: list-item;
float: left;
width: 100px; /* adjust depending on desired size */
}
To create the inline effect that you are looking for.
Related
This is type of button that interests me:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
</div>
And currently my form in Rails looks like this
<%= form_for [current_user, rsvp], remote: true do |f| %>
<%= f.hidden_field :event_id %>
<%= f.radio_button :status, "attending", :onclick => "this.form.submit();" %>
<%= f.radio_button :status, "interested", :onclick => "this.form.submit();"%>
<%= f.radio_button :status, "not_interested", :onclick => "this.form.submit();" %>
<% end %>
HTML that the form above produces:
<form class="edit_rsvp" id="edit_rsvp_10" action="/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="MIbWTIdE3/6MJ5ly3oWleBRIvit5WA0CeFm/+caKj049svqPVG8h+uf76NVjxr31d69jlbMWNIIB4Eo7a6R9cw==" />
<input type="hidden" value="17" name="rsvp[event_id]" id="rsvp_event_id" />
<input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" />
<input onclick="this.form.submit();" type="radio" value="interested" checked="checked" name="rsvp[status]" id="rsvp_status_interested" />
<input onclick="this.form.submit();" type="radio" value="not_interested" name="rsvp[status]" id="rsvp_status_not_interested" />
</form>
Sticking the btn class at the end like this <%= f.radio_button :status, "attending", :onclick => "this.form.submit();", :class => "btn btn-primary" %>, produces what looks like a standard Rails radio button.
Doing it the other way around produces Bootstrap buttons that don't change anything when you click them
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" autocomplete="off"> Attending
</label>
UPDATE 1
It looks like in Taryn's solution the original Rails radio button just got veiled underneath the new Bootstrap button, a click anywhere on the Bootstrap button produces no controller action.
and here's the HTML her code produces:
<form class="edit_rsvp" id="edit_rsvp_10" action="/users/1/rsvps/10" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="qqtfAy+xZmnklDe+IXVGg2sFbhLC5laWQn4jRBb+RT+nn3PA/JqYbY9IRhmcNl4OCOKzrAiobxY7x9aGu9C3Ag==" />
<input type="hidden" value="17" name="rsvp[event_id]" id="rsvp_event_id" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending" />
Attending
</label>
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="interested" checked="checked" name="rsvp[status]" id="rsvp_status_interested" />
Interested
</label>
<label class="btn btn-primary">
<input onclick="this.form.submit();" type="radio" value="not_interested" name="rsvp[status]" id="rsvp_status_not_interested" />
Not Interested
</label>
</div>
</form>
UPDATE 2
trying a submit button like so
<label class="btn btn-primary">
<%= f.submit :status => "attending", :onclick => "this.form.submit();" %>
Attending
</label>
still produces overlap and two separate buttons, one from Bootstrap and one from Rails. Only clicking the Rails' grey area triggers the controller action.
You'll need a combination of erb and html to make it look like bootstrap.
I haven't tested this, but something like this might work for your buttons:
<%= form_for [current_user, rsvp], remote: true do |f| %>
<%= f.hidden_field :event_id %>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><%= f.radio_button :status, "attending", :onclick => "this.form.submit();" %></label>
<label class="btn btn-primary active"><%= f.radio_button :status, "interested", :onclick => "this.form.submit();"%></label>
<label class="btn btn-primary active"><%= f.radio_button :status, "not_interested", :onclick => "this.form.submit();" %></label>
</div>
<% end %>
You may need to tweak it a bit - I am just combining the two snippets you gave.
I don't use haml a lot since mainly I always use erb , although for this particular project they want me to use it.
The error is after the form, and I am using tabs rather than spaces. Any idea why this is not working?
%div(id="openModal" class="modalDialog")
%div
%a(href="#close" title="Close" class="close")
<form id="car-form" enctype="multipart/form-data" action="/cars" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
<input type="hidden" name="authenticity_token" value="dNdUmF8Kp5jFgXwtBIV0W6NS8anp28Y7Ts7AOQGqez/BoSzlB1bb+5VXLU148dJClYXdOx/qV6b2QdBOIsEmxQ==">
<div class="control-group">
<label for="Year">Year</label>
<br>
<input type="text" name="year" id="year" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
</div>
<br>
<div class="control-group">
<label for="make">Make</label>
<br>
<select class="chosen" name="make" style="display: none;">
<option value="1">Jeep</option>
<option value="2">Range Rover</option>
<option value="3">ferrari</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 200px;" title=""><a class="chosen-single"><span>Jeep</span><div><b></b></div></a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</div>
<br>
<div class="control-group">
<label for="Model">Model</label>
<br>
<input type="text" name="model" id="model">
</div>
<br>
<div class="control-group">
<label for="Trim">Trim</label>
<br>
<input type="text" name="trim" id="trim">
</div>
<br>
<div class="control-group">
<label for="Car_Image_s_">Car image(s)</label>
<br>
<input type="file" name="files[]" id="files_">
</div>
<br>
<input type="submit" name="commit" value="Save changes">
</form>
Are you hand coding all of that? In HAML, it should look something more like:
#openModal.modalDialog
%div
= link_to "Close", anchor: "close", class: "close"
= form_tag cars_path, id: "car-form", multipart: true
.control-group
= label_tag "year"
= text_field_tag "year"
.control-group
= label_tag "make"
= select_tag "make", options_for_select(["Jeep","Range Rover","Ferrari"])
.chosen-container.chosen-container-single
.chosen-drop
.chosen-search
= text_field_tag "search", nil, autocomplete: 'off'
%ul.chosen-results
.control-group
= label_tag "model"
= text_field_tag "model"
.control-group
= label_tag "trim"
= text_field_tag "trim"
.control-group
= label_tag "files", "Care Image(s)"
= file_field_tag "files[]", multiple: true
= submit_tag "Save changes"
I haven't tested it, so there might be some bugs. But, if you're going to use HAML, you might as well, um, use HAML.
Anyway, to answer your question, my guess is that HAML is interpreting:
<form id="car-form" enctype="multipart/form-data" action="/cars" accept-charset="UTF-8" method="post">
as plain text (since <form ... > isn't valid HAML). Therefore, when you do this:
<form id="car-form" enctype="multipart/form-data" action="/cars" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓">
the second line (which is also interpreted as text) throws the illegal nesting error.
p.s. There was styling for the year input. You should really do that in a sass file (or whatever styling format you're using).
p.p.s. Hard coding your authenticity token seems like it's going to break.
I am still learning RoR but I cant learn by following someone else's code. I have decided to implement by own app.
I have generated a scaffold and in the _form.html.erb I have this:
<div class="field">
<%= f.label :bath_accessories %><br>
<%= f.select :bath_accessories, options_for_select(["Shower", "Extractor Fan", "Lights", "Shaver", "Heat Rail"]) %><br>
</div>
When the user selects "Shower" from the above lists, I want to enable in view:
<div class="field">
<%= f.label :watts %><br>
<%= f.number_field :watts %>
</div>
I am lost where to put the if statement for: <%= f.select :bath_accessories, options_for_select(["Shower", "Extractor Fan", "Lights", "Shaver", "Heat Rail"]) %> But I did this and nothing shows:
<% if :bath_accessories[0] %>
# What to out put here with "<%= code %>?
Generated HTML Tag:
<form class="new_bathroom_accessory" id="new_bathroom_accessory" action="/bathroom_accessories" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="r9M+Q7Np+/i68gwj65JSvV8wi4+4yb5d6tFWBHMw8k9nz1oRHGzh7AZHOTFvlaiS2lmqTch356vVYNlh7Urifw==" />
<div class="field">
<label for="bathroom_accessory_bath_accessories">Bath accessories</label><br>
<select name="bathroom_accessory[bath_accessories]" id="bathroom_accessory_bath_accessories"><option value="Shower">Shower</option>
<option value="Extractor Fan">Extractor Fan</option>
<option value="Lights">Lights</option>
<option value="Shaver">Shaver</option>
<option value="Heat Rail">Heat Rail</option></select><br>
</div>
<div class="field">
<label for="bathroom_accessory_watts">Watts</label><br>
<input type="number" name="bathroom_accessory[watts]" id="bathroom_accessory_watts" />
</div>
<div class="field">
<label for="bathroom_accessory_volts">Volts</label><br>
<input type="number" name="bathroom_accessory[volts]" id="bathroom_accessory_volts" />
</div>
<div class="actions">
<input type="submit" name="commit" value="Create Bathroom accessory" />
</div>
</form>
By adding an id to particular <div>,you can control that <div> as per user selection.
<div class="field" id="shower_id">
<%= f.label :watts %><br>
<%= f.number_field :watts %>
</div>
And you need JavaScript or JQuery code like this
$('#bathroom_accessory_bath_accessories').on('change',function(){
if( $(this).val()==="Shower"){
$("#shower_id").show()
}
else{
$("#shower_id").hide()
}
});
DEMO
I have a standard rails form_for tag for creating and editing a new hotel. This renders just fine when visited via the edit_hotels_path, however when visting the new_hotels_path the html form tag is being set to display: none; causing the form to not show only in the "new" view.
I have restarted the server, emptied the cache, made sure they are using the same CSS but it still renders with display set to none.
Here are the styles as seen using developer tools
<form accept-charset="UTF-8" action="/hotels" class="new_hotel" id="new_hotel" method="post" style="display: none; "><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="pDlR3gV2tm+Z7xRFdC0uclNY13FlzxUSOjOrHs2ttO0="></div>
element.style {
display: none;
}
below is the html source being rendered, which doesn't include display: none;
<form accept-charset="UTF-8" action="/hotels" class="new_hotel" id="new_hotel" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="pDlR3gV2tm+Z7xRFdC0uclNY13FlzxUSOjOrHs2ttO0=" /></div>
<div class="control-group">
<div class="controls">
<input id="hotel_name" name="hotel[name]" placeholder="Name..." size="30" type="text" /><br>
<select id="hotel_year" name="hotel[year]"><option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option></select><br>
<select id="hotel_month" name="hotel[month]"><option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option></select><br>
<textarea cols="40" id="hotel_body" name="hotel[body]" placeholder="Hotel info up to 1000 words..." rows="20">
</textarea><br>
<input id="hotel_meta_tags" name="hotel[meta_tags]" placeholder="Enter meta tags for image, as a comma separated list..." size="30" type="text" /><br>
<legend>Winner</legend>
<input name="hotel[winner]" type="hidden" value="0" /><input id="hotel_winner" name="hotel[winner]" type="checkbox" value="1" />
<br/>
</div>
<div class="form-actions">
<input class="btn-large btn-success" name="commit" type="submit" value="create" />
</div>
</div>
</form>
below is the code, would appreciated any help.
_form.html.erb
<%= form_for #hotel do |f| %>
<% if #hotel.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#hotel.errors.count, "error") %> prohibited this article from being saved:</h2>
<ul>
<% #hotel.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<%= render partial: "shared/code_sheet" %>
<div class="control-group">
<div class="controls">
<%= f.text_field :name, placeholder: "Name..." %><br>
<%= f.select :year, [2012, 2013, 2014, 2015] %><br>
<%= f.select :month, ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] %><br>
<%= f.text_area :body, placeholder: "Hotel info up to 1000 words..." %><br>
<%= f.text_field :meta_tags, placeholder: "Enter meta tags for image, as a comma separated list..." %><br>
<legend>Winner</legend>
<%= f.check_box :winner %>
<br/>
</div>
<div class="form-actions">
<%= f.submit "create", class: "btn-large btn-success" %>
</div>
</div>
<% end %>
edit.html.erb
<div class="container">
<h1>Editing hotel</h1>
<%= render "form" %>
<%= link_to 'hotels index', hotels_path %>
</div>
new.html.erb
<div class="container">
<h1>New hotel</h1>
<%= render "form" %>
<%= link_to 'hotels index', hotels_path %>
</div>
It could be anything. You must know what is in your CSS. Did you search for 'display: none;' in your CSS files and checked the matches? element.style is usually set directly on the HTML tag. Search the view also place debugging string to make sure it is pulling the appropriate .html.
A few days ago, my signup form for an app I'm building was working fine. The 'create my account' button would work even if no form fields were filled, and an error message would be displayed right away. Now, when I try to submit the form, the form only will submit or show error messages when all of the fields have been filled. If I try to submit the form without filling all of the fields, nothing happens. The signup button doesn't work correctly.
The only significant change that I made that I can think of is switching the stripe plan I was using to a free trial plan instead of a plan where the purchaser of the application pays up-front. I have no idea what could be causing this problem, so I don't know what code I should post. Any help you can provide would be appreciated.
The signup form I have in rails is as follows(minus some javascript that I'm using for Stripe):
<div class="row">
<div class="span6 offset4">
<%= form_for(#user) do |f| %>
<%= render 'shared/error_messages' %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.text_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Password confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.label :morning_meds, "Do you take medications in the morning?" %>
<%= f.select :morning_meds, [['Yes'], ['No']] %>
<%= f.label :lunch_meds, "Do you take medications at lunch?" %>
<%= f.select :lunch_meds, [['Yes'], ['No']] %>
<%= f.label :night_meds, "Do you take medications in the evening?" %>
<%= f.select :night_meds, [['Yes'], ['No']] %>
<%= f.label :time_zone, "Choose your time zone" %>
<%= f.select :time_zone, [['Eastern'], ['Central'], ['Mountain'], ['Pacific']] %>
<%= f.label :phone_number, "Your cell phone number" %>
<%= f.text_field :phone_number %>
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration Date</label>
<%= select_month nil, {add_month_numbers: true}, {name: nil, class: 'card-expiry-month' } %>
<span> / </span>
<%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, class: 'card-expiry-year' } %>
</div>
<%= f.submit "Create my account", class: "btn btn-large btn-primary" %>
<% end %>
</div>
</div>
<div class="row">
<div class="span6 offset4">
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="QqrFVykfeY1+9jImvp8VjTzrQxq8VlBF+vC6V85klw0=" /></div>
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" size="30" type="text" />
<label for="user_email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
<label for="user_password">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
<label for="user_password_confirmation">Password confirmation</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
<label for="user_morning_meds">Do you take medications in the morning?</label>
<select id="user_morning_meds" name="user[morning_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_lunch_meds">Do you take medications at lunch?</label>
<select id="user_lunch_meds" name="user[lunch_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_night_meds">Do you take medications in the evening?</label>
<select id="user_night_meds" name="user[night_meds]"><option value="Yes">Yes</option>
<option value="No">No</option></select>
<label for="user_time_zone">Choose your time zone</label>
<select id="user_time_zone" name="user[time_zone]"><option value="Eastern">Eastern</option>
<option value="Central">Central</option>
<option value="Mountain">Mountain</option>
<option value="Pacific">Pacific</option></select>
<label for="user_phone_number">Your cell phone number</label>
<input id="user_phone_number" name="user[phone_number]" size="30" type="text" />
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration Date</label>
<select class="card-expiry-month" id="date_month">
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<span> / </span>
<select class="card-expiry-year" id="date_year">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
</select>
</div>
<input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" />
</form>
It'd be helpful to see the HTML source your view generates, but you likely have 1+ fields with the HTML5 required attribute that you are leaving blank.
By default, newer browsers like Chrome will not allow the form to submit until all fields flagged with the required attribute have a value. To stop this you can add the novalidate attribute to the <form ... tag.
<%= form_for(#user, { :novalidate => true }) do |f| %>