Tag: forms

Categories
Rails

Ruby On Rails: forms

In the example below we are passing a @user variable, but you can also pass something like this:

<%= form_for User.new, :url => { :controller => “users”, :action => “create” }, :html => {:class => “whatever_class_needed”} do |f| %>

And now, the example:

<%= form_for(@user) do |f| %><%= 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, “Confirmation” %>
<%= f.password_field :password_confirmation %>

<%= f.submit “Create my account”, class: “btn btn-large btn-primary” %>
<% end %>

If you want to also include the error messages:
<%= render ‘shared/error_messages’ %>
In your shared directory, you have a partial that handles that:
<% if @user.errors.any? %>
<div id=”error_explanation”>
<div class=”alert alert-error”>
The form contains <%= pluralize(@user.errors.count, “error”) %>.
</div>
<ul>
<% @user.errors.full_messages.each do |msg| %>
<li>* <%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
Where @user is the controller variable driving your form
If you need to style the error messages differently (than the default red), you can modify the following stylesheet:
app/assets/stylesheets/scaffold.css.scss
Categories
JavaScript

Forms manipulation in JQuery

var fieldValue = $(‘#user’).val(); // Get the value of the form field with id ‘user’

var fieldValue = $(‘#user’).val(‘Value to set’); // Set the value of the form field with id ‘user’

var fields = document.getElementsByTagName(‘input’); // Select all form fields

$(‘:input’).attr(‘disabled’,true); // Disable input fields

To select all form fields of a given type in JQuery:

$(‘:input’) Selects all input, textarea, select, and button elements. In other words, it selects all form elements.
$(‘:text’) Selects all text fields.
$(‘:password’) Selects all password fields.
$(‘:radio’) Selects all radio buttons.
$(‘:checkbox’) Selects all checkboxes.
$(‘:submit’) Selects all submit buttons.
$(‘:image’) Selects all image buttons.
$(‘:reset’) Selects all reset buttons.
$(‘:button’) Selects all fields with type button.
$(‘:file’) Selects all file fields (used for uploading a file).
$(‘:hidden’) Selects all hidden fields.

You can combine form selectors as follows: $(‘#signup :text’) // Select ‘signup’ element but only text input fields from those selected

$(‘:checked’) Select all checkboxes that have been checked

if ($('#news').attr('checked')) {
  // the box is checked
} else {
  // the box is not checked
}
var selectedState=$('#state :selected').val(); // Gets the value of the selected fields of 'states'
Example of submit event:
$(document).ready(function() {
      $('#signup').submit(function() {
         if ($('#username').val() == '') {
            alert('Please supply a name in the Name field.');
            return false;
         }
      }); // end submit()
}); // end ready()
Example of focus event:
$('#username').focus(function() {
     var field = $(this);
     if (field.val()==field.attr('defaultValue')) {
       field.val('');
     }});
Example of change event:
$('#country').change(function() {
  if ($(this).val()=='Please choose a country') {
    alert('Please select a country from this menu.');
  }
}
Categories
CSS HTML

HTML Form elements and its CSS formatting

  • <fieldset> Encapsules a set of form fields, that can be styled as a group. Not all browsers behave the same with it.
  • <legend> Provides a label for the fieldset tag, it must follow right after the fieldset tag
  • <input type=”text” /> It is the safest cross browser element in forms that style the same across the board. Things you can change: fonts, background image and color (no images on safari), borders
  • button. Text and colors are customizable, except safari. text-align also works for this.
  • <label for=”name” class=”mylabel”> It allows a label to be attached to a given input field, it goes something like this: <p><label for=”name”>What is your name?</label><input type=”text” name=”name” id=”name” /></p>
  • :focus pseudo-class could be used to add a great effect to the input fields as the user focus on them. But only works on the latest browsers.