Making Your Forms Auto-Focus (Ruby on Rails)
Introduction
This covers the same material as this entry from Building Browsergames: Making Your Forms Auto-Focus
Why Do We Have To Do Anything Different?
The advice is excellent and it works perfectly, but it has to be tweaked ever so slightly for Rails. Rails actually generates your form fields for you and names them itself in order to easily copy an object into the fields when populating a form and then make a new object out of the form inputs afterward. As a result, the form_for command you see in a page like app/views/users/new.html.erb:
<% form_for :user, :url => users_path do |f| -%> <p><%= label_tag 'login' %><br/> <%= f.text_field :login %></p> <p><%= label_tag 'email' %><br/> <%= f.text_field :email %></p> <p><%= label_tag 'password' %><br/> <%= f.password_field :password %></p> <p><%= label_tag 'password_confirmation', 'Confirm Password' %><br/> <%= f.password_field :password_confirmation %></p> <p><%= submit_tag 'Sign up' %></p> <% end -%>
Generates HTML that looks like this:
<form action="/users" method="post"> <div style="margin:0;padding:0"><input name="authenticity_token" type="hidden" value="41adf13eec9e99506a55c427ce59052a5543cf70" /></div> <p><label for="login">Login</label><br/> <input id="user_login" name="user[login]" size="30" type="text" /></p> <p><label for="email">Email</label><br/> <input id="user_email" name="user[email]" size="30" type="text" /></p> <p><label for="password">Password</label><br/> <input id="user_password" name="user[password]" size="30" type="password" /></p> <p><label for="password_confirmation">Confirm Password</label><br/> <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /></p> <p><input name="commit" type="submit" value="Sign up" /></p> </form>
So when we write our JavaScript, we need to make sure it specifies the correct element ID for the HTML that will actually be generated by Rails:
<script type="text/javascript"> window.onload = function() { document.getElementById('user_login').focus(); } </script>
user_login is the name of the field that Rails will generate for login input in our case. If you aren’t sure of the name that will be used, just go to the page in your browser and view the page source. You can see the actual label used there.
Extra Credit
- Line #3 of the HTML code above features an “authenticity_token” that Rails inserted automatically for us. Find out what it does and why you want it.
John Munsch is a professional software developer with over 20 years experience. He created a series of game development sites (XPlus and DevGames.com) on his own before co-founding GameDev.net in 1999. The blog for his PBBG work is located at MadGamesLab.com.
-
elecnix
-
Nisha
-
Marko Anastasov
-
jake